html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  overflow: hidden;
  display: block;
  background: #111111;
}

class Particle {
    constructor(x, y, r, vx, vy, color) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.vx = vx;
        this.vy = vy;
        this.color = color;
    }
  
    // Calculate and retun the mass of a particule based on its radius (size)
    get mass() {
        var density = 1;
        return density*Math.PI*this.r*this.r;
    }
  
    // A function to return the velocity vector of the particule
    get velocity() {
        return [this.vx, this.vy];
    }
    
    // A function to return the distance between two particules
    distance(otherParticule) {
        var dx = this.x - otherParticule.x;
        var dy = this.y - otherParticule.y;
        return Math.sqrt(dx * dx + dy * dy);
    }
    update(canvas, particles, start) {
        for (var i = start + 1; i < particles.length; i++) {
            var otherParticule = particles[i];
            //Check if the two particules are colliding
            if (this.distance(otherParticule) < this.r + otherParticule.r) {
                var res = [this.vx - otherParticule.vx, this.vy - otherParticule.vy];
                if (res[0] *(otherParticule.x - this.x) + res[1] * (otherParticule.y - this.y) >= 0 ) {
                    //Implement elastic collision
                    var m1 = this.mass
                    var m2 = otherParticule.mass
                    //Calculate the angle of rotation
                    var theta = -Math.atan2(otherParticule.y - this.y, otherParticule.x - this.x);
                    var u1 = rotate(this.velocity, theta);
                    var u2 = rotate(otherParticule.velocity, theta);
                    //Apply 1-Dimensional Elastic Collision Formulas
                    var v1 = rotate([u1[0] * (m1 - m2)/(m1 + m2) + u2[0] * 2 * m2/(m1 + m2), u1[1]], -theta);
                    var v2 = rotate([u2[0] * (m2 - m1)/(m1 + m2) + u1[0] * 2 * m1/(m1 + m2), u2[1]], -theta);
                    
                    this.vx = v1[0];
                    this.vy = v1[1];
                    otherParticule.vx = v2[0];
                    otherParticule.vy = v2[1];
                }
            }
        }
      
        // Implement bouncing against the edge of the screen
        if (this.x - this.r <= 0) {
            this.x = this.r;
        } 
        if (this.x + this.r >= canvas.width) {
            this.x = canvas.width - this.r;
        }
        if ((this.x - this.r <= 0 && this.vx < 0) || (this.x + this.r >= canvas.width && this.vx > 0)) {
            this.vx = -this.vx;
        }
        if (this.y - this.r <= 0) {
            this.y = this.r;
        }
        if (this.y + this.r >= canvas.height) {
            this.y = canvas.height - this.r;
        }
        if ((this.y - this.r <= 0 && this.vy < 0) || (this.y + this.r >= canvas.height && this.vy > 0)) {
            this.vy = -this.vy;
        }
      
        // Slide particule based on its velocity vector
        this.x += this.vx
        this.y += this.vy
    }
    
    draw(ctx) {
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
        ctx.fillStyle = this.color;
        ctx.fill()

    }
}

function rotate(velocity, theta) {
    return [velocity[0] * Math.cos(theta) - velocity[1] * Math.sin(theta), velocity[0] * Math.sin(theta) + velocity[1] * Math.cos(theta)];
}

// Main Program Loop (Frame based animation)
function mainLoop(particles, canvas, ctx) {
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
    for (i = 0 ; i < particles.length; i++) {
        particles[i].update(canvas, particles.slice(0), i);
        particles[i].draw(ctx);
    }
    window.requestAnimationFrame(function() {
        mainLoop(particles, canvas, ctx);
    });
}

// Initialise the canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width  = window.innerWidth;
ctx.canvas.height = window.innerHeight;

// Create 10 particules
var num = 20;
var particles = [];
for (var i = 1; i <= num; i++) {
    var min = Math.min(canvas.height, canvas.width);
    var vx = Math.floor((0.5 - Math.random()) * min/100);
    var vy = Math.floor((0.5 - Math.random()) * min/100);
    var ok = false;
    while (!ok) {
        var minr = min/100
        var maxr = min/20
        var r = Math.floor(Math.random() * (maxr - minr)) + minr;
        var x = Math.floor(Math.random() * (canvas.width-2*r)) + r;
        var y = Math.floor(Math.random() * (canvas.height-2*r)) + r;
        
        var color = 'rgb(' + String(Math.floor(Math.random() * 256)) + ", " + String(Math.floor(Math.random() * 256)) + ", " + String(Math.floor(Math.random() * 256)) + ")"
        var particle = new Particle(x, y, r, vx, vy, color);
        
        // Make sure the new particule is not overlapping wih other particules
        ok = true;
        for (var j = 0; j < particles.length; j++) {
            if (particles[j].distance(particle) < particle.r + particles[j].r) ok = false;
        }
    }
    particles.push(particle);
}
mainLoop(particles, canvas, ctx);