-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (130 loc) · 6.28 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Ken Halbert's JavaScript Buddhabrot Renderer</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12 control-panel">
<div class="row panel panel-body panel-default">
<div class="controls col-md-6 col-xs-12">
<h2>Settings</h2>
<div class="form-group threads">
<label for="threads" class="control-label">Web Workers</label>
<input type="text" class="form-control" id="threads" value="1" placeholder="Number of web workers">
</div>
<div class="form-group threshold">
<label for="threshold" class="control-label">Sequence Iteration Limit</label>
<input type="text" class="form-control" id="threshold" value="250" placeholder="Sequence iteration limit">
</div>
<h4>Colors</h4>
<div class="row form-horizontal colors">
<div class="col-xs-12">
<div class="form-group r">
<div class="col-xs-3">
<label for="r" class="control-label">R</label>
</div>
<div class="col-xs-9">
<input type="text" class="form-control" id="r" value="255" placeholder="0-255">
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group g">
<div class="col-xs-3">
<label for="g" class="control-label">G</label>
</div>
<div class="col-xs-9">
<input type="text" class="form-control" id="g" value="255" placeholder="0-255">
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group b">
<div class="col-xs-3">
<label for="b" class="control-label">B</label>
</div>
<div class="col-xs-9">
<input type="text" class="form-control" id="b" value="255" placeholder="0-255">
</div>
</div>
</div>
</div>
</div>
<div class="stats col-md-6 col-xs-12">
<h2>Stats</h2>
<div class="form-group runtime">
<label>Runtime</label>
<p class="form-control-static">00:00:00</p>
</div>
<div class="form-group highest-density">
<label>Highest Density</label>
<p class="form-control-static">0</p>
</div>
</div>
</div>
<button class="btn btn-primary" id="start">Start</button>
</div>
<div class="col-md-8 col-xs-12 canvas-container">
<div class="loading-message">
<span class="h2">Initializing canvas, please wait…</span>
</div>
<canvas id="canvas" width="1800" height="1800">
<!-- TODO put fallback image here -->
</canvas>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<h2>How does it work?</h2>
<p>Click "start" to start/stop the renderer, and use the settings panel to configure it.</p>
<ul>
<li>Increasing the number of web workers will speed up the render; 16 is a good number for most modern machines</li>
<li>The higher the sequence iteration limit, the more detailed the image will be. Render time increases significantly as the sequence iteration limit increases</li>
<li>Change the color of the image with the RGB fields</li>
</ul>
<p>With the default settings, you should let the renderer run for ten to fifteen minutes to get a high-quality image.</p>
</div>
</div>
<div class="row what-is">
<div class="col-xs-12">
<h2>What is a buddhabrot?</h2>
<p>A buddhabrot (so-called because of its resemblance to depictions of Gautama Buddha in art) is a computer-generated image rendered by plotting points that <strong>are not</strong> part of the Mandelbrot set on the complex plane. You can read more about the image itself <a href="https://en.wikipedia.org/wiki/Buddhabrot">here</a>. The algorithm is as follows:</p>
<ol>
<li>Pick a point at random from the region of the complex plane being rendered into</li> <!-- TODO what region? It's specific. -->
<li>
Using the random complex number chosen as <i>c</i> in the sequence z(n + 1) = z(n)^2 + c, calculate sequence members until
one of the following happens:
<ul>
<li>One of the generated sequence members falls outside of a predetermined region on the complex plane</li>
<li>A maximum number of sequence members are calculated without any of them falling outside of the region</li>
</ul>
</li>
<li>If the sequence did escape the region on the complex plane, all generated sequence members are plotted on a density plot</li>
<li>An image is rendered from the density plot, with each pixel representing a cell in the density plot (brighter pixels indicate a higher density)</li>
</ol>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="public/main.js"></script>
</body>
</html>