-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmandelbrot.html
89 lines (71 loc) · 3.45 KB
/
mandelbrot.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
88
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> The Mandelbrot Set </title>
<link rel="stylesheet" href="style.css">
<script defer src="navbar.js"></script>
<script type="text/javascript" src="scripts/webgl_utils.js"></script>
</head>
<body>
<header>
<nav-bar></nav-bar>
</header>
<section class="main-content">
<h1> The Mandelbrot Set </h1>
<div class="javascript-mandelbrot">
<h3> The Vanilla Javascript version </h3>
<p>
Here's a standard imperative implementation of the Mandelbrot
set. This is the first thing I've programmed in JS. The
Mandelbrot set is produced by starting at 0, and iterating the
complex-valued function z_n(c) = z_{n-1}^2 + c until either a
maximum number of iterations is hit, or the magnitude of z_n
exceeds 2. Because JavaScript is an academic, funcational language,
this implementation uses a higher-order function that returns a
z_n(z) function for different values of c. The canvas element
below represents the complex plane. Dark pixels represent
choices of c where the maximum number of iterations is hit, and
we consider that point to be "in" the Mandelbrot set. Colored
points are colored by the number of iterations they take to
diverge.
</p>
<canvas id="mandelbrotCanvas" width="512" height="512" style="border:1px solid #000000;"></canvas>
<div>
<script src ="scripts/complex.js"></script>
</div>
</div>
<div class="webgl-mandelbrot">
<h3> Using WebGL </h3>
<p>
Maybe one day I'll get around to enhancing the CPU JS version
above, but here is a simple WebGL explorer. Hover your mouse over
a section of the set to zoom in. The fragment shader gets uniforms
describing the canvas dimensions, as well as what subset of the
complex plane is currently in view. Using those and the fragment
coordinate, each pixel can be assigned a complex number, which is
used as c in the iteration process. That fragment can then be
colored accordingly.
</p>
<p>
After reaching the point that the image becomes noticably pixelated,
the zooming slows and eventually reverses, until the full set is in
view again. Then you can zoom in on another point.
</p>
<canvas id="webgl-mandelcanvas" width="512", height="512"
style="border:1px solid #000000;"></canvas>
<div>
<script src ="scripts/mandelbrot_webgl.js"></script>
</div>
<p>
A good next step could be to implement a big decimal type to get
better resolution, because it currently hits the limits of a
double's resolution relatively quickly. The coloring is also not
particularly pretty at this point, but for a first attempt at
shader art, I think I got what I wanted out of this little project.
</p>
</div>
</section>
</body>
</html>