1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/canvas_client.html Sat Jul 03 22:36:34 2010 +0200
1.3 @@ -0,0 +1,130 @@
1.4 +<html>
1.5 + <head>
1.6 + <title>Canvas Xaoc Client</title>
1.7 + <script type="text/javascript">
1.8 + function Complex(real, imag)
1.9 + {
1.10 + this.real = real;
1.11 + this.imag = imag;
1.12 + }
1.13 +
1.14 + var MIN_C = new Complex(-2.2, -1.4);
1.15 + var MAX_C = new Complex(1.0, 1.4);
1.16 + var min_c = MIN_C;
1.17 + var max_c = MAX_C;
1.18 + var max_iter = 100;
1.19 + var zoom = 0.1;
1.20 +
1.21 + function Result(z, iter)
1.22 + {
1.23 + this.z = z;
1.24 + this.iter = iter;
1.25 + }
1.26 +
1.27 + function complex_quad(c)
1.28 + {
1.29 + return new Complex(Math.pow(c.real, 2) - Math.pow(c.imag, 2),
1.30 + 2.0 * c.real * c.imag);
1.31 + }
1.32 +
1.33 + function complex_quad_value(c)
1.34 + {
1.35 + return Math.pow(c.real, 2) + Math.pow(c.imag, 2);
1.36 + }
1.37 +
1.38 + function complex_add(c1, c2)
1.39 + {
1.40 + return new Complex(c1.real + c2.real, c1.imag + c2.imag);
1.41 + }
1.42 +
1.43 + function iterate(z, c)
1.44 + {
1.45 + z_quad = complex_quad(z);
1.46 + return new Complex(z_quad.real + c.real, z_quad.imag + c.imag);
1.47 + }
1.48 +
1.49 + function test(c, max_iter)
1.50 + {
1.51 + var iter = 0;
1.52 + var z = new Complex(0.0, 0.0);
1.53 + while (complex_quad_value(z) <= 4.0
1.54 + && iter < max_iter)
1.55 + {
1.56 + z = iterate(z, c);
1.57 + iter++;
1.58 + }
1.59 + return new Result(z, iter);
1.60 + }
1.61 +
1.62 + function draw(iter, x, y, z)
1.63 + {
1.64 + var canvas = document.getElementById('mandelbrot');
1.65 + if (canvas.getContext){
1.66 + var ctx = canvas.getContext('2d');
1.67 + zoom += z / 10.0;
1.68 + x = x / 30.0 / zoom;
1.69 + y = y / 30.0 / zoom;
1.70 + var min_inc = new Complex(x + zoom, y + zoom);
1.71 + var max_inc = new Complex(x - zoom, y - zoom);
1.72 + min_c = complex_add(min_c, min_inc);
1.73 + max_c = complex_add(max_c, max_inc);
1.74 + max_iter += iter;
1.75 + var diff_c = new Complex(max_c.real - min_c.real,
1.76 + max_c.imag - min_c.imag);
1.77 + var width = canvas.width;
1.78 + var height = canvas.height;
1.79 + var dim = Math.max(width, height);
1.80 + ctx.clearRect(0, 0, width, height);
1.81 +
1.82 + for (var y = 0; y < height; y++)
1.83 + {
1.84 + for (var x = 0; x < width; x++)
1.85 + {
1.86 + if (true)
1.87 + {
1.88 + var c = new Complex(min_c.real + diff_c.real
1.89 + / dim * x,
1.90 + min_c.imag + diff_c.imag / dim * y);
1.91 + var result = test(c, max_iter);
1.92 +
1.93 + if (result.iter < max_iter)
1.94 + {
1.95 + var r = result.iter * 3;
1.96 + var g = result.iter * 3;
1.97 + var b = result.iter * 3;
1.98 + var colour = r + "," + g + "," + b;
1.99 + ctx.fillStyle = "rgb(" + colour + ")";
1.100 + ctx.fillRect(x, y, 1, 1);
1.101 + }
1.102 + }
1.103 + }
1.104 + }
1.105 + }
1.106 + }
1.107 + </script>
1.108 + <style type="text/css">
1.109 + canvas { border: 0px solid black; }
1.110 + body { background: black; }
1.111 + </style>
1.112 + </head>
1.113 + <body onload="draw(0, 0, 0, 0);">
1.114 + <canvas id="mandelbrot" width="800" height="400"></canvas>
1.115 + <form action="canvas_client.html" method="post">
1.116 + <input type="button" value="left"
1.117 + onclick="draw(0, -1, 0, 0);">
1.118 + <input type="button" value="right"
1.119 + onclick="draw(0, 1, 0, 0);">
1.120 + <input type="button" value="up"
1.121 + onclick="draw(0, 0, -1, 0);">
1.122 + <input type="button" value="down"
1.123 + onclick="draw(0, 0, 1, 0);">
1.124 + <input type="button" value="in"
1.125 + onclick="draw(10, 0, 0, 1);">
1.126 + <input type="button" value="out"
1.127 + onclick="draw(-10, 0, 0, -1);">
1.128 + </form>
1.129 +
1.130 + </body>
1.131 +</html>
1.132 +
1.133 +