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


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

    draw(){
        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.fill();
        /*ctx.fillStyle = "red";
        ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
        ctx.fill();*/
    }

    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,
        canvas.height / 2,
        2+Math.random()*10
    );
    maboule.draw();
    boules.push(maboule);
}

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

let anime = () =>{
    ctx.clearRect(0,0, canvas.width, canvas.height)
    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)
      );

      if(dist < boule_a.size+boule_b.size){

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


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