Document

commit a9b609737320e82027e544a231a351d373ea2f3c Author: Louise Date: Fri Nov 14 18:35:31 2025 +0100 premierCommit diff --git a/bases-js copie/index.html b/bases-js copie/index.html new file mode 100644 index 0000000..a6a4ffd --- /dev/null +++ b/bases-js copie/index.html @@ -0,0 +1,14 @@ + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/bases-js copie/script.js b/bases-js copie/script.js new file mode 100644 index 0000000..11602fc --- /dev/null +++ b/bases-js copie/script.js @@ -0,0 +1,158 @@ +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})`; + + + + +// Les boucles +let boules = []; +for (let index = 0; index < 250; index=index+2) { + 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(65 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()*700+"px"; + boules[index].style.left = Math.random()*1500+"px"; + + //let rayon = 20 + Math.random()*15; + let boc = 20 + Math.random()*20; + boules[index].style.width = boc+"px"; + boules[index].style.height = boc+"px"; + boules[index].style.borderRadius = (boc/2)+"px" + + body.append(boules[index]); +} +console.log('boules', boules); + + + + + + +let monanime = () => { + let i = 0; + boules.forEach((boule) => { + let impair = i%2; + + let vitesse_x; + let vitesse_y; + if (impair) { + vitesse_x = vitesse_y = -1.5; + } else { + vitesse_x = vitesse_y = -1; + } + + boule.style.bottom = (boule.offsetBottom+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/bases-js copie/styles.css b/bases-js copie/styles.css new file mode 100644 index 0000000..eb3f228 --- /dev/null +++ b/bases-js copie/styles.css @@ -0,0 +1,35 @@ +body{ + background-color: aqua; +} + +h1{ + font-weight: 900; + font-size: 240px; +} + +div.balle{ + position: absolute; + width: 20px; + height:20px; + border-radius: 10px; + background-color: black; +} + +div.boule{ + position: absolute; + width: 10px; + height:200px; + border-radius: 10px; + background-color: red; + opacity: 0.9; +} + + +div.carre{ + position: absolute; + width: 10px; + height:200px; + border-radius: 10px; + background-color: red; + opacity: 0.6; +} diff --git a/bases-js/index.html b/bases-js/index.html new file mode 100644 index 0000000..a6a4ffd --- /dev/null +++ b/bases-js/index.html @@ -0,0 +1,14 @@ + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/bases-js/script.js b/bases-js/script.js new file mode 100644 index 0000000..9aa5304 --- /dev/null +++ b/bases-js/script.js @@ -0,0 +1,121 @@ +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 balle = document.createElement('div'); +balle.classList.add('balle'); +body.prepend(balle); + + +// 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()*700+"px"; + boules[index].style.left = Math.random()*700+"px"; + + let rayon = 20 + Math.random()*30; + boules[index].style.width = rayon+"px"; + boules[index].style.height = rayon+"px"; + boules[index].style.borderRadius = (rayon/2)+"px" + + body.append(boules[index]); +} +console.log('boules', boules); + + + diff --git a/bases-js/styles.css b/bases-js/styles.css new file mode 100644 index 0000000..ee963e5 --- /dev/null +++ b/bases-js/styles.css @@ -0,0 +1,23 @@ +body{ + background-color: aqua; +} + +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; +} \ No newline at end of file diff --git a/oop copie/image/transparent2.png b/oop copie/image/transparent2.png new file mode 100644 index 0000000..c19348b Binary files /dev/null and b/oop copie/image/transparent2.png differ diff --git a/oop copie/image/transparent3.png b/oop copie/image/transparent3.png new file mode 100644 index 0000000..d841d27 Binary files /dev/null and b/oop copie/image/transparent3.png differ diff --git a/oop copie/index.html b/oop copie/index.html new file mode 100644 index 0000000..e561bec --- /dev/null +++ b/oop copie/index.html @@ -0,0 +1,15 @@ + + + + + + OOP + + + + +

+ + + \ No newline at end of file diff --git a/oop copie/script.js b/oop copie/script.js new file mode 100644 index 0000000..1504659 --- /dev/null +++ b/oop copie/script.js @@ -0,0 +1,171 @@ +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:360, + 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(); + } + + 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 / 5, // Math.random()*canvas.height, + 2+Math.random()*10 + ); + maboule.draw(); + boules.push(maboule); +} + +function createBoule2(){ + maboule = new Boule( + canvas.width / 6, // Math.random()*canvas.width, + canvas.height /6, // Math.random()*canvas.height, + 2+Math.random()*10 + ); + maboule.draw(); + boules.push(maboule); +} + + + +// for (let index = 0; index < 10000; index++) { + // createBoule(); +// } + +setInterval(()=>{ + createBoule(); + createBoule2(); +}, 1000) + +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) => { + // console.log('event', event); + // h 0 -> 360 + // x 0 -> canvas.width + let h = 360 * (event.x / canvas.width); + //console.log('h', h); + + let s = 100 * (event.y / canvas.height) + //console.log('s', s); + + boules.forEach(boule => { + boule.color.h = h; + boule.color.s = s; + }); +} + +window.addEventListener('mousemove', onMouseMove); \ No newline at end of file diff --git a/oop copie/styles.css b/oop copie/styles.css new file mode 100644 index 0000000..5576f84 --- /dev/null +++ b/oop copie/styles.css @@ -0,0 +1,26 @@ +body{ + margin: 0; + background-color: blue; +} + +h1{ + font-size: 18em; +} + +canvas#scene{ + position: absolute; + z-index: 10; + top:0; + left:0; + /* width: 100%; + height:100%; */ +} + + + +#animation { + background-repeat: no-repeat; + height: 102px; + width: 140px; +} + diff --git a/oop/index.html b/oop/index.html new file mode 100644 index 0000000..233dc22 --- /dev/null +++ b/oop/index.html @@ -0,0 +1,14 @@ + + + + + + OOP + + + + +

+ + + \ No newline at end of file diff --git a/oop/script.js b/oop/script.js new file mode 100644 index 0000000..3f0d8d7 --- /dev/null +++ b/oop/script.js @@ -0,0 +1,79 @@ +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; + } + + draw(){ + // console.log('draw', this); + ctx.beginPath(); + ctx.fillStyle = 'red'; + ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI); + // ctx.fillRect(300, 300, 100, 100); + ctx.fill(); + } + + move(){ + this.pos.x += this.vx; + this.pos.y += this.vy; + this.draw(); + } +} + + + + +let boules = []; +let maboule; +for (let index = 0; index < 10000; index++) { + maboule = new Boule( + Math.random()*canvas.width, + Math.random()*canvas.height, + 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); +} + +window.requestAnimationFrame(anime); \ No newline at end of file diff --git a/oop/styles.css b/oop/styles.css new file mode 100644 index 0000000..e08d1ed --- /dev/null +++ b/oop/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%; */ +} \ No newline at end of file