A5

Web Sys 1

by Alan Harris

HTML

<p>
This program is used to graph a Spirograph: <br>
</p>

<button id="Start" onclick="spiroDraw();">
Start
</button>


<br><br>
<div>
<canvas id="spiro" width="1000" height="1000" style="border:1px solid #000000;"></canvas>
</div>

CSS

button:focus {
  border: 1px solid black;
  padding: 4px 4px;
}

button {
  background-color: grey;
  border: 1px solid black;
  color: white;
  padding: 4px 8px;
  text-decoration: none;
  margin: 4px 2px;
}

button:hover {
  background-color: black;
}

JavaScript

function spiroDraw () {
	var c = document.getElementById("spiro");
  var r = 55;
  var R = 251;
  var O = 238;
  var ctx = c.getContext("2d");
  
//  var x = R+R*Math.cos(0);
//  var y = R+R*Math.sin(0);
var x = (R+r)*Math.cos(0) - (r+O)*Math.cos(((R+r)/r)*0);
 var y = (R+r)*Math.sin(0) - (r+O)*Math.sin(((R+r)/r)*0);
 
// ctx.moveTo(x, y);
  
  
  for (var t = 0; t <= 6*Math.PI; t+=0.01) {
  	x = (R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t)+500
		y = (R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t)+300
    ctx.lineTo(x,y);
    ctx.stroke();
  }
}