Random Spirograph

by vzufelt

HTML

<button onclick="doDrawing();">Draw Circle</button><br>

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

<body>
<script>
var t = 0;
var c = document.getElementById("myCanvas");
var R = Math.floor(Math.random() * (200 - 100 + 1) ) + 100;
var r = Math.floor(Math.random() * (30 - 5 + 1) ) + 5;  //15;
var O = Math.floor(Math.random() * (30 - 5 + 1) ) + 5;
var ctx = c.getContext("2d");

function doDrawing() {
    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 = 45;
    var y = 200;

    // 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 === 650){
        clearInterval(interval); }
        
    drawCircle();}, 5); 
    
}
function drawCircle()
{
  t += 0.1;
  x = 200-(Math.floor((R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t)));
  y = 200-(Math.floor((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(1, 0, 0, 1, 0, 0);
    }

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

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

</script>
</body>

JavaScript

var t = 0;
var c = document.getElementById("myCanvas");
var R = Math.floor(Math.random() * (200 - 100 + 1) ) + 100;
var r = Math.floor(Math.random() * (30 - 5 + 1) ) + 5;  //15;
var O = Math.floor(Math.random() * (30 - 5 + 1) ) + 5;
var ctx = c.getContext("2d");

function doDrawing() {
    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 = 45;
    var y = 200;

    // 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 === 650){
        clearInterval(interval); }
        
    drawCircle();}, 5); 
    
}
function drawCircle()
{
  t += 0.1;
  x = 200-(Math.floor((R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t)));
  y = 200-(Math.floor((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(1, 0, 0, 1, 0, 0);
    }

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

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