forked from williamedwardhahn/complexsystems24
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmandelbrot2.html
More file actions
80 lines (66 loc) · 2.28 KB
/
mandelbrot2.html
File metadata and controls
80 lines (66 loc) · 2.28 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mandelbrot Set with Zoom</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="mandelbrotCanvas"></canvas>
<script>
const canvas = document.getElementById('mandelbrotCanvas');
const ctx = canvas.getContext('2d');
const width = 1800; // Reduced for performance
const height = 1200; // Reduced for performance
let xmin = -2.4;
let xmax = 1.2;
let ymin = -1.2;
let ymax = 1.2;
const maxIter = 256;
const zoomFactor = 0.5; // Smaller values for more zoom
canvas.width = width;
canvas.height = height;
function drawMandelbrot() {
for (let ix = 0; ix < width; ix++) {
for (let iy = 0; iy < height; iy++) {
let x = map(ix, 0, width, xmin, xmax);
let y = map(iy, 0, height, ymin, ymax);
let zx = 0;
let zy = 0;
let iter = 0;
while (zx * zx + zy * zy < 4 && iter < maxIter) {
let xtemp = zx * zx - zy * zy + x;
zy = 2 * zx * zy + y;
zx = xtemp;
iter++;
}
const color = iter === maxIter ? '#000' : `hsl(0, 100%, ${iter / maxIter * 100}%)`;
ctx.fillStyle = color;
ctx.fillRect(ix, iy, 1, 1);
}
}
}
canvas.addEventListener('click', function(event) {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const clickedX = map(x, 0, width, xmin, xmax);
const clickedY = map(y, 0, height, ymin, ymax);
const dx = (xmax - xmin) * zoomFactor;
const dy = (ymax - ymin) * zoomFactor;
xmin = clickedX - dx / 2;
xmax = clickedX + dx / 2;
ymin = clickedY - dy / 2;
ymax = clickedY + dy / 2;
drawMandelbrot();
});
function map(value, start1, stop1, start2, stop2) {
return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
}
drawMandelbrot();
</script>
</body>
</html>