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

Mandelbrot Fractal using HTML5 Canvas. (Do not forget to change file extension to HTML after downloading it.)

JavaScript, 64 lines
 1
 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>

4 comments

Nick Jameson 11 years, 3 months ago  # | flag

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!

FB36 (author) 11 years, 3 months ago  # | flag

Thanks for catching the typo. I fixed the code and also added randomized coloring.

Nick Jameson 11 years, 3 months ago  # | flag

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.

FB36 (author) 11 years, 3 months ago  # | flag

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.

Created by FB36 on Wed, 30 Jun 2010 (MIT)
JavaScript recipes (69)
FB36's recipes (148)

Required Modules

  • (none specified)

Other Information and Tasks