COP4813 - A5 - SpiroGraph

by vzufelt

HTML

<canvas id="myCanvas" width="500" height="500"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<p>
  <button onclick="draw(context)">Draw SpiroGraph!</button>
</p>


<table>
  <tr>
      <td>R</td>
      <td><input id="R" value="92" type="number" onchange="draw(context)"></td>
  </tr>
  <tr>
      <td>r</td>
      <td><input id="r" value="34" type="number" onchange="draw(context)"></td>
  </tr>
  <tr>
      <td>O</td>
      <td><input id="O" value="70" type="number" onchange="draw(context)"></td>
  </tr>
  <tr>
      <td>T-Ratio</td>
      <td><input id="t" value="1.9" type="number" step="0.1" onchange="draw(context)"></td>
  </tr>
</table>

JavaScript

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");



function draw(ctx){
  let R = parseInt(document.getElementById("R").value);
  let r = parseInt(document.getElementById("r").value);
  let O = parseInt(document.getElementById("O").value);
  let t = parseFloat(document.getElementById("t").value);
  
  drawSpiroGraph(R,r,O,t,ctx);
}

function drawSpiroGraph(R,r,O,tRatio,ctx){
//var canvas = document.getElementById("myCanvas");
//var ctx = canvas.getContext("2d");
var xCenter = canvas.width / 2 ;
var yCenter = canvas.height / 2 ;
ctx.clearRect(0, 0, canvas.width, canvas.height);
 

    ctx.moveTo(xCenter, yCenter); // change to canvas divided by 2
    ctx.beginPath();
   
    for (var i = 0; i < 720; i+=0.01) {

        let t  = tRatio * i;
        let x = xCenter + ((R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t));
				let y = yCenter - ((R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t));
        /*
			R is the radius of the outer (fixed) circle,
			r is the radius of the rotating (inner) circle, and
			O is the offset of the pen from the center of the inner circl
      */
        ctx.lineTo(x, y);
    }
    ctx.strokeStyle = "#FF000";
    ctx.stroke();
    
}