Circle Art

circleart.html

<canvas id="canvas" width="1000" height="1000"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ballArray = [];
window.onload = function(){
    canvas.addEventListener("mousemove",mouseDownListener,false);
    loop();
};
var loop = function(){
    draw();
    clearTimeout(timer);
    var timer = setTimeout(loop,10);
} 
var draw = function(){
    for (i = 0; i < ballArray.length; i++){
        ctx.beginPath();
        if(ballArray[i].red < 255)ballArray[i].red++;
  	if(ballArray[i].green < 255)ballArray[i].green++;
		if(ballArray[i].blue < 255)ballArray[i].blue++;
		ctx.strokeStyle = "rgb(" + ballArray[i].red + "," + ballArray[i].green + "," + ballArray[i].blue + ")";
		ctx.arc(ballArray[i].x, ballArray[i].y, ballArray[i].r++, 0, Math.PI * 2, false);
		ctx.stroke();
		if(ballArray[i].r >= 100){
			ballArray.splice(i, 1);
		}
	}
}
function addBall() {
    var obj = new Object();
	obj.x = mouseX;
	obj.y = mouseY;
	obj.r = 0;
	obj.red = ~~(Math.random() * 255);
	obj.green = ~~(Math.random() * 255);
	obj.blue = ~~(Math.random() * 255);
	ballArray.push(obj);
}
function mouseDownListener(e){
	var rect = e.target.getBoundingClientRect();
	mouseX = e.clientX - rect.left;
	mouseY = e.clientY - rect.top;
	addBall();
}
</script>