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