Condensation

HTML

<input type="button" value="Start" id="start" /> <input type="button" value="Stop" id="stop" /><br />
<canvas id="condensation" width="800" height="600"></canvas>

JavaScript

document.addEventListener('DOMContentLoaded', function(){
    document.removeEventListener('DOMContentLoaded', arguments.callee, false);
    init();
}, false);

function init() {
    
    canvas = $('#condensation')[0];
    ctx = canvas.getContext('2d');
    
    width  = canvas.width;
    height = canvas.height;
    
    $('#start')[0].onclick = function() {
        start();
    }
    
    $('#stop')[0].onclick = function() {
        stopped = true;
    }
}

function $(s) {
    return document.querySelectorAll(s);
}

var fps = 1000;

var stopped = false;

var canvas;
var ctx;
var width;
var height;

var dropletX = [];
var dropletY = [];
var dropletR = [];
var dropletN = 0;

var maxRadius = 10;
var gravity = 4;

function start() {
    
    stopped = false;
    setTimeout(draw, 1000/fps);
    
}

function checkCollisions() {
    
    var len = dropletX.length;
    for (var i = 0; i < len; i++) {
        var x1 = dropletX[i];
        var y1 = dropletY[i];
        var r1 = dropletR[i];
        for (var j = 0; j < len; j++) {
            if (i == j) {
                continue;
            }
            var x2 = dropletX[j];
            var y2 = dropletY[j];
            var r2 = dropletR[j];
            if (Math.sqrt(Math.pow(x1-x2,2) + Math.pow(y1-y2,2)) <= r1 + r2) {
                // Calculate new circle
                var newR = Math.sqrt(Math.pow(r1, 2) + Math.pow(r2, 2));
                var newX = x1 + ((x2 - x1) * (r1 / newR));
                var newY = y1 + ((y2 - y1) * (r1 / newR));
                // Remove old circles
                if (i > j) {
                    dropletX.splice(i, 1);
                    dropletY.splice(i, 1);
                    dropletR.splice(i, 1);
                    dropletX.splice(j, 1);
                    dropletY.splice(j, 1);
                    dropletR.splice(j, 1);
                } else {
                    dropletX.splice(j, 1);
                    dropletY.splice(j, 1);
                    dropletR.splice(j, 1);
  ...