OOP

commit ff14931e22bb50f0129ee478b96ad8c35c5e374d Author: FRANKIE Date: Wed Feb 18 16:09:19 2026 +0100 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/images/galette.png b/images/galette.png new file mode 100644 index 0000000..1989730 Binary files /dev/null and b/images/galette.png differ diff --git a/images/hbdbachir.gif b/images/hbdbachir.gif new file mode 100644 index 0000000..b5ead5f Binary files /dev/null and b/images/hbdbachir.gif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..233dc22 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + OOP + + + + +

+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e070c10 --- /dev/null +++ b/script.js @@ -0,0 +1,167 @@ +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()*6; + this.vy = -2+Math.random()*6; + // this.color = 'hsl(360, 50%, 50%)' + this.color = { + h:360, + s:50, + l:50 + } + this.img = new Image(); + this.img.src = "images/galette.png"; + + } + + 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.closePath(); + + // this.img.onload = () => { + // // console.log('img, x, y', this.img, this.pos.x, this.pos.y); + ctx.drawImage(this.img, this.pos.x, this.pos.y, 3*this.size, 5*this.size); + // } + + + + } + + 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, + 10+Math.random()*30 + ); + maboule.draw(); + boules.push(maboule); +} + +// for (let index = 0; index < 10000; index++) { + // createBoule(); +// } + +setInterval(()=>{ + createBoule(); +}, 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/styles.css b/styles.css new file mode 100644 index 0000000..b31c021 --- /dev/null +++ b/styles.css @@ -0,0 +1,19 @@ +body{ + margin: 0; + background-image: url(images/hbdbachir.gif); + background-repeat:no-repeat; + background-position:50% -30%; +} + +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