From 13e6f240a3502cbcdf7b579478766cab373f517c Mon Sep 17 00:00:00 2001 From: Karine Date: Fri, 14 Nov 2025 17:35:38 +0100 Subject: [PATCH] first commit :D --- club-info/base-js/base.html | 14 ++++ club-info/base-js/script.js | 78 ++++++++++++++++++ club-info/base-js/styles.css | 19 +++++ club-info/canva/index.html | 16 ++++ club-info/canva/script.js | 151 +++++++++++++++++++++++++++++++++++ club-info/canva/styles.css | 16 ++++ 6 files changed, 294 insertions(+) create mode 100644 club-info/base-js/base.html create mode 100644 club-info/base-js/script.js create mode 100644 club-info/base-js/styles.css create mode 100644 club-info/canva/index.html create mode 100644 club-info/canva/script.js create mode 100644 club-info/canva/styles.css diff --git a/club-info/base-js/base.html b/club-info/base-js/base.html new file mode 100644 index 0000000..28b5886 --- /dev/null +++ b/club-info/base-js/base.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + diff --git a/club-info/base-js/script.js b/club-info/base-js/script.js new file mode 100644 index 0000000..ecb3604 --- /dev/null +++ b/club-info/base-js/script.js @@ -0,0 +1,78 @@ +console.log('hello'); + +let x = 5 +let a = 10 +let b = 2 +let y; + +y = a*x + b; +console.log(y); + +console.log(outerHeight); + +let leprenomdelours = 'hubert'; +console.log(leprenomdelours); +let leprenomduloup = 'maurice'; +console.log (leprenomduloup); + +let letitredemacomptine = leprenomdelours + "&" + leprenomduloup; +console.log(letitredemacomptine); + + +console.log('document',document); + +let balle = document.createElement('div'); +balle.classList.add('balle'); +body.prepend(balle); + +let boules = []; +for (let index = 0; index < 200; index=index+1) { + boules[index] = document.createElement('div'); + boules[index].classList.add('boule'); + + boules[index].style.backgroundColor = 'hsl(150 30 60)'; + 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"} 80 80)'; + + +boules[index].style.top = Math.random()*850+"px"; +boules[index].style.left = Math.random()*1650+"px"; + +let rayon = 40 + Math.random()*60; +boules[index].style.witdh = rayon+'px'; +boules[index].style.height = rayon+'px'; +boules[index].style.borderRadius = (rayon/12)+'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 = 3; + } else { + vitesse_x = vitesse_y = -3; + } + + 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/club-info/base-js/styles.css b/club-info/base-js/styles.css new file mode 100644 index 0000000..674cf5b --- /dev/null +++ b/club-info/base-js/styles.css @@ -0,0 +1,19 @@ +body {background-color: rebeccapurple +} + +div.balle{ +width: 20px; +height: 20px; +border-radius: 70px; +background-color: rgba(194, 65, 65, 0.863); +} +div.boule{ + position:absolute; + width: 70px; + height: 500px; + border-radius: 10px; + background-color: rosybrown; + opacity: 0.7; + + +} \ No newline at end of file diff --git a/club-info/canva/index.html b/club-info/canva/index.html new file mode 100644 index 0000000..1ebaa48 --- /dev/null +++ b/club-info/canva/index.html @@ -0,0 +1,16 @@ + + + + + + + OOP + + +

hii

+ + + + + \ No newline at end of file diff --git a/club-info/canva/script.js b/club-info/canva/script.js new file mode 100644 index 0000000..0b2b238 --- /dev/null +++ b/club-info/canva/script.js @@ -0,0 +1,151 @@ +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); + + +class Boule { + constructor (x,y,s) { + this.pos = { + x:x, + y:y, + } + this.size = s + this.vx = -2+Math.random()*4; + this.vy = -2+Math.random()*4; + this.color = { + h:360, + s:50, + l:50 + } + } + + draw(){ + 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.fill(); + /*ctx.fillStyle = "red"; + ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI); + 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, + canvas.height / 2, + 2+Math.random()*10 + ); + maboule.draw(); + boules.push(maboule); +} + +setInterval(()=>{ + createBoule(); +},100) + +let anime = () =>{ + ctx.clearRect(0,0, canvas.width, canvas.height) + 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) + ); + + if(dist < boule_a.size+boule_b.size){ + + 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); + + +/*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);*/ + diff --git a/club-info/canva/styles.css b/club-info/canva/styles.css new file mode 100644 index 0000000..1ef5ee5 --- /dev/null +++ b/club-info/canva/styles.css @@ -0,0 +1,16 @@ +body{ + margin: 0; +} + +h1{ + font-size: 10em; +} + +canvas#scene{ + position: absolute; + z-index: 10; + top: 0; + left: 0; + /*width: 100%; + height: 100%;*/ +} \ No newline at end of file