Spirograph

by SHELDON PASCIAK

HTML

<button onclick="startDrawing();">Start</button>
<button onclick="stopDrawing();">Stop</button>
<button onclick="eraseWindow();">Clear</button>
<button onclick="fillWindow();">New Spirograph</button>
Speed Interval <input type="number" min=10 max=3000 id="num" name="num" value=100 step=100 />ms

<canvas id="myCanvas" width="1024" height="768" style="border:1px solid #d3d3d3;background:#000;">
Your browser does not support the HTML5 canvas tag.</canvas>

CSS

canvas {
  width:100%;
  height:100%;
}

JavaScript

//note to self .... write reusable code

//todo include stats.js for frame rate

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var wx=0;
var wy=0;
var interval;
var screenRuns=0.0;

var points = new Array();

function fillWindow() {

clearWindow();

screenRuns+=.75;

wx=Math.sin(screenRuns)*100;
wy=Math.cos(screenRuns)*100;

  for (var i=-c.width;i<c.width;i+=250) {
    for (var j=-c.height;j<c.height;j+=250) {
      drawCircle(i+wx,j+wy);
    }
  }

}

function pastelColors(){
    var r = (Math.round(Math.random()* 127) + 127).toString(16);
    var g = (Math.round(Math.random()* 127) + 127).toString(16);
    var b = (Math.round(Math.random()* 127) + 127).toString(16);
    return '#' + r + g + b;
}

function newColor() {
	//return '#'+Math.floor(Math.random()*16777215).toString(16);
  return pastelColors();
}

function drawCircle(xx,yy) {

  var R = Math.random() * 15 + 35;
  var r = Math.random() * 5 + 15
  var O = Math.random() * 5 + 5;

  var x = 0;
  var y = 0;
  var t = 0

	color = newColor();

  x = (0.5*c.width) + (R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t);
	y = (0.5*c.width) + (R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t);
  
  ctx.beginPath();
 	ctx.strokeStyle = color;
  ctx.moveTo(x+xx,y+yy);
   
  for (t=0; t <= 11*Math.PI; t+=.2) {	    
   color=newColor();     
   ctx.strokeStyle = color;   
   x = (0.5*c.width) + (R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t);
	 y = (0.5*c.width) + (R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t);   
   //points.push ( {'x':x,'y':y} );  
   ctx.lineTo(x+xx,y+yy);   
   ctx.stroke();
  }
  
  //console.log(JSON.stringify(points));points=new Array(); //memory hog!
  
}

function eraseWindow() {
  ctx.fillStyle='black';
  ctx.fillRect(0,0,c.width,c.height);
}

function clearWindow() {
  //using prototype override
  ctx.clear();
}

function stopDrawing() {
	clearInterval(interval);
}

CanvasRenderingContext2D.prototype.clear = CanvasRenderingContext2D.prototype.clear || function...