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;
    // this.color = 'hsl(360, 50%, 50%)'
    this.color = {
      h:360,
      s:50,
      l:50
    }
    this.img = new Image();
    this.img.src = "images/clement.png";

  }

  draw(){
    // console.log('draw', this);
    // ctx.beginPath();
    // ctx.fillStyle = `hsl(${this.color.h},${this.color.s}%,${this.color.l}%)`;
    // ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
    // // ctx.fillRect(300, 300, 100, 100);
    // ctx.fill();
    // ctx.closePath();

    // this.img.onload = () => {
    //   // console.log('img, x, y', this.img, this.pos.x, this.pos.y);
      ctx.drawImage(this.img, this.pos.x, this.pos.y, 3*this.size, 5*this.size);
    // }
    
    

  }

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

    if(this.pos.x >= canvas.width || this.pos.x <= 0){
      this.vx *= -1;
    }
    if(this.pos.y >= canvas.height || this.pos.y <= 0){
      this.vy *= -1;
    }

    this.draw();
  }
}




let boules = [];
let maboule;
function createBoule(){
  maboule = new Boule(
    canvas.width / 2, // Math.random()*canvas.width, 
    canvas.height / 2, // Math.random()*canvas.height,
    10+Math.random()*30
  );
  maboule.draw();
  boules.push(maboule);
}

// for (let index = 0; index < 10000; index++) {
  // createBoule();  
// }

setInterval(()=>{
  createBoule();
}, 1000)

let anime = () => {
  ctx.clearRect(0,0, canvas.width, canvas.height)
  // boules.forEach((boule_a) => {
  for (let i = 0; i < boules.length; i++) {
    let boule_a = boules[i];
    for (let j = i+1; j < boules.length; j++) {
      let boule_b = boules[j];
      // distance entre les centre des boules
      let dist = Math.sqrt(
        Math.pow(boule_b.pos.x - boule_a.pos.x, 2) + 
        Math.pow(boule_b.pos.y - boule_a.pos.y, 2)
      );
      // console.log('dist', dist);
      
      if(dist < boule_a.size+boule_b.size){
        // console.log('ça touche');
        
        // distance inferieure a la somme des deux rayons
        // ça touche
        // boule_a.vx *= -1;
        // boule_a.vy *= -1;
        // boule_b.vx *= -1;
        // boule_b.vy *= -1;

        nx = (boule_b.pos.x - boule_a.pos.x)/dist;
        ny = (boule_b.pos.y - boule_a.pos.y)/dist;

        vA_n = boule_a.vx*nx + boule_a.vy*ny
        vB_n = boule_b.vx*nx + boule_b.vy*ny

        boule_a.vx +=  (vB_n - vA_n) * nx
        boule_a.vy += (vB_n - vA_n) * ny
        boule_b.vx += (vA_n - vB_n) * nx
        boule_b.vy += (vA_n - vB_n) * ny
        boule_a.move();
        boule_b.move();
      }
    }
    boule_a.move();
  }


  
  window.requestAnimationFrame(anime);  
}

window.requestAnimationFrame(anime);


let onMouseMove = (event) => {
  // console.log('event', event);
  // h 0 -> 360
  // x 0 -> canvas.width
  let h = 360 * (event.x / canvas.width);
  // console.log('h', h);
  
  let s = 100 * (event.y / canvas.height)
  console.log('s', s);
  
  boules.forEach(boule => {
    boule.color.h = h;
    boule.color.s = s;
  });
}

window.addEventListener('mousemove', onMouseMove);