-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
98 lines (95 loc) · 5.18 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
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Canvas and JavaScript Mandelbrot set and Julia set explorer</title>
<style>
h1 {
font-size: 1.2em;
}
h2 {
font-size: 1.0em;
}
p, div {
font-size: 0.8em;
}
address {
font-size: 0.6em;
}
</style>
</head>
<body onload="init(); mandelbrot(); julia()" onkeydown="keyCommandProcessor()">
<h1>Mandelbrot Set & Julia Set Explorer using HTML 5 Canvas element and JavaScript</h1>
<h2>written by <a href="http://mbharris.co.uk">Mike Harris</a>, based on algorithms in The Science of Fractal Images. <a
href="https://github.com/mikebharris/canvas_mandelbrot_explorer">Fork this at GitHub</a></h2>
<p>Click on the Mandelbrot set on left to see the corresponding Julia set on the right and the co-ordinates below. If
you turn <strong>Autodraw Julia Set Mode</strong> on (toggle with the A key) then the Julia Set will draw automatically just by moving the
mouse over the Mandelbrot Set. Feel free to play with the number of iterations. The higher the better the fidelity
of the drawing, but the slower it is to draw.</p>
<p>There is a Zoom function, enabled by hitting the Z key over the Mset canvas. To zoom in click the left mouse button,
to zoom out, click the right. When you're happy with the zoom window hit enter to redraw.</p>
<p><label for="method">Colouring method</label>:
<select id="method" name="method" onchange="selectMethod(); mandelbrot(); julia()">
<option value="lsm" selected="selected">Level Set Method (LSM)</option>
<option value="dem">Distance Estimator Method (DEM)</option>
<option value="bdm">Binary Decomposition Method (BDM)</option>
<option value="tdm">Trinary Decomposition Method (TDM)</option>
<option value="bdm2">Binary Decomposition Method II (BDM2)</option>
</select>
<span id="palette_chooser"><label for="palette">Palette</label>: <input type="number" id="palette" name="palette"
max="" min="0" value="0"
onchange="mandelbrot(); julia()"/></span>
<label for="iterations">Iterations</label>:
<input id="iterations" type="number" min="25" max="5000" value="100" step="25"/>
<span id="lsm-parameters">
<label for="lsm-threshold">threshold: </label>
<input id="lsm-threshold" name="lsm-threshold" value="100.00" type="number" step="100" min="1"
max="10000"/>
</span>
<span id="dem-parameters" style="display: none">
<label for="dem-threshold">threshold: </label>
<input id="dem-threshold" name="dem-threshold" value="0.2" type="number" step="0.01" min="0" max="3"/>
<label for="dem-overflow">overflow: </label>
<input id="dem-overflow" value="100000000000" type="number" step="100000000000" max="100000000000000" />
</span>
<button onclick="mandelbrot();">Redraw MSet</button>
<label for="autodraw">JSet mode: </label>
<select id="autodraw" name="autodraw">
<option value="off" selected="selected">Autodraw Julia Set Mode Off</option>
<option value="on">Autodraw Julia Set Mode On</option>
</select>
<p>
<canvas id="mset_canvas" width="640" height="480" style="float:left"
onmousemove="handleMsetMouseMove(event, this)"
onclick="handleMsetMouseClick(event, this)"
onmousedown="handleMsetMouseClick(event, this)"
oncontextmenu="event.preventDefault()"
></canvas>
<canvas id="jset_canvas" width="640" height="480"></canvas>
</p>
<p>
<label for="cx">cx</label>: <input type="text" name="cx" id="cx" value="0.0"/>
<label for="cy">cy</label>: <input type="text" name="cy" id="cy" value="0.0"/>
<button onclick="julia()">redraw julia set</button>
</p>
<p style="display: none">
<p>
mset: <label for="x_min">x_min</label> = <input type="text" value="" name="x_min" id="x_min"/>
<label for="y_min">y_min</label> = <input type="text" value="" name="x_min" id="y_min"/>
<label for="x_max">x_max</label> = <input type="text" value="" name="x_max" id="x_max"/>
<label for="y_max">y_max</label> = <input type="text" value="" name="y_max" id="y_max"/>
<button onclick="init();mandelbrot()">Reset</button>
</p>
<p style="display: none">
zoom: <label for="zoom_x">zoom_x</label> = <input type="text" value="" name="zoom_x" id="zoom_x"/>
<label for="zoom_y">zoom_y</label> = <input type="text" value="" name="zoom_y" id="zoom_y"/>
<label for="zoom_w">zoom_w</label> = <input type="text" value="" name="zoom_w" id="zoom_w"/>
<label for="zoom_h">zoom_h</label> = <input type="text" value="" name="zoom_h" id="zoom_h"/>
</p>
<p>There's also an archive of old Fractal work I did with Dan Grace back in the Eighties on the <a
href="http://mbharris.co.uk/mandlebrot-set-and-julia-set-generator-for-atari-st/">Fractal Engine archive
site</a>.</p>
<hr/>
<address>(c) 2009-2022 Mike Harris. Free software released under GNU Public Licence v2.0.</address>
<script type="application/x-javascript" src="fractal.js"></script>
</body>
</html>