document.addEventListener('DOMContentLoaded', init);

function init(){
    class Ball {
        constructor(x, y, dx, dy, radius, color){
            this.x = x;
            this.y = y;
            this.dx = dx;
            this.dy = dy;
            this.radius = radius;
            this.color = color;
        }

        update() {
            if (this.y + this.radius + this.dy> canvas.height) {
                this.dy = -this.dy;
                this.dy = this.dy * friction;
                this.dx = this.dx * friction;
            } else {
                this.dy += gravity;
            }

            if (this.x + this.radius >= canvas.width || this.x - this.radius <= 0) {
                this.dx = -this.dx * friction;
            }

            this.x += this.dx;
            this.y += this.dy;
            this.draw();
        };

        draw() {
            c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            c.fill();
            c.stroke();
            c.closePath();
        };
    }

    // Music
    const audio = document.querySelector("audio");
    const audioCtx = new AudioContext();
    const analyser = audioCtx.createAnalyser();
    const source = audioCtx.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(audioCtx.destination);
    analyser.fftSize = 256;
    audio.play();
    let frequencyData = new Uint8Array(analyser.frequencyBinCount);

    const canvas = document.querySelector('canvas');
    canvas.width = innerWidth;
    canvas.height = innerHeight;
    const w = canvas.width;
    const h = canvas.height;
    const c = canvas.getContext('2d');

    let gravity = 0.9;
    let friction = 0.98;

    function randomInt(min,max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    let ballArray = [];

    for (let i = 0; i < 100; i++) {
        const radius = randomInt(8, 20);
        const x = randomInt(radius, canvas.width - radius);
        const y = randomInt(0, canvas.height - radius);
        const dx = randomInt(-3, 3);
        const dy = randomInt(-2, 2);
        ballArray.push(new Ball(x, y, dx, dy, radius, "#FFF"));
    }

    function drawLoop(){
        c.clearRect(0, 0, w, h);

        analyser.getByteFrequencyData(frequencyData);
        for (let i = 0; i < ballArray.length; i++) {
            ballArray[i].update();
        }

        let sum = 0;
        for(let d in frequencyData) {
            let f = frequencyData[d];
            sum += d;
            c.beginPath();
            c.fillStyle = "#FFF";
            c.rect(d*5, 0, 4, f);
            c.fill();
        }

        // SON
        c.beginPath();
        c.font = "12px sans-serif";
        c.fillStyle = '#FFF';
        c.fillText('Frequence:', 10, 30);

        // SUN
        c.save();

        c.translate(sun.x, sun.y);
        c.rotate(sun.angle);

        c.beginPath();
        c.fillStyle = '#fff522';
        c.arc(0, 0, sun.r, 0, 2*Math.PI, true);
        c.fill();
        c.beginPath();
        c.fillStyle = '#ffd42a';
        c.arc(-sun.r/5, 0, sun.r/5, 0, 2*Math.PI, true);
        c.fill();
        c.beginPath();
        c.fillStyle = '#ffd42a';
        c.arc(sun.r/2, sun.r/2, sun.r/6, 0, 2*Math.PI, true);
        c.fill();
        sun.angle += Math.PI/90;

        c.restore();


        c.beginPath();
        c.fillStyle = '#81ff66';
        c.arc(p.x, p.y, 10, 0, 2*Math.PI, true);
        c.fill();

        p.ax = (sun.x - p.x) / 10000;
        p.ay = (sun.y - p.y) / 10000;

        p.sx += p.ax;
        p.sy += p.ay;

        p.x += p.sx;
        p.y += p.sy;

        window.requestAnimationFrame(drawLoop);
    }

    window.requestAnimationFrame(drawLoop);
}