valentin.dupont/club_info_yeahhh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit :D

Browse Source
This commit is contained in:
Valentin DUPONT 2025-11-14 18:35:30 +01:00
commit 6e346ac2c3
9 changed files with 567 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
base_JS/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body id="body">
<script src="script.js"></script>
</body>
</html>

197
base_JS/script.js Normal file
View File

@ -0,0 +1,197 @@
console.log('Salut :)');
// Les variables
// fonction d'une droite
// y = ax + b
// x et y sont des variables
// variable type number
let x = 3;
let a = 2;
let b = 23;
let y;
y = a*x + b;
console.log(y);
console.log(outerHeight);
// variable string (chaine de charactères)
let leprenomdelours = "hubert";
console.log(leprenomdelours);
let leprenomduloup = "maurice";
console.log(leprenomduloup);
// concatenation
let letritredemacomptine = leprenomdelours + " & " + leprenomduloup;
console.log(letritredemacomptine);
console.log(a + letritredemacomptine);
// boolean (vrai ou faux)
// https://fr.wikipedia.org/wiki/Alg%C3%A8bre_de_Boole_(logique)
let jesuisunevache = false;
let youaregreat = true;
console.log(jesuisunevache, youaregreat);
// comparaison
let lalignedescend = a < 0;
console.log("lalignedescend", lalignedescend);
// random (Aleatoire)
let unnombrealeatoire = 50 + Math.random() * 50;
// Array (tableau)
let malistedecourses = [
"beurre",
"salade",
"glace",
10,
true
];
console.log("malistedecourses", malistedecourses[0]);
// Object (objet)
let malistedecourseencoremieux = {
"biocoop": "l'adresse de biocoop",
"intermarcher": 99,
"salut": false
}
console.log("malistedecourseencoremieux", malistedecourseencoremieux.biocoop);
// nested (imbriquer)
let objectarraynested = {
"biocoop":[
{'beurre':1},
{'yahourt':10}
],
'leclerc':[
{'essence':10}
]
}
console.log("objectarraynested", objectarraynested);
// comment afficher des trucs
// créer un element html virtuel
console.log('document', document);
let body = document.getElementById('body');
console.log('body', body);
let h = Math.random()*360;
let s = Math.random()*100;
let l = Math.random()*100;
body.style.backgroundColor = `hsl(${h} ${s} ${l})`;
let cube = document.createElement('div');
cube.classList.add('cube');
//cube.style.color = `hsl(${index*3.6} 50 50)`;
//cube.style.top = 200+ Math.random()*400+"px";
//cubestyle.left = 200 + Math.random()*400+"px";
body.append(cube);
// Les boucles
let boules = [];
for (let index = 0; index < 100; index=index+1) {
boules[index] = document.createElement('div');
boules[index].classList.add('boule');
//boules[index].style.backgroundColor = 'rgb(255,0,255)';
// HSL Hue Saturation Luminosity
// boules[index].style.backgroundColor = 'hsl(180 50 50)';
// boules[index].style.backgroundColor = 'hsl(180 50 '+index+')';
// boules[index].style.backgroundColor = `hsl(180 50 ${index})`;
// boules[index].style.backgroundColor = `hsl(180 ${index} 50)`;
boules[index].style.backgroundColor = `hsl(${index*3.6} 50 50)`;
boules[index].style.top = Math.random()*1200+"px";
boules[index].style.left = Math.random()*2500+"px";
let rayon = 20 + Math.random()*50;
boules[index].style.width = rayon+"px";
boules[index].style.height = rayon+"px";
boules[index].style.borderRadius = (rayon/2)+"px";
//boules[index].style.mixBlendMode = "screen";
//boules[index].style.backgroundBlendMode = "screen"
body.append(boules[index]);boules;
}
// version carré mo
let carré = [];
for (let index = 0; index < 50; index=index+1) {
carré[index] = document.createElement('div');
carré[index].classList.add('carré');
carré[index].style.backgroundColor = `hsl(${index*2.0} 50 50)`;
carré[index].style.top = 200+ Math.random()*400+"px";
carré[index].style.left = 200 + Math.random()*400+"px";
carré[index].style.width = Math.random()*200+"px";
carré[index].style.height = Math.random()*200+"px";
carré[index].style.mixBlendMode = "screen";
carré[index].style.opacity = Math.random()*100+"%";
//carré[index].style.backgroundBlendMode = "screen"
body.append(carré[index]);
}
console.log('carré', carré);
// une fonction
// function unefunctiontest(){
// }
// c'est pareille que :
// let unefunctiontest = function() {
// }
// la version moderne
let unefunctiontest = (test, unautre) => {
// entre les deux accolades : le block de code executer a chaque fois que la function est appelée
console.log('test: ',test);
console.log('unautre: ',unautre);
};
// on appele la function avec des arguments
unefunctiontest(45, 'babar');
// let fonctionpourchaqueboule = (boule) => {
// }
// boules.forEach(fonctionpourchaqueboule);
let monanime = () => {
// console.log('frame');
let i = 0;
boules.forEach((boule) => {
// console.log('boule',boule);
let impair = i%2;
let vitesse_x;
let vitesse_y;
let haut;
if (impair) {
//vitesse_x = vitesse_y = 1 + Math.random()*i;
vitesse_x = vitesse_y = 1;
//boules.style.mixBlendMode = "screen";
} else {
//vitesse_x = vitesse_y = -1 - Math.random()*-i;
vitesse_x = vitesse_y = -1;
//boules.style.mixBlendMode = "lunminosity";
}
boule.style.left = (boule.offsetLeft+vitesse_x)+"px";
boule.style.top = (boule.offsetTop+vitesse_y)+"px";
i++;
});
window.requestAnimationFrame(monanime);
}
console.log('boules[0]', boules[0]);
window.requestAnimationFrame(monanime);

