Welcome, guest | Sign In | My Account | Store | Cart
<html>
<head><title>Mandelbrot Fractal Using HTML5 Canvas</title></head>
<body>

<canvas id="canvas" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>

<script type="text/javascript">
// FB - 20121227
// Tested only using Firefox

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var xr = context.canvas.width;
var yr = context.canvas.height;
var imgd = context.createImageData(xr, yr);
var pix = imgd.data;

var xmin = -2.0; var xmax = 1.0;
var ymin = -1.5; var ymax = 1.5;

// these are for coloring the image
var mr0 = 0; var mg0 = 0; var mb0 = 0;
while(mr0 == mg0 || mr0 == mb0 || mg0 == mb0) 
{
    mr0 = Math.pow(2, Math.ceil(Math.random() * 3 + 3));
    mg0 = Math.pow(2, Math.ceil(Math.random() * 3 + 3));
    mb0 = Math.pow(2, Math.ceil(Math.random() * 3 + 3)); 
}
var mr1 = 256 / mr0; var mg1 = 256 / mg0; var mb1 = 256 / mb0;

var maxIt = 256;
var x = 0.0; var y = 0.0;
var zx = 0.0; var zx0 = 0.0; var zy = 0.0;
var zx2 = 0.0; var zy2 = 0.0;

for (var ky = 0; ky < yr; ky++)
{
    y = ymin + (ymax - ymin) * ky / yr;
    for(var kx = 0; kx < xr; kx++)
    {
        x = xmin + (xmax - xmin) * kx / xr;
        zx = x; zy = y;
        for(var i = 0; i < maxIt; i++)
        {
            zx2 = zx * zx; zy2 = zy * zy;
            if(zx2 + zy2 > 4.0) break;
            zx0 = zx2 - zy2 + x;
            zy = 2.0 * zx * zy + y;
            zx = zx0;
        }
        var p = (xr * ky + kx) * 4;
        pix[p] = i % mr0 * mr1;     // red
        pix[p + 1] = i % mg0 * mg1; // green
        pix[p + 2] = i % mb0 * mb1; // blue
        pix[p + 3] = 255;           // alpha
    }
}

context.putImageData(imgd, 0, 0);
</script>
</body>
</html>

Diff to Previous Revision

--- revision 2 2010-06-30 22:18:54
+++ revision 3 2012-12-28 01:01:09
@@ -1,33 +1,39 @@
 <html>
-<head><title>HTML5 Canvas Mandelbrot Fractal</title></head>
+<head><title>Mandelbrot Fractal Using HTML5 Canvas</title></head>
 <body>
 
 <canvas id="canvas" width="500" height="500">
-This text is displayed if your browser does not support HTML5 Canvas.
+Your browser does not support HTML5 Canvas.
 </canvas>
 
 <script type="text/javascript">
-// FB - 201006303
-// Tested only using Firefox 3.5
+// FB - 20121227
+// Tested only using Firefox
 
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext('2d');
 var xr = context.canvas.width;
 var yr = context.canvas.height;
-var imgd = context.createImageData(xr,yr);
+var imgd = context.createImageData(xr, yr);
 var pix = imgd.data;
 
-var xmin = -2.0;
-var xmax = 1.0;
-var ymin = -1.5;
-var ymax = 1.5;
+var xmin = -2.0; var xmax = 1.0;
+var ymin = -1.5; var ymax = 1.5;
+
+// these are for coloring the image
+var mr0 = 0; var mg0 = 0; var mb0 = 0;
+while(mr0 == mg0 || mr0 == mb0 || mg0 == mb0) 
+{
+    mr0 = Math.pow(2, Math.ceil(Math.random() * 3 + 3));
+    mg0 = Math.pow(2, Math.ceil(Math.random() * 3 + 3));
+    mb0 = Math.pow(2, Math.ceil(Math.random() * 3 + 3)); 
+}
+var mr1 = 256 / mr0; var mg1 = 256 / mg0; var mb1 = 256 / mb0;
 
 var maxIt = 256;
-var x = 0.0;
-var y = 0.0;
-var zx = 0.0;
-var zx0 = 0.0;
-var zy = 0.0;
+var x = 0.0; var y = 0.0;
+var zx = 0.0; var zx0 = 0.0; var zy = 0.0;
+var zx2 = 0.0; var zy2 = 0.0;
 
 for (var ky = 0; ky < yr; ky++)
 {
@@ -35,25 +41,24 @@
     for(var kx = 0; kx < xr; kx++)
     {
         x = xmin + (xmax - xmin) * kx / xr;
-        zx = x;
-        zy = y;
+        zx = x; zy = y;
         for(var i = 0; i < maxIt; i++)
         {
-            if( zx * zx + zy * zy > 4.0) break;
-            zx0 = zx * zx - zy * zy + x;
+            zx2 = zx * zx; zy2 = zy * zy;
+            if(zx2 + zy2 > 4.0) break;
+            zx0 = zx2 - zy2 + x;
             zy = 2.0 * zx * zy + y;
             zx = zx0;
         }
-        var p = (yr * ky + kx) * 4;
-        pix[p] = i % 8 * 32;    // red
-        pix[p+1] = i % 16 * 16; // green
-        pix[p+2] = i % 32 * 8;  // blue
-        pix[p+3] = 255;         // alpha
+        var p = (xr * ky + kx) * 4;
+        pix[p] = i % mr0 * mr1;     // red
+        pix[p + 1] = i % mg0 * mg1; // green
+        pix[p + 2] = i % mb0 * mb1; // blue
+        pix[p + 3] = 255;           // alpha
     }
 }
 
-context.putImageData(imgd, 0,0);
-
+context.putImageData(imgd, 0, 0);
 </script>
 </body>
 </html>

History