Circle animation

Circle animation

by vinito

HTML

<div align="center">
		<canvas id="canvasOne" width="950" height="700">
		</canvas>
	</div>

CSS

<style type="text/css">
	#canvasOne
	{
		border: 1px solid black;
	}
</style>

JavaScript

var myCanvas = document.getElementById("canvasOne");
	var myContext = myCanvas.getContext("2d");
	
	init();
	
	var numShapes;
	var shapes;
	var dragIndex;
	var dragging;
	var mouseX;
	var mouseY;
	var dragHoldX;
	var dragHoldY;
	var timer;
	var targetX;
	var targetY;
	var easeAmount;
	var bgColor;
	
	function init()
	{
		numShapes = 5;				
		shapes = [];
		
		makeShapes();
		drawScreen();	
		myCanvas.addEventListener("mousedown", mouseDownListener, false);	
	}
	
	function makeShapes()
	{
		var tempX;
		var tempY;
		var tempRad;		
		var tempGrad;
		var gradFactor = 2;
		
		for(var i = 0; i < numShapes; i++)
		{			
			//random position
			tempRad = 40;
			var centerX = myCanvas.width/2;
			var centerY = myCanvas.height/2;
			
			if(i == 0)
			{
				tempX = centerX
				tempY = centerY;
			}
			else
			{
				//tempX = Math.random() * (myCanvas.width - tempRad);
				//tempY = Math.random() * (myCanvas.height - tempRad);
				//150 can be actual radius in degrees
				tempX = centerX + 250 * Math.cos(2 * Math.PI * i / numShapes);
				tempY = centerY + 250 * Math.sin(2 * Math.PI * i / numShapes);
			}
			
			tempColor = "#4285F4";
			tempShape = {x: tempX, y: tempY, rad: tempRad, color: tempColor};
			
			shapes.push(tempShape);			
		}		
	}
	
	function mouseDownListener(evt)
	{
		var highestIndex = -1;
		
		var bRect = myCanvas.getBoundingClientRect();
		mouseX = (evt.clientX - bRect.left) * (myCanvas.width/bRect.width);
		mouseY = (evt.clientY - bRect.top) * (myCanvas.height/bRect.height);
		
		for(var i = 0; i < numShapes; i++)
		{
			if(hitTest(shapes[i], mouseX, mouseY))
			{
				dragging = true;
				if(i > highestIndex)
				{
					dragHoldX = mouseX - shapes[i].x;
					dragHoldY = mouseY - shapes[i].y;
					highestIndex = i;
					dragIndex = i;
				}				
			}
		}
		
		if(dragging)
		{
			window.addEventListener("mousemove", mouseMoveListener, false);
		}
		
		myCanvas.removeEventListener("mousedown", mouseDownListener, false);
		window.addEventListener("mouseup",...