//Prend l'éléménet Canva
let canvas = document.getElementById('scene');
//Dit que la scène est en 2D
let ctx = canvas.getContext("2d");

//modifie la taille
let resizeCanvas = () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
//Applique la modification
resizeCanvas()

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

window.addEventListener("resize", onResize);

//class = majuscule / En gros défini les fonctions des boules unique
class Boule {
    constructor(x,y,s){
        this.pos = {
            x: x,
            y: y
        }
        this.size = s
        this.vx = -5+Math.random()*10;
        this.vy = -5+Math.random()*10;

        //j'ai pas compris les ||
        // Collision avec les bords du canvas
        if (this.pos.x + this.size > canvas.width || this.pos.x - this.size < 0) {
             this.vx *= -1; // inverse la direction horizontale
        }

        if (this.pos.y + this.size > canvas.height || this.pos.y - this.size < 0) {
           this.vy *= -1; // inverse la direction verticale
}

        

    }

    draw(){
        
        var randomColor = getRandomColor();

        ctx.beginPath();
        //cercle
        ctx.arc(this.pos.x, this.pos.y, this.size, -10+Math.random()*20, 2 * Math.PI);
        //randomcolor
        ctx.fillStyle = randomColor;
        ctx.fill();
        ctx.strokeStyle = randomColor;
        ctx.stroke();
    }

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

        // Collision avec les bords du canvas
         if (this.pos.x + this.size > canvas.width || this.pos.x - this.size < 0) {
             this.vx *= -1;
          }

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

        
        this.draw();
    }
}

let boules = [];
let maboule;
for (let index = 0; index < 10000; index++) {
    maboule = new Boule(
        //dans quelle zone ça spawn
        Math.random()*canvas.width,
        Math.random()*canvas.height,
        //taille
        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);
}

//fonction randomcolor
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 80 )];
    }
    return color;
}

window.requestAnimationFrame(anime);