Updated with goodies.
3 <title>Canvas Xaoc Client</title>
4 <script type="text/javascript">
5 function Complex(real, imag)
11 var MIN_C = new Complex(-2.2, -1.4);
12 var MAX_C = new Complex(1.0, 1.4);
18 function Result(z, iter)
24 function complex_quad(c)
26 return new Complex(Math.pow(c.real, 2) - Math.pow(c.imag, 2),
27 2.0 * c.real * c.imag);
30 function complex_quad_value(c)
32 return Math.pow(c.real, 2) + Math.pow(c.imag, 2);
35 function complex_add(c1, c2)
37 return new Complex(c1.real + c2.real, c1.imag + c2.imag);
40 function iterate(z, c)
42 z_quad = complex_quad(z);
43 return new Complex(z_quad.real + c.real, z_quad.imag + c.imag);
46 function test(c, max_iter)
49 var z = new Complex(0.0, 0.0);
50 while (complex_quad_value(z) <= 4.0
56 return new Result(z, iter);
59 function draw(iter, x, y, z)
61 var canvas = document.getElementById('mandelbrot');
62 if (canvas.getContext)
64 var ctx = canvas.getContext('2d');
71 var min_inc = new Complex(x + z, y + z);
72 var max_inc = new Complex(x - z, y - z);
73 min_c = complex_add(min_c, min_inc);
74 max_c = complex_add(max_c, max_inc);
76 var diff_c = new Complex(max_c.real - min_c.real,
77 max_c.imag - min_c.imag);
78 var width = canvas.width;
79 var height = canvas.height;
80 var dim = Math.max(width, height);
81 ctx.clearRect(0, 0, width, height);
83 for (var y = 0; y < height; y++)
85 for (var x = 0; x < width; x++)
89 var c = new Complex(min_c.real + diff_c.real
91 min_c.imag + diff_c.imag / dim * y);
92 var result = test(c, max_iter);
94 if (result.iter < max_iter)
96 var r = result.iter * 3;
97 var g = result.iter * 3;
98 var b = result.iter * 3;
99 var colour = r + "," + g + "," + b;
100 ctx.fillStyle = "rgb(" + colour + ")";
101 ctx.fillRect(x, y, 1, 1);
109 <style type="text/css">
110 canvas { border: 0px solid black; }
111 body { background: black; }
114 <body onload="draw(0, 0, 0, 0);">
115 <canvas id="mandelbrot" width="800" height="400"></canvas>
117 <button onclick="draw(0, -1, 0, 0);">Left</button>
118 <button onclick="draw(0, 1, 0, 0);">Right</button>
119 <button onclick="draw(0, 0, -1, 0)">Up</button>
120 <button onclick="draw(0, 0, 1, 0);">Down</button>
121 <button onclick="draw(0, 0, 0, 1);">In</button>
122 <button onclick="draw(0, 0, 0, -1);">Out</button>
123 <button onclick="draw(10, 0, 0, 0);">Inc Quality</button>
124 <button onclick="draw(-10, 0, 0, 0);">Dec Quality</button>