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