first canvas

canvas/script.js

@@ -0,0 +1,75 @@
+
+let canvas = document.getElementById('scene');
+console.log(canvas);
+canvas.height = canvas.clientHeight;
+canvas.width = canvas.clientWidth;
+
+let ctx = canvas.getContext("2d");
+
+// la taille de nos carres
+let cote = 5;
+
+// Je crée ma liste (tableau) de point
+let mespoints = [];
+// j'utilise une boucle pour créer N points
+for (let j = 0; j < 100; j++) {
+  // dans chaque boucle je crée un point,
+  //  un objet {} avec 4 propriétés
+  // x position en x de depart
+  // y position en y de depart
+  // vx vitesse de deplacement en x
+  // vy vitesse de deplacement en y
+  let p = {
+      x: Math.random()*canvas.width,
+      y: Math.random()*canvas.height,
+      vx: -5 + Math.random()*10,
+      vy: -5 + Math.random()*10 
+    };
+  // je rejoute le point dans ma liste (tableau)
+  mespoints.push(p)
+}
+
+// la fonction qui dessine
+function dessiner(){
+  for (let i = 0; i < mespoints.length; i++) {  
+    
+    let monpoint = mespoints[i]; 
+
+    // teste bord canvas x
+    if (monpoint.x < 0 || monpoint.x > canvas.width) {
+      monpoint.vx *= -1;
+    }
+    // on bouge en x
+    monpoint.x = monpoint.x + monpoint.vx;
+    
+    // teste bord canvas y
+    if (monpoint.y < 0 || monpoint.y > canvas.width) {
+      monpoint.vy *= -1;
+    }
+    // on bouge en y
+    monpoint.y = monpoint.y + monpoint.vy;
+
+
+    // on dessine dan le canvas
+    ctx.fillRect(
+      monpoint.x-cote/2, 
+      monpoint.y-cote/2, 
+      cote, 
+      cote
+    )
+  }
+}
+
+// on anime (dessine et bouge)
+function monAnimationKawaii(){
+  ctx.clearRect(0,0, canvas.width, canvas.height)
+  dessiner();
+
+  window.requestAnimationFrame(monAnimationKawaii);
+}
+
+
+window.requestAnimationFrame(monAnimationKawaii);
+
+
+