let canvas = document.getElementById('scene');
let ctx = canvas.getContext("2d");


let resizeCanvas = () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;  
}
resizeCanvas()


let onResize = (event) => {
  resizeCanvas()
}

window.addEventListener('resize', onResize);

// ctx.fillStyle = "green";
// ctx.fillRect(300, 300, 100, 100);




class Boule {
  constructor(x, y, s) {
    // this.x = x;
    // this.y = y;
    this.pos = {
      x: x,
      y: y
    }
    this.size = s
    this.vx = -2+Math.random()*4;
    this.vy = -2+Math.random()*4;
  }

  draw(){
    // console.log('draw', this);
    ctx.beginPath();
    ctx.fillStyle = 'red';
    ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
    // ctx.fillRect(300, 300, 100, 100);
    ctx.fill();
  }

  move(){
    this.pos.x += this.vx;
    this.pos.y += this.vy;
    this.draw();
  }
}




let boules = [];
let maboule;
for (let index = 0; index < 10000; index++) {
  maboule = new Boule(
    Math.random()*canvas.width, 
    Math.random()*canvas.height,
    2+Math.random()*10
  );
  maboule.draw();
  boules.push(maboule);
  
}


let anime = () => {
  ctx.clearRect(0,0, canvas.width, canvas.height)
  boules.forEach((boule) => {
    boule.move();

  })
  window.requestAnimationFrame(anime);  
}

window.requestAnimationFrame(anime);