Spirograph

Fun with spirographs!

by Ryan Brown

HTML

<button onclick="startDrawing();">Start Drawing</button>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

SCSS

#mycanvas {
	position: relative;
	width: 50%;
	max-width: 400px;
	margin: 100px auto 100px;
	background: none;
	
}

JavaScript

var t = 0;
var r = 35;
var O = 10;
var c = document.getElementById("myCanvas");
var ctr = c.width/2;
var R = ctr/2;
var ctx = c.getContext("2d");



function startDrawing()
	{
    t = 0;
     
    // Clear the Canvas
    ctx.clear();
    
    // Create a random color
    var timesRun = 0;
    var color =  '#'+Math.floor(Math.random()*16777215).toString(16);
    
    // Initial x and y
    var x = (ctr+(R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t));
    var y = (ctr+(R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t));   

    // Start the Drawing
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.moveTo(x,y);
      
    //Use the timer to create drawing
    var interval = setInterval(function()
    	{
    	timesRun += 1;
    	if(timesRun === 500)
      	{
        	clearInterval(interval); }
        
   				 drawSpirograph();}, 1); 
    
				}



function drawSpirograph()
{
  t += 0.11;
  x = Math.floor(ctr+(R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t));
  y = Math.floor(ctr+(R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t));

  ctx.lineTo(x,y);  
  ctx.stroke();
}



CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform)
  {
    if (preserveTransform)
    	{
      	this.save();
      	this.setTransform(20);
    	}

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform)
    	{
      	this.restore();
    	}           
	};