42
base_JS/styles.css Normal file
View File

@ -0,0 +1,42 @@
body{
background-color: rgb(255, 255, 255);
}
h1{
font-weight: 900;
font-size: 240px;
}
div.balle{
width: 20px;
height:20px;
border-radius: 10px;
background-color: black;
}
div.boule{
position: absolute;
width: 10px;
height:10px;
border-radius: 10px;
background-color: red;
background-blend-mode:screen;
}
div.carré{
position: absolute;
height: 1400px;
width: 50px;
border-radius: 5px;
background-color: rgb(149, 155, 212);
}
div.cube{
position: absolute;
height: 1400px;
width: 500px;
border-radius: 0px;
background-color: rgb(0, 0, 0);
opacity: 100%;
background-blend-mode:luminosity;
}

13
oop/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OOP</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="scene"></canvas>
<script src="script.js"></script>
</body>
</html>

113
oop/script.js Normal file
View File

@ -0,0 +1,113 @@
//Prend l'éléménet Canva
let canvas = document.getElementById('scene');
//Dit que la scène est en 2D
let ctx = canvas.getContext("2d");
//modifie la taille
let resizeCanvas = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
//Applique la modification
resizeCanvas()
let onResize = (envent) => {
resizeCanvas()
}
window.addEventListener("resize", onResize);
//class = majuscule / En gros défini les fonctions des boules unique
class Boule {
constructor(x,y,s){
this.pos = {
x: x,
y: y
}
this.size = s
this.vx = -5+Math.random()*10;
this.vy = -5+Math.random()*10;
//j'ai pas compris les ||
// Collision avec les bords du canvas
if (this.pos.x + this.size > canvas.width || this.pos.x - this.size < 0) {
this.vx *= -1; // inverse la direction horizontale
}
if (this.pos.y + this.size > canvas.height || this.pos.y - this.size < 0) {
this.vy *= -1; // inverse la direction verticale
}
}
draw(){
var randomColor = getRandomColor();
ctx.beginPath();
//cercle
ctx.arc(this.pos.x, this.pos.y, this.size, -10+Math.random()*20, 2 * Math.PI);
//randomcolor
ctx.fillStyle = randomColor;
ctx.fill();
ctx.strokeStyle = randomColor;
ctx.stroke();
}
move(){
this.pos.x += this.vx;
this.pos.y += this.vy;
// Collision avec les bords du canvas
if (this.pos.x + this.size > canvas.width || this.pos.x - this.size < 0) {
this.vx *= -1;
}
if (this.pos.y + this.size > canvas.height || this.pos.y - this.size < 0) {
this.vy *= -1;
}
this.draw();
}
}
let boules = [];
let maboule;
for (let index = 0; index < 10000; index++) {
maboule = new Boule(
//dans quelle zone ça spawn
Math.random()*canvas.width,
Math.random()*canvas.height,
//taille
2+Math.random()*10
);
maboule.draw();
boules.push(maboule);
}
let anime = () => {
ctx.clearRect(0,0, canvas.width, canvas.height)
boules.forEach((boule) => {
boule.move();
})
window.requestAnimationFrame(anime);
}
//fonction randomcolor
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 80 )];
}
return color;
}
window.requestAnimationFrame(anime);

