let canvas = document.querySelector('#scene');

canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

let ctx = canvas.getContext('2d');
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle

// les fonctions
function degToRad(deg) {
  return deg * (Math.PI / 180.0);
}

// les animations
// une loop ne peut pas fonctionner car l'image ne se rafraîchit pas entre les iteration de boucle
// for (let index = 0; index < array.length; index++) {  
// }
// Une classe est un object que l'on va cloner, on va créer des instances de bidule
// https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript
class Bidule {
  // le constructeur est appelé une fois au moment de new Bidule
  constructor(x, y) {
    // on definie les valeur de départ propre a chauqe instance
    // 'this' correpsond à l'instance, autant de 'this' que d'instance
    this.x = x;
    this.y = y;
    this.a = 360;
    this.vitesse = {
      x:-2+Math.random()*4,
      y:-2+Math.random()*4
    }
  }
  // les methodes sont comme des fonctions mais propres à chaque instance
  bouge(){
    this.x += this.vitesse.x;
    this.y += this.vitesse.y;
    this.dessine();
  }
  dessine(){
  }
}

// https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes#cr%C3%A9er_une_sous-classe_avec_extends
class BiduleRond extends Bidule{
  constructor(r, x, y){
    super(x, y); // appelle le constructeur parent avec le paramètre
    this.r = r; 
  }

  dessine(){
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, degToRad(this.a));
    ctx.fill();
  }
}

class BiduleCarre extends Bidule{

  constructor(c, x, y){
    super(x, y); // appelle le constructeur parent avec le paramètre
    this.c = c;
  }

  dessine(){
    ctx.beginPath();
    ctx.rect(this.x-this.c/2, this.y-this.c/2, this.c, this.c);
    ctx.fill();
  }
}



let mesBidules = [];
for (let i = 0; i < 2000; i++) {
  if (Math.random()>0.5) {
    mesBidules.push(new BiduleRond(2 + Math.random()*4, 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));
  }
}

let monAnime = function(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  mesBidules.forEach(bidule => {
    bidule.bouge();
  });

  window.requestAnimationFrame(monAnime);
}


monAnime();