first canvas

canvas/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Canvas</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <canvas id="scene"></canvas>
+
+  <script src="script.js"></script>
+</body>
+</html>

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);
+
+
+

canvas/style.css

@@ -0,0 +1,13 @@
+body{
+  /* background-color: red; */
+  width : 100vw;
+  height : 100vh;
+  margin: 0;
+  background-color: black;
+}
+
+canvas#scene{
+  width:100%;
+  height:100%; 
+  background-color: white;
+}