faithandbrave/spiral.html

## spiral.html
<html>
<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="https://rawgithub.com/maxkueng/victor/master/build/victor.js"></script>
  <script>
  var context;
  var pos;
  var theta;

  function onInitialize() {
    var canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    clearCanvas();

    pos = new Victor(getCenterX(), getCenterY());
    theta = 0.0

    var frameRate = 1000/30;
    setTimeout(function updateFrame() {
      onUpdate();
      onDraw();
      setTimeout(updateFrame, frameRate);
    }, frameRate);
  }

  function getCenterX() { return canvas.getBoundingClientRect().width / 2; }
  function getCenterY() { return canvas.getBoundingClientRect().height / 2; }

  function drawCircle(x, y, radius, color) {
    context.beginPath();
    var startAngle = 0;
    var endAngle = 2 * Math.PI;
    context.arc(x, y, radius, startAngle, endAngle, false);
    context.fillStyle = color;
    context.fill();
  }

  function clearCanvas() {
    context.fillStyle="rgb(255,255,255)";
    context.fillRect(0, 0, canvas.getBoundingClientRect().width, canvas.getBoundingClientRect().height);
  }

  function onUpdate() {
    r = Math.E * theta;
    pos = new Victor(getCenterX() + r * Math.cos(theta), getCenterY() + r * Math.sin(theta));
    theta += 0.1;
  }

  function onDraw() {
    clearCanvas();
    drawCircle(pos.x, pos.y, 10, "rgb(0,0,0)");
    drawCircle(getCenterX(), getCenterY(), 10, "rgb(255,0,0)");
  }
  </script>
</head>
<body onload="onInitialize();">
  <div style="border:solid 1px #000000;width:800px;" id="candiv">
    <canvas id="canvas" width="800px" height="300px"></canvas>
  </div>
</body>
</html>
	<html>
	<head>
	<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="https://rawgithub.com/maxkueng/victor/master/build/victor.js"></script>
	<script>
	var context;
	var pos;
	var theta;

	function onInitialize() {
	var canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	clearCanvas();

	pos = new Victor(getCenterX(), getCenterY());
	theta = 0.0

	var frameRate = 1000/30;
	setTimeout(function updateFrame() {
	onUpdate();
	onDraw();
	setTimeout(updateFrame, frameRate);
	}, frameRate);
	}

	function getCenterX() { return canvas.getBoundingClientRect().width / 2; }
	function getCenterY() { return canvas.getBoundingClientRect().height / 2; }

	function drawCircle(x, y, radius, color) {
	context.beginPath();
	var startAngle = 0;
	var endAngle = 2 * Math.PI;
	context.arc(x, y, radius, startAngle, endAngle, false);
	context.fillStyle = color;
	context.fill();
	}

	function clearCanvas() {
	context.fillStyle="rgb(255,255,255)";
	context.fillRect(0, 0, canvas.getBoundingClientRect().width, canvas.getBoundingClientRect().height);
	}

	function onUpdate() {
	r = Math.E * theta;
	pos = new Victor(getCenterX() + r * Math.cos(theta), getCenterY() + r * Math.sin(theta));
	theta += 0.1;
	}

	function onDraw() {
	clearCanvas();
	drawCircle(pos.x, pos.y, 10, "rgb(0,0,0)");
	drawCircle(getCenterX(), getCenterY(), 10, "rgb(255,0,0)");
	}
	</script>
	</head>
	<body onload="onInitialize();">
	<div style="border:solid 1px #000000;width:800px;" id="candiv">
	<canvas id="canvas" width="800px" height="300px"></canvas>
	</div>
	</body>
	</html>