window.onload = function()
{
    // Canvas setup
    let canvas = document.querySelector('#canvas');
    let context = canvas.getContext('2d');
    let height = window.innerHeight;
    let width = window.innerWidth;
    canvas.width = width;
    canvas.height = height;

    // Reset the drawing canvas
    let clearCanvas = () => {
        context.clearRect(0, 0, canvas.width, canvas.height);
    };

    // Get a random number between a given interval.s
    let randomRange = (min, max) => {
        return Math.random() * (max - min) + min;
    };

    // Return the euclidean distance between two positions.
    let distance = function(a, b) {
        let dx = a.x - b.x;
        let dy = a.y - b.y;
        return Math.sqrt(dx * dx + dy * dy);
    };

    // Detect when the window is resize, update the corresponding sizes.
    window.onresize = (e) => {
        canvas.width = window.innerWidth;
        canvas.height =  window.innerHeight;
        clearCanvas();
    };

    // Circle class to spawn multiple instances.
    class Circle {
        // Setup the ball properties.
        constructor(x = 0, y = 0, radius = 10, fillColor = 'red') {
            this.x = x;
            this.y = y;
            this.vx = randomRange(-3 ,3);
            this.vy = randomRange(-3 ,3);
            this.bounce_factor = 0.9995;
            this.radius = randomRange(5, 20);
            this.fillColor = 'rgb('+randomRange(0, 255)+', '+randomRange(0, 255)+', '+randomRange(0, 255)+')';
        }

        // Draw the ball with its properties.
        draw(ctx) {
            ctx.fillStyle = this.fillColor;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
            ctx.fill();
        }
    }

    // Generate some balls and store them into an array.
    let circles = [];
    for (let i = 0; i < 100; ++i) {
        let circle = new Circle(randomRange(0, width), randomRange(0, height));
        circles.push(circle);
    }

    setInterval(() => {

        // First clear the canvas.
        clearCanvas();

        // For each ball, compute their new positions
        circles.forEach(circle =>
        {
            // Circles collisions
            circles.forEach(other => {
                // Get the distance between the two balls
                let dist = distance(circle, other);

                // If the distance is less than the two ball radius
                // then inverse their velocity according to their
                // bounce factor.
                if (dist < (circle.radius + other.radius))
                {
                    // Calculate the new velocity of the first ball.
                    circle.vx = -circle.vx * circle.bounce_factor;
                    circle.vy = -circle.vy * circle.bounce_factor;

                    // Calculate the new velocity of the other ball.
                    other.vx = -other.vx * other.bounce_factor;
                    other.vy = -other.vy * other.bounce_factor;
                }
            });

            // Right border screen collision
            if (circle.x + circle.radius >= canvas.width)
                circle.vx = -circle.vx * circle.bounce_factor;
            // Left border screen collision
            if (circle.x - circle.radius <= 0)
                circle.vx = -circle.vx * circle.bounce_factor;

            // Bottom screen border collision
            if (circle.y + circle.radius >= canvas.height)
                circle.vy = -circle.vy * circle.bounce_factor;
            // Top border screen collision
            if (circle.y - circle.radius <= 0)
                circle.vy = -circle.vy * circle.bounce_factor;

            // Apply gravity
            circle.vy += 2;

            // Add velocity (speed) to the ball position
            circle.x += circle.vx;
            circle.y += circle.vy;

            // Fix jiggling balls when position is more than the canvas height.
            if (circle.y + circle.radius > canvas.height)
                circle.y = canvas.height - circle.radius;

            // Draw the actual ball with the computed positions.
            circle.draw(context);
        });

    }, 1000 / 60);
};