mnutt · November 12, 2009 21:37
diff --git a/mutation.html b/mutation.html
 <html>
  <head>
    <title>Mutation</title>
    <script type="text/javascript">
      var canvas;
      var ctx;

      // Colors to use for the circles.  A larger array means more circles.
      var colors = ["rgba(171, 207, 43, 0.5)",
                    "rgba(201, 7, 33, 0.5)",
                    "rgba(241, 144, 32, 0.5)",
                    "rgba(73, 159, 196, 0.5)",
                    "rgba(200, 200, 200, 0.5)"];

      function init() {
        canvas = document.getElementById('tutorial');
        if (canvas.getContext) {
          // Get the context from the canvas element
          ctx = canvas.getContext('2d');

          // Find the center of the canvas
          centerx = canvas.width / 2;
          centery = canvas.height / 2;

          // 20ms interval == 50Hz refresh rate
 	  setInterval("draw()", 20);
 	}
      }

      var i = 0;

      function draw(){
        // Clear the canvas
        canvas.width = canvas.width;

        // Move to the center
        ctx.translate(centerx, centery);

        // Change the blending so that when two colors overlap, the result is darker
        ctx.globalCompositeOperation = "darker";

        // Draw the shadows

        // To do this, we'll draw the circles in white, add shadows, scale to give
        // the appearance of perspective, then restore the context to its original
        // form.

        // Store the original context
        ctx.save();

        // Add shadows to our fills
        ctx.shadowColor = "rgba(0,0,0,0.1)";
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowBlur = 30;
        ctx.translate(0,160);
 	ctx.scale(0.8, 0.3);

        // Draw white circles
        for(var k = 0; k < colors.length; k++) {
          var degrees = i % 360 + (k * (360 / colors.length));
          var radius = Math.cos(i / (Math.PI * 8)) * 55;

          var x = radius * Math.cos(degrees * Math.PI / 180);
          var y = radius * Math.sin(degrees * Math.PI / 180);

          ctx.fillStyle = "#FFFFFF";
          ctx.beginPath();
          ctx.arc(x, y, 80, 0, Math.PI*2, true);
          ctx.closePath();
          ctx.fill();
 	}

 	// Return to the original context
        ctx.restore();

 	// Draw the colored circles
        for(var k = 0; k < colors.length; k++) {
          var degrees = i % 360 + (k * (360 / colors.length));
          var radius = Math.cos(i / (Math.PI * 8)) * 55;

          var x = radius * Math.cos(degrees * Math.PI / 180);
          var y = radius * Math.sin(degrees * Math.PI / 180);

          ctx.fillStyle = colors[k];
          ctx.beginPath();
          ctx.arc(x, y, 80, 0, Math.PI*2, true);
          ctx.closePath();

          ctx.fill();
 	}
        i++;
      }
    </script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

    <style type="text/css">
      body {
        margin: 0 auto;
        background-color: #FFF;
        color: #FFF;
        text-align: center;
        font-family: "Droid Sans", Helvetica, sans-serif;
      }
      a { color: #FFF; }
      h1 {
        z-index: 50;
        padding: 10px;
        background-color: #111;
        color: #FFF;
        display: inline;
        -moz-border-radius: 3px;
      }
      canvas {
        display: block;
        width: 500px;
        height: 500px;
        margin: auto;
      }
      @font-face {
        font-family: "Droid Sans";
        src: url('DroidSans.ttf');
      }
      @font-face {
        font-family: "Droid Sans";
        font-weight: bold;
        src: url('DroidSans-Bold.ttf');
      }

    </style>

  </head>

  <body onload="init();">

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

    <h1>MUTATION</h1>

  </body>
 </html>
	<html>
	<head>
	<title>Mutation</title>
	<script type="text/javascript">
	var canvas;
	var ctx;

	// Colors to use for the circles. A larger array means more circles.
	var colors = ["rgba(171, 207, 43, 0.5)",
	"rgba(201, 7, 33, 0.5)",
	"rgba(241, 144, 32, 0.5)",
	"rgba(73, 159, 196, 0.5)",
	"rgba(200, 200, 200, 0.5)"];

	function init() {
	canvas = document.getElementById('tutorial');
	if (canvas.getContext) {
	// Get the context from the canvas element
	ctx = canvas.getContext('2d');

	// Find the center of the canvas
	centerx = canvas.width / 2;
	centery = canvas.height / 2;

	// 20ms interval == 50Hz refresh rate
	setInterval("draw()", 20);
	}
	}

	var i = 0;

	function draw(){
	// Clear the canvas
	canvas.width = canvas.width;

	// Move to the center
	ctx.translate(centerx, centery);

	// Change the blending so that when two colors overlap, the result is darker
	ctx.globalCompositeOperation = "darker";

	// Draw the shadows

	// To do this, we'll draw the circles in white, add shadows, scale to give
	// the appearance of perspective, then restore the context to its original
	// form.

	// Store the original context
	ctx.save();

	// Add shadows to our fills
	ctx.shadowColor = "rgba(0,0,0,0.1)";
	ctx.shadowOffsetX = 0;
	ctx.shadowOffsetY = 0;
	ctx.shadowBlur = 30;
	ctx.translate(0,160);
	ctx.scale(0.8, 0.3);

	// Draw white circles
	for(var k = 0; k < colors.length; k++) {
	var degrees = i % 360 + (k * (360 / colors.length));
	var radius = Math.cos(i / (Math.PI * 8)) * 55;

	var x = radius * Math.cos(degrees * Math.PI / 180);
	var y = radius * Math.sin(degrees * Math.PI / 180);

	ctx.fillStyle = "#FFFFFF";
	ctx.beginPath();
	ctx.arc(x, y, 80, 0, Math.PI*2, true);
	ctx.closePath();
	ctx.fill();
	}

	// Return to the original context
	ctx.restore();

	// Draw the colored circles
	for(var k = 0; k < colors.length; k++) {
	var degrees = i % 360 + (k * (360 / colors.length));
	var radius = Math.cos(i / (Math.PI * 8)) * 55;

	var x = radius * Math.cos(degrees * Math.PI / 180);
	var y = radius * Math.sin(degrees * Math.PI / 180);

	ctx.fillStyle = colors[k];
	ctx.beginPath();
	ctx.arc(x, y, 80, 0, Math.PI*2, true);
	ctx.closePath();

	ctx.fill();
	}
	i++;
	}
	</script>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

	<style type="text/css">
	body {
	margin: 0 auto;
	background-color: #FFF;
	color: #FFF;
	text-align: center;
	font-family: "Droid Sans", Helvetica, sans-serif;
	}
	a { color: #FFF; }
	h1 {
	z-index: 50;
	padding: 10px;
	background-color: #111;
	color: #FFF;
	display: inline;
	-moz-border-radius: 3px;
	}
	canvas {
	display: block;
	width: 500px;
	height: 500px;
	margin: auto;
	}
	@font-face {
	font-family: "Droid Sans";
	src: url('DroidSans.ttf');
	}
	@font-face {
	font-family: "Droid Sans";
	font-weight: bold;
	src: url('DroidSans-Bold.ttf');
	}

	</style>

	</head>

	<body onload="init();">

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

	<h1>MUTATION</h1>

	</body>
	</html>
No results found