-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
87 lines (77 loc) · 2.37 KB
/
index.html
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<!--
Code is based on the Escape time algorithm pseudo code at
http://en.wikipedia.org/wiki/Mandelbrot_set
-->
<html>
<h3>Click to zoom</h3>
<canvas id="canvas" width="1024" height="768">
</canvas>
<script>
(function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
function zoom(event) {
var xPos = event.x;
var yPos = event.y;
xPos -= canvas.offsetLeft;
yPos -= canvas.offsetTop;
var xSize = (xmax-xmin) * 0.4;
var ySize = (ymax-ymin) * 0.4;
var oldXmin = xmin;
var oldYmin = ymin;
xmin = (oldXmin + xPos * xDelta) - xSize / 2;
xmax = (oldXmin + xPos * xDelta) + xSize / 2;
ymin = (oldYmin + yPos * yDelta) - ySize / 2;
ymax = (oldYmin + yPos * yDelta) + ySize / 2;
drawMandelbrot();
}
canvas.addEventListener("mousedown", zoom, false);
var xmin = -2.3;
var ymin = -1.0;
var xmax = 0.8;
var ymax = 1.0;
var xDelta;
var yDelta;
drawMandelbrot = function() {
var x0 = xmin;
xDelta = (xmax-xmin) / width;
yDelta = (ymax-ymin) / height;
var x;
var y;
var iteration;
var max_iteration = 360;
var xtemp;
for (var Px = 0; Px < width; Px++) {
x0 += xDelta;
var y0 = ymin;
for (var Py = 0; Py < height; Py++) {
y0 += yDelta;
x = 0.0;
y = 0.0;
iteration = 0;
while (x*x + y*y < 4 && iteration < max_iteration)
{
xtemp = x*x - y*y + x0;
y = 2*x*y + y0;
x = xtemp;
iteration = iteration + 1;
}
if(iteration === max_iteration) {
ctx.fillStyle = "black";
} else {
var abs = Math.sqrt(x*x + y*y);
s = iteration + 1 - Math.log(Math.log(abs)) / Math.log(2.0);
ctx.fillStyle = `hsl(${s}, 50%, 50%)`;
}
ctx.fillRect(Px, Py, 1, 1);
}
}
console.log(`xmin: ${xmin}, xmax: ${xmax}, ymin: ${ymin}, ymax: ${ymax}`);
}
drawMandelbrot();
})();
</script>
</html>