mchapman/mandelbrot.html

## mandelbrot.html
<html>
 <head>
   <script type="text/javascript">
     window.onload = function() {
       var mandelbrotCanvas = document.getElementById('mandelbrotCanvas');
       var context = mandelbrotCanvas.getContext('2d');

       var width = mandelbrotCanvas.width;
       var height = mandelbrotCanvas.height;

       var max_iter = 1000;
       var log2 = Math.log(2);

       for (i=0;i<width;i++) {
         var Ca = 3*i/(width -1) - 2.25;

         for (j=0;j<height;j++) {
           var Za = 0;
           var Zb = 0;
           var Cb = 2*j/(height-1) - 1;

           var iter = 0;
           var Zas = 0;
           var Zan;
           while((Zas + Zb*Zb) < 4 && iter < max_iter) {
             Zas = Za*Za;
             Zan = Zas - Zb*Zb + Ca;
             Zb = 2*Za*Zb + Cb;
             Za = Zan;
             iter++;
           }

           if (iter === max_iter) {
             context.fillStyle = 'black';
           } else {
             // Smooth colouring algorithm. See http://stackoverflow.com/questions/369438
             var hue = iter + 1 - Math.log(Math.log(Math.sqrt(Zas + Zb*Zb)))/log2;

             context.fillStyle = 'hsl(' + hue + ', 80%, 50%)';
           }

           context.fillRect(i, j, 1, 1);
         }
       }
     }
   </script>
  </head>
 <body>
   <canvas id="mandelbrotCanvas" width="1000" height="500">
   </canvas>
 </body>
</html>
	<html>
	<head>
	<script type="text/javascript">
	window.onload = function() {
	var mandelbrotCanvas = document.getElementById('mandelbrotCanvas');
	var context = mandelbrotCanvas.getContext('2d');

	var width = mandelbrotCanvas.width;
	var height = mandelbrotCanvas.height;

	var max_iter = 1000;
	var log2 = Math.log(2);

	for (i=0;i<width;i++) {
	var Ca = 3*i/(width -1) - 2.25;

	for (j=0;j<height;j++) {
	var Za = 0;
	var Zb = 0;
	var Cb = 2*j/(height-1) - 1;

	var iter = 0;
	var Zas = 0;
	var Zan;
	while((Zas + Zb*Zb) < 4 && iter < max_iter) {
	Zas = Za*Za;
	Zan = Zas - Zb*Zb + Ca;
	Zb = 2ZaZb + Cb;
	Za = Zan;
	iter++;
	}

	if (iter === max_iter) {
	context.fillStyle = 'black';
	} else {
	// Smooth colouring algorithm. See http://stackoverflow.com/questions/369438
	var hue = iter + 1 - Math.log(Math.log(Math.sqrt(Zas + Zb*Zb)))/log2;

	context.fillStyle = 'hsl(' + hue + ', 80%, 50%)';
	}

	context.fillRect(i, j, 1, 1);
	}
	}
	}
	</script>
	</head>
	<body>
	<canvas id="mandelbrotCanvas" width="1000" height="500">
	</canvas>
	</body>
	</html>