Web Systems A5-Alt

by zazagalaxy

HTML

<canvas id="canvas" width="500" height="500" ></canvas>


<form name="spirograph" action="javascript:start();">
Select color
<select id="control4" type="text" name="var4">
<option name="black" value="black" type="text">black</option>
<option name="white" value="white" type="text">white</option>
<option name="blue" value="blue" type="text">blue</option>
<option name="green" value="green" type="text">green</option>
<option name="red" value="red" type="text">red</option>
<option name="orange" value="orange" type="text">orange</option>
<option name="yellow" value="yellow" type="text">yellow</option>
<option name="purple" value="purple" type="text">purple</option>
</select>
<br/>
Select background color
<select id="control5" type="text" name="var4">
<option name="white" value="white" type="text">white</option>
<option name="black" value="black" type="text">black</option>
<option name="blue" value="blue" type="text">blue</option>
<option name="green" value="green" type="text">green</option>
<option name="red" value="red" type="text">red</option>
<option name="orange" value="orange" type="text">orange</option>
<option name="yellow" value="yellow" type="text">yellow</option>
<option name="purple" value="purple" type="text">purple</option>
</select>
<br/>
<p>
R
</p>
<input id="control1" type="range" name="var1" min="-100" max="100" value = "43">
<br/>
<p>
r
</p>
<input id="control2" type="range" name="var2" min="-50" max="100" value="27">
<br/>
<p>
o
</p>
<input id="control3" type="range" name="var2" min="0" max="100" value="85">
</form>

CSS

input {
width: 300px;
}

JavaScript

$(document).ready(function() {
$('#control1').change(function() {
  start();
});

$('#control2').change(function() {
   start();
})

$('#control3').change(function() {
   start();
});

$('#control4').change(function() {
   start();
});
$('#control5').change(function() {
   start();
});
});

function draw(R,r, o, n, col, bgc) {
	let c = document.getElementById('canvas').getContext('2d');
  c.fillRect(0,0,500,500);
    	c.save();
      c.strokeStyle = col;
      c.fillStyle = bgc;
      c.fillRect(0,0,500,500);
      c.translate(250,250);
      spirograph(c,R,r,o,n);
      c.restore();
}

function spirograph(c, R, r, o, n) {
	let x1 = R-o;
  let y1 = 0;
  let i = 1;
  c.beginPath();
  c.moveTo(x1,y1);
  for (let i = 0; i < n; i++) {
  var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+o)*Math.cos(((R+r)/r)*(i*Math.PI/72));
      var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+o)*Math.sin(((R+r)/r)*(i*Math.PI/72));
      c.lineTo(x2, y2);
      x1 = x2;
      y1 = y2;
  }
  	c.stroke();
}

function start() {
let R =	parseFloat(document.forms["spirograph"]["control1"].value);
let r =	parseFloat(document.forms["spirograph"]["control2"].value);
let o =	parseFloat(document.forms["spirograph"]["control3"].value);
let col =	document.forms["spirograph"]["control4"].value;
let bgc =	document.forms["spirograph"]["control5"].value;
draw(R, r, o, 10000, col, bgc);
}

draw(43,27,85, 10000, "black", "white");