deuxieme commit

2026-02-18 15:58:29 +01:00 · 2026-02-18 15:58:29 +01:00 · 12f4f940f5
commit 12f4f940f5
parent 3a88e2ef24
6 changed files with 237 additions and 0 deletions
--- a/Bachir.html
+++ b/Bachir.html
@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>Joyeux anniversaire</title> 
+   <style>
+        body {
+        background-color: #4852c3;
+        background-image: url("yagi-toshinori.gif");
+        font-family: 'comic sans,';
+        color:#ff00ee;
+        }
+        
+        .parent {
+          display: flex;
+          position: relative;
+        }
+
+        h1 {
+
+            text-decoration-line: underline;
+            text-decoration-color: rgb(102, 0, 255);  
+            text-decoration-style: wavy; 
+            text-shadow: 0 0 3px #00ff37, 0 0 5px #eeff00;
+        }
+
+        .scene {
+          position: absolute;
+        }
+
+        .img {
+          position: absolute;
+            top: 0;
+            left: 0;
+        }
+
+    </style>
+
+    
+  </head>
+  <body>
+    <main>
+      <div id="parent">
+        <div><h1>Joyeux Anniversaire!!!!!!!!!!</h1></div> 
+        <h1>Joyeux Anniversaire!!!!!!!!!!</h1>
+        <img src="plusultra.png" width="1408" height="250">
+        <h1>Joyeux Anniversaire!!!!!!!!!!</h1>
+        <canvas id="scene" width="1300" height ="100"></canvas>
+
+      </div>
+        <h1>Joyeux Anniversaire!!!!!!!!!!</h1>
+        <h1>Joyeux Anniversaire!!!!!!!!!!</h1>
+        <h1>Joyeux Anniversaire!!!!!!!!!!</h1>
+        <h1>Joyeux Anniversaire!!!!!!!!!!</h1>
+        <h1>Joyeux Anniversaire!!!!!!!!!!</h1>
+        <h1>Joyeux Anniversaire!!!!!!!!!!</h1>
+        <h1>Joyeux Anniversaire!!!!!!!!!!</h1>
+        <h1>Joyeux Anniversaire!!!!!!!!!!</h1>
+        <h1>Joyeux Anniversaire!!!!!!!!!!</h1>
+        <h1>Joyeux Anniversaire!!!!!!!!!!</h1>
+        <h1>Joyeux Anniversaire!!!!!!!!!!</h1> 
+        <img src="sparkle-sparkles.gif" width="1350" height="250">
+    </main>
+    <script src="script.js"></script>
+  </body>
+
+</html>
--- a/allmight.jpg
+++ b/allmight.jpg
--- a/plusultra.png
+++ b/plusultra.png
--- a/script.js
+++ b/script.js
@ -0,0 +1,169 @@
+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
+    }
+    this.img = new Image();
+    this.img.src = "allmight.jpg";
+
+  }
+
+
+
+  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, 4*this.size, 8*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();
+}, 2500)
+
+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);
--- a/sparkle-sparkles.gif
+++ b/sparkle-sparkles.gif
--- a/yagi-toshinori.gif
+++ b/yagi-toshinori.gif