poo

canvas/script.js

@@ -6,9 +6,35 @@ canvas.width = canvas.clientWidth;
 
 let ctx = canvas.getContext("2d");
 
+
+// function mafunction(){
+// }
+
+// let mafunction = function(){}
+
+// let mafonction = () => {}
+
 // la taille de nos carres
 let cote = 5;
 
+
+
+let changerCote = () => {
+  cote = 10 + Math.random() * 20;
+  console.log("changerCote, cote", cote); 
+}
+
+let onMouseMove = (event) => {
+  console.log(event);
+  if(event.keyCode == 32){
+    changerCote();
+  }
+}
+
+window.addEventListener("keydown", onMouseMove);
+
+
+
 // Je crée ma liste (tableau) de point
 let mespoints = [];
 // j'utilise une boucle pour créer N points

poo/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>P.O.O.</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <canvas id="scene"></canvas>
+
+  <script src="script.js"></script>
+</body>
+</html>

poo/script.js

@@ -0,0 +1,133 @@
+
+let canvas = document.getElementById('scene');
+console.log(canvas);
+canvas.height = canvas.clientHeight;
+canvas.width = canvas.clientWidth;
+
+let ctx = canvas.getContext("2d");
+
+
+// function mafunction(){
+// }
+
+// let mafunction = function(){}
+
+// let mafonction = () => {}
+
+// la taille de nos carres
+let cote = 5;
+
+class Point {
+  constructor() {
+    this.pos = {
+      x: Math.random()*canvas.width,
+      y: Math.random()*canvas.height
+    }
+    this.vitesse = {
+      x: -5 + Math.random()*10,
+      y: -5 + Math.random()*10
+    } 
+  };
+  bouger(){
+    // teste bord canvas x
+    if (this.pos.x < 0 || this.pos.x > canvas.width) {
+      this.vitesse.x *= -1;
+    }
+    // on bouge en x
+    this.pos.x = this.pos.x + this.vitesse.x;
+
+    // teste bord canvas y
+    if (this.pos.y < 0 || this.pos.y > canvas.width) {
+      this.pos.y *= -1;
+    }
+    // on bouge en y
+    this.pos.y = this.pos.y + this.vitesse.y;
+  };
+}
+
+class Carre extends Point{
+  constructor(){
+    super()
+    this.cote = 5 + Math.random()*5;
+  }
+  bouger(){
+    super.bouger();
+    this.dessiner();
+  }
+
+  dessiner(){
+    // console.log("Point, dessiner", this);
+    ctx.fillRect(
+      this.pos.x-cote/2, 
+      this.pos.y-cote/2, 
+      cote, 
+      cote
+    )
+  };
+}
+
+
+class Triangle extends Point{
+  constructor(){
+    super()
+    this.arrete = 5 + Math.random()*5;
+  }
+  bouger(){
+    super.bouger();
+    this.dessiner();
+  }
+  dessiner(){
+    // console.log("Point, dessiner", this);
+    
+  };
+}
+
+class Rond extends Point{
+  constructor(){
+    super()
+    this.rayon = 5 + Math.random()*5;
+  }
+  bouger(){
+    super.bouger();
+    this.dessiner();
+  }
+  dessiner(){
+    // console.log("Point, dessiner", this);
+    
+  };
+}
+
+
+// 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++) {
+  let r =Math.random(); 
+  if (r > 0.7) {
+    mespoints.push(new Carre)
+  }else if(r > 0.3){
+    mespoints.push(new Triangle)
+  }else{
+    mespoints.push(new Rond)
+  }
+  
+}
+console.log('mespoints', mespoints);
+
+
+// on anime (dessine et bouge)
+function monAnimationKawaii(){
+  ctx.clearRect(0,0, canvas.width, canvas.height)
+  
+  for (let i = 0; i < mespoints.length; i++) {  
+    mespoints[i].bouger();
+  }
+
+  window.requestAnimationFrame(monAnimationKawaii);
+}
+
+
+window.requestAnimationFrame(monAnimationKawaii);
+
+
+

poo/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;
+}