//Krzywe cykliczne
//(c) 2011 by Tomasz Lubinski
//www.algorytm.org

/* canvas data */
var canvas;
var ctx;
var width;
var height;
var imageData;

/* draw data */
var r1 = 40;
var r2 = 100;
var m = 60;
var sign = -1;
var i;
var x;
var y;

/* animation data */
var isRunning;
var delayValue = 50;

/* animate */
function animate()
{
	// calculate coordinates of the second circle
	var circle_x = Math.floor((r2-r1*sign)*Math.cos(i));
	var circle_y = Math.floor((r2-r1*sign)*Math.sin(i));
	
	// clear previous frame
	canvas.width = canvas.width;
    	
	// put image drawed so far
	ctx.strokeStyle = "black";
	ctx.putImageData(imageData, 0, 0);
	ctx.moveTo(x + width/2, y + height/2);
	
	// calculate new coordinates
	i += 0.05;
	x = Math.floor((r2-r1*sign)*Math.cos(i) + sign*m*Math.cos((r2-r1*sign)*(i/r1)));
	y = Math.floor((r2-r1*sign)*Math.sin(i) - m*Math.sin((r2-r1*sign)*(i/r1)));
	
	// put new point
	ctx.lineTo(x + width/2, y + height/2);
	ctx.stroke();
	imageData = ctx.getImageData(0, 0, width, height);
	
	// draw circles
	ctx.strokeStyle = "red";
	ctx.beginPath();
	ctx.arc(width/2, height/2, r2, 0, Math.PI*2, false);
	ctx.closePath();
	ctx.stroke();
	ctx.strokeStyle = "blue";
	ctx.beginPath();
	ctx.arc(circle_x + width/2, circle_y + height/2, r1, 0, Math.PI*2, false);
	ctx.closePath();
	ctx.stroke();
	ctx.moveTo(circle_x + width/2, circle_y + height/2);
	ctx.lineTo(x + width/2, y + height/2);
	ctx.stroke();
	
	// animate next frame, if thread is still running
	if (isRunning)
	{
		setTimeout("animate()", delayValue);
	}
}

/* stop animation */
function stop()
{
	isRunning = false;
}

/* start animation */
function start() 
{
	// get canvas and clear it
	canvas = document.getElementById("canvas");
	ctx = canvas.getContext("2d");
	width = canvas.width;
	height = canvas.height;
	canvas.width = canvas.width;
	imageData = ctx.getImageData(0, 0, width, height);

	// initialize start point	
	i = 0;
	x = Math.floor((r2-(r1*sign)) + sign*m);
	y = 0;
	isRunning = true;
	
	// draw first frame and start animate
	animate();
}