tatocaster/circles.html

## circles.html
<!DOCTYPE html>
<html>
<head>
	<title>Canvas</title>
</head>
<body>
	<canvas id="canvas" width="800" height="600"></canvas>


	<script type="text/javascript">

		/**
		 * @author  tatocaster <tatocaster.me>
		 */

		'use strict';
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		var centerX1 = 200;
      	var centerY1 = 200;
      	var centerX2 = 500;
      	var centerY2 = 200;
   		var radius = 100;


   		draw2Circles(centerX1,centerY1,centerX2,centerY2);
   		var iterator = 0;
    		var interval = setInterval(function(){
   				iterator++;
   				animateCircles(centerX1+iterator,centerX2-iterator);
   		}, 60);


   		function draw2Circles(centerX1,centerY1,centerX2,centerY2){
   			var mCenterX1 = centerX1;
   			var mCenterX2 = centerX2;
   			var mCenterY1 = centerY1;
   			var mCenterY2 = centerY2;

			context.clearRect(0, 0, canvas.width, canvas.height);
	   		// ugly code for drawing 2 circles
	   		for(var i = 0; i <= radius; i++){
	   			var newRadius = radius - i*2;
	   			if(newRadius < 0){
	   				break;
	   			}
	   			context.strokeStyle = getRandomColor();
	   			context.lineWidth = 1;
	   			context.beginPath();
	   			context.arc(mCenterX1, mCenterY1, newRadius, 0, 2 * Math.PI, false);
	   			context.closePath();
	   			context.stroke();
	   			context.beginPath();
	   			context.arc(mCenterX2, mCenterY2, newRadius, 0, 2 * Math.PI, false);
	   			context.closePath();
	   			context.stroke();
	   		}
   		}

   		function animateCircles(localCenterX1,localCenterX2){
   			var mCenterX1 = localCenterX1;
   			var mCenterX2 = localCenterX2;
   			if(mCenterX1 == mCenterX2){
   				clearInterval(interval);
   			}
			draw2Circles(mCenterX1,centerY1,mCenterX2,centerY2);
   		}

   		function getRandomColor(){
			// we can restrict letters and set warm colors and etc.
		    var letters = '0123456789ABCDEF'.split('');
		    var color = '#';
		    for (var i = 0; i < 6; i++ ) {
		        color += letters[Math.floor(Math.random() * 16)];
		    }
		    return color;
   		}

	</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Canvas</title>
	</head>
	<body>
	<canvas id="canvas" width="800" height="600"></canvas>


	<script type="text/javascript">

	/**
	* @author tatocaster <tatocaster.me>
	*/

	'use strict';
	var canvas = document.getElementById("canvas");
	var context = canvas.getContext("2d");
	var centerX1 = 200;
	var centerY1 = 200;
	var centerX2 = 500;
	var centerY2 = 200;
	var radius = 100;


	draw2Circles(centerX1,centerY1,centerX2,centerY2);
	var iterator = 0;
	var interval = setInterval(function(){
	iterator++;
	animateCircles(centerX1+iterator,centerX2-iterator);
	}, 60);


	function draw2Circles(centerX1,centerY1,centerX2,centerY2){
	var mCenterX1 = centerX1;
	var mCenterX2 = centerX2;
	var mCenterY1 = centerY1;
	var mCenterY2 = centerY2;

	context.clearRect(0, 0, canvas.width, canvas.height);
	// ugly code for drawing 2 circles
	for(var i = 0; i <= radius; i++){
	var newRadius = radius - i*2;
	if(newRadius < 0){
	break;
	}
	context.strokeStyle = getRandomColor();
	context.lineWidth = 1;
	context.beginPath();
	context.arc(mCenterX1, mCenterY1, newRadius, 0, 2 * Math.PI, false);
	context.closePath();
	context.stroke();
	context.beginPath();
	context.arc(mCenterX2, mCenterY2, newRadius, 0, 2 * Math.PI, false);
	context.closePath();
	context.stroke();
	}
	}

	function animateCircles(localCenterX1,localCenterX2){
	var mCenterX1 = localCenterX1;
	var mCenterX2 = localCenterX2;
	if(mCenterX1 == mCenterX2){
	clearInterval(interval);
	}
	draw2Circles(mCenterX1,centerY1,mCenterX2,centerY2);
	}

	function getRandomColor(){
	// we can restrict letters and set warm colors and etc.
	var letters = '0123456789ABCDEF'.split('');
	var color = '#';
	for (var i = 0; i < 6; i++ ) {
	color += letters[Math.floor(Math.random() * 16)];
	}
	return color;
	}

	</script>

	</body>
	</html>