Document

commit 6e346ac2c3dd5965a0d45b325ab63bdfaaabdf5a Author: Valentin Date: Fri Nov 14 18:35:30 2025 +0100 first commit :D diff --git a/base_JS/index.html b/base_JS/index.html new file mode 100644 index 0000000..a6a4ffd --- /dev/null +++ b/base_JS/index.html @@ -0,0 +1,14 @@ + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/base_JS/script.js b/base_JS/script.js new file mode 100644 index 0000000..a1206ea --- /dev/null +++ b/base_JS/script.js @@ -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); diff --git a/base_JS/styles.css b/base_JS/styles.css new file mode 100644 index 0000000..b704c99 --- /dev/null +++ b/base_JS/styles.css @@ -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; +} diff --git a/oop/index.html b/oop/index.html new file mode 100644 index 0000000..2fdb426 --- /dev/null +++ b/oop/index.html @@ -0,0 +1,13 @@ + + + + + + OOP + + + +

+ + + \ No newline at end of file diff --git a/oop/script.js b/oop/script.js new file mode 100644 index 0000000..bfe7da4 --- /dev/null +++ b/oop/script.js @@ -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); + + diff --git a/oop/styles.css b/oop/styles.css new file mode 100644 index 0000000..0b50104 --- /dev/null +++ b/oop/styles.css @@ -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%; */ + } \ No newline at end of file diff --git a/oop2/index.html b/oop2/index.html new file mode 100644 index 0000000..233dc22 --- /dev/null +++ b/oop2/index.html @@ -0,0 +1,14 @@ + + + + + + OOP + + + + +

+ + + \ No newline at end of file diff --git a/oop2/script.js b/oop2/script.js new file mode 100644 index 0000000..c2b20ad --- /dev/null +++ b/oop2/script.js @@ -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) diff --git a/oop2/styles.css b/oop2/styles.css new file mode 100644 index 0000000..f315f84 --- /dev/null +++ b/oop2/styles.css @@ -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%; */ + }