COP4813 - A5 - SpiroGraph

by Ron Eaglin

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>
  <button onclick="graphWarp(context)">Random 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>

<p>
  <button onclick="drawSpiroGraph(101,36,70,1.9,context);">Preset 1</button>
  <button onclick="drawSpiroGraph(93,40,70,0.9,context);">Preset 2</button>
  <button onclick="drawSpiroGraph(93,40,70,1.1,context);">Preset 3</button>
  <button onclick="drawSpiroGraph(92,34,70,5,context);">Preset 4</button>
  <button onclick="drawSpiroGraph(98,39,71,5,context);">Preset 5</button>
  <button onclick="drawSpiroGraph(93,35,70,1.8,context);">Preset 6</button>
  <button onclick="drawSpiroGraph(94,36,71,2.9,context);">Preset 7</button>
</p>

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 graphWarp(ctx){
	
  let R = Math.floor(Math.random() * Math.floor(100))
  let r = Math.floor(Math.random() * Math.floor(70))
  let O = Math.floor(Math.random() * Math.floor(100))
  let t = (Math.floor(Math.random() * 100) / 10) + 0.1
  //let t1 = Math.floor(Math.random() * Math.floor(10))
 //let t2 = Math.random();
 // let t = t1 + t2;
  document.getElementById('R').value = R;
  document.getElementById('r').value = r;
  document.getElementById('O').value = O;
  document.getElementById('t').value = t;
  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 = "rgb("+c()+"," +c()+","+c()+")";
    ctx.stroke();
    
}

function c(){
  return String(parseInt(Math.random()*255));
}