JoshCheek/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Smiley Face</title>
  </head>
  <body>
    <canvas id="a" width="800" height="800">
    This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>

    <script type='text/javascript'>
    // $ open index.html
    var a_canvas        = document.getElementById("a");
    var context         = a_canvas.getContext("2d");
    var numLines        = 1600;
    var incrementAmount = 0.01;
    var width           = 800;
    var height          = 800;


    function hex(float) {
      var value = Math.round(float).toString(16);
      while(value.length < 2) value = '0' + value;
      return value;
    }

    function drawFor(multiplier) {
      var radius  = 350;
      var xOffset = 400;
      var yOffset = 400;

      for(var i=0; i<numLines; i++) {
        context.beginPath();
        // colour
        var red   = 127.5 * (1 + Math.sin(i/numLines * 2 * Math.PI));
        var green = 127.5 * (1 + Math.cos(i/numLines * 2 * Math.PI));
        var blue  = 255 / (1 + Math.exp((-12/numLines) * (i - numLines/2)));
        context.strokeStyle = '#' + hex(red) + hex(green) + hex(blue);

        // start
        context.moveTo(
          xOffset + radius*Math.cos(i/numLines * 2*Math.PI),
          yOffset + radius*Math.sin(i/numLines * 2*Math.PI)
        );

        // finish
        context.lineTo(
          xOffset + radius*Math.cos((i*multiplier)/numLines * 2*Math.PI),
          yOffset + radius*Math.sin((i*multiplier)/numLines * 2*Math.PI)
        );
        context.stroke();
        context.closePath();
      }
    }

    var multiplier = 1;

    function draw() {
      if(multiplier > 10) return;
      setTimeout(function() {
        multiplier += incrementAmount;
        context.clearRect(0, 0, width, height);
        drawFor(multiplier);
        draw();
      }, 100);
    }
    draw();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Smiley Face</title>
	</head>
	<body>
	<canvas id="a" width="800" height="800">
	This text is displayed if your browser does not support HTML5 Canvas.
	</canvas>

	<script type='text/javascript'>
	// $ open index.html
	var a_canvas = document.getElementById("a");
	var context = a_canvas.getContext("2d");
	var numLines = 1600;
	var incrementAmount = 0.01;
	var width = 800;
	var height = 800;


	function hex(float) {
	var value = Math.round(float).toString(16);
	while(value.length < 2) value = '0' + value;
	return value;
	}

	function drawFor(multiplier) {
	var radius = 350;
	var xOffset = 400;
	var yOffset = 400;

	for(var i=0; i<numLines; i++) {
	context.beginPath();
	// colour
	var red = 127.5 * (1 + Math.sin(i/numLines * 2 * Math.PI));
	var green = 127.5 * (1 + Math.cos(i/numLines * 2 * Math.PI));
	var blue = 255 / (1 + Math.exp((-12/numLines) * (i - numLines/2)));
	context.strokeStyle = '#' + hex(red) + hex(green) + hex(blue);

	// start
	context.moveTo(
	xOffset + radiusMath.cos(i/numLines 2*Math.PI),
	yOffset + radiusMath.sin(i/numLines 2*Math.PI)
	);

	// finish
	context.lineTo(
	xOffset + radiusMath.cos((imultiplier)/numLines * 2*Math.PI),
	yOffset + radiusMath.sin((imultiplier)/numLines * 2*Math.PI)
	);
	context.stroke();
	context.closePath();
	}
	}

	var multiplier = 1;

	function draw() {
	if(multiplier > 10) return;
	setTimeout(function() {
	multiplier += incrementAmount;
	context.clearRect(0, 0, width, height);
	drawFor(multiplier);
	draw();
	}, 100);
	}
	draw();
	</script>
	</body>
	</html>