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