14
oop/styles.css Normal file
View File

@ -0,0 +1,14 @@
body{
margin: 0;
background-color: black;
}
canvas#scene{
position: absolute;
z-index: 10;
top:0;
left:0;
/* width: 100%;
height:100%; */
}

14
oop2/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OOP</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- <h1>Salut</h1> -->
<canvas id="scene"></canvas>
<script src="script.js"></script>
</body>
</html>

144
oop2/script.js Normal file
View File

@ -0,0 +1,144 @@
let canvas = document.getElementById('scene');
let ctx = canvas.getContext("2d");
let resizeCanvas = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas()
let onResize = (event) => {
resizeCanvas()
}
window.addEventListener('resize', onResize);
// ctx.fillStyle = "green";
// ctx.fillRect(300, 300, 100, 100);
class Boule {
constructor(x, y, s) {
// this.x = x;
// this.y = y;
this.pos = {
x: x,
y: y
}
this.size = s
this.vx = -2+Math.random()*4;
this.vy = -2+Math.random()*4;
// this.color = 'hsl(360, 50%, 50%)'
this.color = {
h:200,
s:50,
l:50
}
}
draw(){
// console.log('draw', this);
ctx.beginPath();
ctx.fillStyle = `hsl(${this.color.h},${this.color.s}%,${this.color.l}%)`;
ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
// ctx.fillRect(300, 300, 100, 100);
ctx.fill();
ctx.globalAlpha = 0.1;
}
move(){
this.pos.x += this.vx;
this.pos.y += this.vy;
if(this.pos.x >= canvas.width || this.pos.x <= 0){
this.vx *= -1;
}
if(this.pos.y >= canvas.height || this.pos.y <= 0){
this.vy *= -1;
}
this.draw();
}
}
let boules = [];
let maboule;
function createBoule(){
maboule = new Boule(
canvas.width / 2, // Math.random()*canvas.width,
canvas.height / 2, // Math.random()*canvas.height,
2+Math.random()*10
);
maboule.draw();
boules.push(maboule);
}
setInterval(()=>{
createBoule();
}, 1)
let anime = () => {
//ctx.clearRect(0,0, canvas.width, canvas.height)
// boules.forEach((boule_a) => {
for (let i = 0; i < boules.length; i++) {
let boule_a = boules[i];
for (let j = i+1; j < boules.length; j++) {
let boule_b = boules[j];
// distance entre les centre des boules
let dist = Math.sqrt(
Math.pow(boule_b.pos.x - boule_a.pos.x, 2) +
Math.pow(boule_b.pos.y - boule_a.pos.y, 2)
);
// console.log('dist', dist);
if(dist < boule_a.size+boule_b.size){
// console.log('ça touche');
// distance inferieure a la somme des deux rayons
// ça touche
// boule_a.vx *= -1;
// boule_a.vy *= -1;
// boule_b.vx *= -1;
// boule_b.vy *= -1;
nx = (boule_b.pos.x - boule_a.pos.x)/dist;
ny = (boule_b.pos.y - boule_a.pos.y)/dist;
vA_n = boule_a.vx*nx + boule_a.vy*ny
vB_n = boule_b.vx*nx + boule_b.vy*ny
boule_a.vx += (vB_n - vA_n) * nx
boule_a.vy += (vB_n - vA_n) * ny
boule_b.vx += (vA_n - vB_n) * nx
boule_b.vy += (vA_n - vB_n) * ny
boule_a.move();
boule_b.move();
}
}
boule_a.move();
}
window.requestAnimationFrame(anime);
}
window.requestAnimationFrame(anime);
let onMouseMove = (event) => {
let h = 360 * (event.x / canvas.width);
let s = 100 * (event.y / canvas.height);
boules.forEach(boule => {
boule.color.h = h;
boule.color.s = s;
});
}
window.addEventListener('mousemove', onMouseMove)

16
oop2/styles.css Normal file
View File

@ -0,0 +1,16 @@
body{
margin: 0;
}
h1{
font-size: 18em;
}
canvas#scene{
position: absolute;
z-index: 10;
top:0;
left:0;
/* width: 100%;
height:100%; */
}