Canvas

by Juan Alban Franco

HTML

<html>
<head>

</head>
<body>
<button onclick="callDrawing();">Draw</button>
<button onclick = "clearCanvas();" >Clear Canvas</button>
<button onclick = "looped();">
Experimental Loop!
</button>
<input type = "text" id = "loopcounter" value = 5 >Input number of loops

<canvas id="Canvas" width="600" height="600" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

JavaScript

function drawCircle(overLoad){


var canvas = document.getElementById("Canvas");
	var R = canvas.width/6;
	var ctx = canvas.getContext("2d");
	var r = (Math.random()*.5)*R;
	var x = 0;
	var y = 0;
	var O = 40;
  var t = 0;
	if (overLoad == 1){
	ctx.clearRect(0, 0, canvas.width, canvas.height);
  return;
	} ctx.beginPath();
	
	//center the dot on cartesian plane
	 	x =Math.floor(300+(R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t));
	  y =Math.floor(300+(R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t));
		ctx.moveTo(x,y);
	 	for (var t = 0; t <= 200+(Math.random()*100)/(Math.PI); t+=1) {
		 	x = Math.floor(300+(R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t));
	  	y = Math.floor(300+(R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t));
	  	ctx.lineTo(x,y);
	   	ctx.stroke();
	 	}
	}
  
function callDrawing(){
	 drawCircle(null);
}

function clearCanvas(){
	drawCircle(1);
}
function looped(){
  var max = document.getElementById("loopcounter").value;;
  for (var i = 0;i<max;i++){
     drawCircle(null);
  }
}