more colors

oop/script.js

@@ -26,12 +26,18 @@ class Bidule {
     this.y = y;
     this.a = 360;
     this.vitesse = {
-      x:-2+Math.random()*4,
-      y:-2+Math.random()*4
+      x:-20+Math.random()*100,
+      y:-20+Math.random()*100
     }
   }
   // les methodes sont comme des fonctions mais propres à chaque instance
   bouge(){
+    if (this.x <= 0 || this.x >= canvas.width) {
+      this.vitesse.x *= -1;
+    }
+    if (this.y <= 0 || this.y >= canvas.height) {
+      this.vitesse.y *= -1;
+    }
     this.x += this.vitesse.x;
     this.y += this.vitesse.y;
     this.dessine();
@@ -45,12 +51,31 @@ class BiduleRond extends Bidule{
   constructor(r, x, y){
     super(x, y); // appelle le constructeur parent avec le paramètre
     this.r = r; 
+    // h -> teinte, entre 0° et 360° 
+    //https://www.devenir-webmaster.com/V2/TUTO/CHAPITRE/HTML-CSS/07-color/img/cercle-colorimetrique.gif
+    this.h = Math.random()*360; 
+    // s -> saturation entre 0% et 100%
+    this.s = 80 + Math.random()*20;
+    // l -> luminosité entre 0% et 100%
+    this.l = 40 + Math.random()*20;
+
+    this.vs = 0.5;
   }
 
   dessine(){
+    this.h++;
+    if (this.h>360) {
+      this.h = 0;
+    }
+    this.s += this.vs;
+    if (this.s <= 0 || this.s >= 100) {
+      this.vs *= -1;
+    }
     ctx.beginPath();
+    ctx.fillStyle = `hsl(${this.h},${this.s}%,${this.l}%)`;
     ctx.arc(this.x, this.y, this.r, 0, degToRad(this.a));
     ctx.fill();
+    ctx.closePath();
   }
 }
 
@@ -63,24 +88,26 @@ class BiduleCarre extends Bidule{
 
   dessine(){
     ctx.beginPath();
+    ctx.fillStyle = 'black';
     ctx.rect(this.x-this.c/2, this.y-this.c/2, this.c, this.c);
     ctx.fill();
+    ctx.closePath();
   }
 }
 
 
 
 let mesBidules = [];
-for (let i = 0; i < 2000; i++) {
+for (let i = 0; i < 100; i++) {
   if (Math.random()>0.5) {
-    mesBidules.push(new BiduleRond(2 + Math.random()*4, Math.random()*canvas.width, Math.random()*canvas.height));
+    mesBidules.push(new BiduleRond(2 + Math.random()*18, Math.random()*canvas.width, Math.random()*canvas.height));
   } else {
-    mesBidules.push(new BiduleCarre(4 + Math.random()*8, Math.random()*canvas.width, Math.random()*canvas.height));
+    mesBidules.push(new BiduleCarre(2 + Math.random()*4, Math.random()*canvas.width, Math.random()*canvas.height));
   }
 }
 
 let monAnime = function(){
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  // ctx.clearRect(0, 0, canvas.width, canvas.height);
   
   mesBidules.forEach(bidule => {
     bidule.bouge();

oop/styles.css

@@ -2,4 +2,5 @@ body{
   margin: 0;
   width:100vw;
   height:100vh;
+  overflow: hidden;
 }