fun with circles

circles.html

<canvas>
</canvas>

<script>
(function()
{
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var started=true;
var DEG2RAD = Math.PI / 180;
var mouse = [window.innerWidth/2,window.innerHeight/2];

function draw_line(s,e)
{
	ctx.beginPath();
	ctx.moveTo(s[0],s[1]);
	ctx.lineTo(e[0],e[1]);
	ctx.stroke();
	ctx.closePath();
}

var nl = 3;
var rot = [];
var list = [];
var rinc=[1,4,1,1];
var lens=[50,100,150,10];
for(var i = 0; i < nl; ++i)
{
list[i]=[];
rot[i]=0;
}

setInterval(function()
{
	ctx.fillStyle="#fff";
	ctx.fillRect(0,0,canvas.width,canvas.height);
	for(var itx in list)
	{
		for(var litx in list[itx])
		{
			if(litx == 0) continue;
			var it = list[itx][litx];
			draw_line(list[itx][litx-1],it);
		}
	}
	if(!started)
		return;
	
	var orgs=[];
	for(var i = 0; i < nl; i++)
	{
		var beg = mouse;
		if(i>0)
			beg=orgs[i-1];
		
		var l =[beg[0] + Math.cos(DEG2RAD * rot[i]) * lens[i], beg[1] + Math.sin(DEG2RAD * rot[i]) * lens[i]];
		draw_line(beg,l);
		list[i].push(l);
		rot[i]+=rinc[i];
		orgs[i]=l;
	}
}, 10);

document.onkeydown=function(ev)
{
switch(ev.key)
{
case "f":
started^=1;
break;
}
};

document.onmousemove=function(ev)
{
//mouse=[ev.clientX,ev.clientY];
};
})();
</script>