Mandelbrot Fractal using HTML5 Canvas. (Do not forget to change file extension to HTML after downloading it.)
JavaScript, 64 lines
Download
Copy to clipboard1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <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>
|
The line that says var p = (yr * ky + kx) * 4; is WRONG (and only works with a square canvas i.e. when xr==yr).
It should be var p = (xr * ky + kx) * 4;
This is much slower than it should be - it is calculating the squares of both the real and imaginary parts of z TWICE each iteration!
Thanks for catching the typo. I fixed the code and also added randomized coloring.
By the way, I got a major speed increase by putting all the code into a function so that it uses local rather than global variables.
I did not know that. Thanks.
Another way to increase speed could be making it multi-threaded. I had posted an example of that in this website a while ago using Python.
Actually I never done much programming using JavaScript. Python is good enough for me.