Welcome, guest | Sign In | My Account | Store | Cart

Recipe 577277 revision 2 

<html>
<head><title>HTML5 Canvas Mandelbrot Fractal</title></head>
<body>

<canvas id="canvas" width="500" height="500">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

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

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;

var maxIt = 256;
var x = 0.0;
var y = 0.0;
var zx = 0.0;
var zx0 = 0.0;
var zy = 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++)
        {
            if( zx * zx + zy * zy > 4.0) break;
            zx0 = zx * zx - zy * zy + 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
    }
}

context.putImageData(imgd, 0,0);

</script>
</body>
</html>

Diff to Previous Revision

--- revision 1 2010-06-30 06:18:35
+++ revision 2 2010-06-30 22:18:54
@@ -1,11 +1,8 @@
 <html>
-<head>
-        <title>HTML5 Canvas Mandelbrot Fractal</title>
-</head>
-
+<head><title>HTML5 Canvas Mandelbrot Fractal</title></head>
 <body>
 
-<canvas id="canvas" width="200" height="200">
+<canvas id="canvas" width="500" height="500">
 This text is displayed if your browser does not support HTML5 Canvas.
 </canvas>
 
@@ -15,15 +12,15 @@
 
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext('2d');
-var xr = 200;
-var yr = 200
+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 = 2.0;
-var ymin = -2.0;
-var ymax = 2.0;
+var xmax = 1.0;
+var ymin = -1.5;
+var ymax = 1.5;
 
 var maxIt = 256;
 var x = 0.0;
@@ -43,15 +40,15 @@
         for(var i = 0; i < maxIt; i++)
         {
             if( zx * zx + zy * zy > 4.0) break;
-            zx0 = zx * zx -zy * zy + x;
+            zx0 = zx * zx - zy * zy + x;
             zy = 2.0 * zx * zy + y;
             zx = zx0;
         }
         var p = (yr * ky + kx) * 4;
-        pix[p] = i % 8 * 32; // red channel
-        pix[p+1] = i % 16 * 16; // green channel
-        pix[p+2] = i % 32 * 8; // blue channel
-        pix[p+3] = 255; // alpha channel
+        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
     }
 }

History