hdf/spiral.html

## spiral.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Archimedean spiral drawing script</title>
<style>
html, body {
 margin: 0;
}
#c {
  border: 1px solid #000;
}
#container {
  display: table;
  text-align: right;
  margin: 0 auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">!window.jQuery && document.write('<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><\/script>');</script>
<script>
$(function() {
var context = document.getElementById('c').getContext("2d");
var centerx = context.canvas.width / 2;
var centery = context.canvas.height / 2;

$('#draw').click(function () {
  context.lineWidth = parseFloat($('#w').val());
  context.strokeStyle = $('#color').val();
  gap = parseFloat($('#g').val());
  rounds = 2 * parseFloat($('#r').val()) * Math.PI;
  direction = $('#d').val().toLowerCase();
  n = parseInt($('#n').val());
  context.clearRect(0, 0, 2*centerx, 2*centery);
  for (i = 1; i <= n; i++) {
    rot = 2*Math.PI/n*i;
    angle = 0;
    context.beginPath();
    context.moveTo(centerx, centery);
    while (angle < rounds) {
      if (direction == 'right' || direction == 'r' ||
        direction == '1' || direction == 'true') {
        x = centerx + angle * Math.cos(angle+rot) * gap;
        y = centery + angle * Math.sin(angle+rot) * gap;
      } else {
        x = centerx + angle * Math.sin(angle+rot) * gap;
        y = centery + angle * Math.cos(angle+rot) * gap;
      }
      context.lineTo(x, y);
      angle += 1/(10+angle);
    }
    context.stroke();
  }
});
//$('#draw').click();
});
</script>
</head>
<body>
  <div id="container">
    <canvas id="c" width="500" height="500"></canvas><br/>
    <div>Spirals: <input id="n" type="text" value='3'></div>
    <div>Direction: <input id="d" type="text" value='right'></div>
    <div>Thickness: <input id="w" type="text" value='5'></div>
    <div>Gap: <input id="g" type="text" value='10'></div>
    <div>Rounds: <input id="r" type="text" value='2.5'></div>
    <div>Color: <input id="color" type="text" value='#000'></div>
    <button id="draw">Draw</button>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Archimedean spiral drawing script</title>
	<style>
	html, body {
	margin: 0;
	}
	#c {
	border: 1px solid #000;
	}
	#container {
	display: table;
	text-align: right;
	margin: 0 auto;
	}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript">!window.jQuery && document.write('<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><\/script>');</script>
	<script>
	$(function() {
	var context = document.getElementById('c').getContext("2d");
	var centerx = context.canvas.width / 2;
	var centery = context.canvas.height / 2;

	$('#draw').click(function () {
	context.lineWidth = parseFloat($('#w').val());
	context.strokeStyle = $('#color').val();
	gap = parseFloat($('#g').val());
	rounds = 2 * parseFloat($('#r').val()) * Math.PI;
	direction = $('#d').val().toLowerCase();
	n = parseInt($('#n').val());
	context.clearRect(0, 0, 2centerx, 2centery);
	for (i = 1; i <= n; i++) {
	rot = 2Math.PI/ni;
	angle = 0;
	context.beginPath();
	context.moveTo(centerx, centery);
	while (angle < rounds) {
	if (direction == 'right' \|\| direction == 'r' \|\|
	direction == '1' \|\| direction == 'true') {
	x = centerx + angle * Math.cos(angle+rot) * gap;
	y = centery + angle * Math.sin(angle+rot) * gap;
	} else {
	x = centerx + angle * Math.sin(angle+rot) * gap;
	y = centery + angle * Math.cos(angle+rot) * gap;
	}
	context.lineTo(x, y);
	angle += 1/(10+angle);
	}
	context.stroke();
	}
	});
	//$('#draw').click();
	});
	</script>
	</head>
	<body>
	<div id="container">
	<canvas id="c" width="500" height="500"></canvas><br/>
	<div>Spirals: <input id="n" type="text" value='3'></div>
	<div>Direction: <input id="d" type="text" value='right'></div>
	<div>Thickness: <input id="w" type="text" value='5'></div>
	<div>Gap: <input id="g" type="text" value='10'></div>
	<div>Rounds: <input id="r" type="text" value='2.5'></div>
	<div>Color: <input id="color" type="text" value='#000'></div>
	<button id="draw">Draw</button>
	</div>
	</body>
	</html>