sawine@7
|
1 |
<html>
|
sawine@7
|
2 |
<head>
|
sawine@7
|
3 |
<title>Canvas Xaoc Client</title>
|
sawine@7
|
4 |
<script type="text/javascript">
|
sawine@7
|
5 |
function Complex(real, imag)
|
sawine@7
|
6 |
{
|
sawine@7
|
7 |
this.real = real;
|
sawine@7
|
8 |
this.imag = imag;
|
sawine@7
|
9 |
}
|
sawine@7
|
10 |
|
sawine@7
|
11 |
var MIN_C = new Complex(-2.2, -1.4);
|
sawine@7
|
12 |
var MAX_C = new Complex(1.0, 1.4);
|
sawine@7
|
13 |
var min_c = MIN_C;
|
sawine@7
|
14 |
var max_c = MAX_C;
|
sawine@7
|
15 |
var max_iter = 100;
|
sawine@7
|
16 |
var zoom = 0.1;
|
sawine@7
|
17 |
|
sawine@7
|
18 |
function Result(z, iter)
|
sawine@7
|
19 |
{
|
sawine@7
|
20 |
this.z = z;
|
sawine@7
|
21 |
this.iter = iter;
|
sawine@7
|
22 |
}
|
sawine@7
|
23 |
|
sawine@7
|
24 |
function complex_quad(c)
|
sawine@7
|
25 |
{
|
sawine@7
|
26 |
return new Complex(Math.pow(c.real, 2) - Math.pow(c.imag, 2),
|
sawine@7
|
27 |
2.0 * c.real * c.imag);
|
sawine@7
|
28 |
}
|
sawine@7
|
29 |
|
sawine@7
|
30 |
function complex_quad_value(c)
|
sawine@7
|
31 |
{
|
sawine@7
|
32 |
return Math.pow(c.real, 2) + Math.pow(c.imag, 2);
|
sawine@7
|
33 |
}
|
sawine@7
|
34 |
|
sawine@7
|
35 |
function complex_add(c1, c2)
|
sawine@7
|
36 |
{
|
sawine@7
|
37 |
return new Complex(c1.real + c2.real, c1.imag + c2.imag);
|
sawine@7
|
38 |
}
|
sawine@7
|
39 |
|
sawine@7
|
40 |
function iterate(z, c)
|
sawine@7
|
41 |
{
|
sawine@7
|
42 |
z_quad = complex_quad(z);
|
sawine@7
|
43 |
return new Complex(z_quad.real + c.real, z_quad.imag + c.imag);
|
sawine@7
|
44 |
}
|
sawine@7
|
45 |
|
sawine@7
|
46 |
function test(c, max_iter)
|
sawine@7
|
47 |
{
|
sawine@7
|
48 |
var iter = 0;
|
sawine@7
|
49 |
var z = new Complex(0.0, 0.0);
|
sawine@7
|
50 |
while (complex_quad_value(z) <= 4.0
|
sawine@7
|
51 |
&& iter < max_iter)
|
sawine@7
|
52 |
{
|
sawine@7
|
53 |
z = iterate(z, c);
|
sawine@7
|
54 |
iter++;
|
sawine@7
|
55 |
}
|
sawine@7
|
56 |
return new Result(z, iter);
|
sawine@7
|
57 |
}
|
sawine@7
|
58 |
|
sawine@7
|
59 |
function draw(iter, x, y, z)
|
sawine@7
|
60 |
{
|
sawine@7
|
61 |
var canvas = document.getElementById('mandelbrot');
|
sawine@7
|
62 |
if (canvas.getContext){
|
sawine@7
|
63 |
var ctx = canvas.getContext('2d');
|
sawine@7
|
64 |
zoom += z / 10.0;
|
sawine@7
|
65 |
x = x / 30.0 / zoom;
|
sawine@7
|
66 |
y = y / 30.0 / zoom;
|
sawine@7
|
67 |
var min_inc = new Complex(x + zoom, y + zoom);
|
sawine@7
|
68 |
var max_inc = new Complex(x - zoom, y - zoom);
|
sawine@7
|
69 |
min_c = complex_add(min_c, min_inc);
|
sawine@7
|
70 |
max_c = complex_add(max_c, max_inc);
|
sawine@7
|
71 |
max_iter += iter;
|
sawine@7
|
72 |
var diff_c = new Complex(max_c.real - min_c.real,
|
sawine@7
|
73 |
max_c.imag - min_c.imag);
|
sawine@7
|
74 |
var width = canvas.width;
|
sawine@7
|
75 |
var height = canvas.height;
|
sawine@7
|
76 |
var dim = Math.max(width, height);
|
sawine@7
|
77 |
ctx.clearRect(0, 0, width, height);
|
sawine@7
|
78 |
|
sawine@7
|
79 |
for (var y = 0; y < height; y++)
|
sawine@7
|
80 |
{
|
sawine@7
|
81 |
for (var x = 0; x < width; x++)
|
sawine@7
|
82 |
{
|
sawine@7
|
83 |
if (true)
|
sawine@7
|
84 |
{
|
sawine@7
|
85 |
var c = new Complex(min_c.real + diff_c.real
|
sawine@7
|
86 |
/ dim * x,
|
sawine@7
|
87 |
min_c.imag + diff_c.imag / dim * y);
|
sawine@7
|
88 |
var result = test(c, max_iter);
|
sawine@7
|
89 |
|
sawine@7
|
90 |
if (result.iter < max_iter)
|
sawine@7
|
91 |
{
|
sawine@7
|
92 |
var r = result.iter * 3;
|
sawine@7
|
93 |
var g = result.iter * 3;
|
sawine@7
|
94 |
var b = result.iter * 3;
|
sawine@7
|
95 |
var colour = r + "," + g + "," + b;
|
sawine@7
|
96 |
ctx.fillStyle = "rgb(" + colour + ")";
|
sawine@7
|
97 |
ctx.fillRect(x, y, 1, 1);
|
sawine@7
|
98 |
}
|
sawine@7
|
99 |
}
|
sawine@7
|
100 |
}
|
sawine@7
|
101 |
}
|
sawine@7
|
102 |
}
|
sawine@7
|
103 |
}
|
sawine@7
|
104 |
</script>
|
sawine@7
|
105 |
<style type="text/css">
|
sawine@7
|
106 |
canvas { border: 0px solid black; }
|
sawine@7
|
107 |
body { background: black; }
|
sawine@7
|
108 |
</style>
|
sawine@7
|
109 |
</head>
|
sawine@7
|
110 |
<body onload="draw(0, 0, 0, 0);">
|
sawine@7
|
111 |
<canvas id="mandelbrot" width="800" height="400"></canvas>
|
sawine@7
|
112 |
<form action="canvas_client.html" method="post">
|
sawine@7
|
113 |
<input type="button" value="left"
|
sawine@7
|
114 |
onclick="draw(0, -1, 0, 0);">
|
sawine@7
|
115 |
<input type="button" value="right"
|
sawine@7
|
116 |
onclick="draw(0, 1, 0, 0);">
|
sawine@7
|
117 |
<input type="button" value="up"
|
sawine@7
|
118 |
onclick="draw(0, 0, -1, 0);">
|
sawine@7
|
119 |
<input type="button" value="down"
|
sawine@7
|
120 |
onclick="draw(0, 0, 1, 0);">
|
sawine@7
|
121 |
<input type="button" value="in"
|
sawine@7
|
122 |
onclick="draw(10, 0, 0, 1);">
|
sawine@7
|
123 |
<input type="button" value="out"
|
sawine@7
|
124 |
onclick="draw(-10, 0, 0, -1);">
|
sawine@7
|
125 |
</form>
|
sawine@7
|
126 |
|
sawine@7
|
127 |
</body>
|
sawine@7
|
128 |
</html>
|
sawine@7
|
129 |
|
sawine@7
|
130 |
|