-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
88 lines (84 loc) · 4.22 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script type="module" data-plugins="transform-modules-umd" src="src/Coordinate.js"></script>
<script type="module" src="mandelbrot.js"></script>
<title>Mandelbrot Set</title>
</head>
<body>
<header>
<h1>
Kyle's Custom mandelbrot zoom
</h1>
</header>
<main>
<section id="canvas-section">
<h2>Toggle full render for max resolution!</h2>
</section>
<div class="flex-container">
<section class="toolbar flex-item item1">
<h2>Toolbar</h2>
<form>
<div>
<label for="max-iterations">Max Iterations</label>
<input type="number" min="1" max="100000" id="max-iterations" value="500" required>
</div>
<div>
<label for="zoom">Zoom In multiplier</label>
<input type="number" min="0.1" max="100" id="zoom" value="2" step="0.01" required>
</div>
<div class="slider-container">
<label for="pan-x" id="pan-x-label">Pan X:</label>
<input type="range" class="range-slider" min="0.1" max="4" id="pan-x" step="0.1" value="1">
<span id="pan-x-display">1</span>
</div>
<div class="slider-container">
<label for="pan-i" id="pan-i-label">Pan I:</label>
<input type="range" class="range-slider" min="0.1" max="4" id="pan-i" step="0.1" value="1">
<span id="pan-i-display">1</span>
</div>
<div class="checkbox-container">
<label for="full-render">Full Render</label>
<input type="checkbox" class="checkbox" id="full-render">
</div>
</form>
<p id="message-panel"></p>
</section>
<section class="flex-item item2">
<h2>Current image</h2>
<h3 id="max-iteration-display">Max iterations: </h3>
<h3 id="zoom-display">Current Zoom: </h3>
<h3 id="position-x-display"> X: __ I: __</h3>
<h3 id="position-i-display"> X: __ I: __</h3>
</section>
<section class="flex-item item3">
<h2>Controls</h2>
<p><strong>WASD</strong> -- Panning</p>
<p><strong>R</strong> -- Zoom In</p>
<p><strong>F</strong> -- Zoom Out</p>
<p><strong>Full render</strong> -- Toggle full render mode: Enable high resolution rendering. Note: You cannot pan/zoom in this mode.</p>
</section>
<section class="flex-item item4">
<h2>Info</h2>
<p>This is called the <em>Mandelbrot set</em>. It is based on the iterative equation Z = (Z<sub>n-1</sub>)<sup>2</sup> + C
The coordinates are plotted on plane where the x coordinate represents the real numbers and the y (i) axis represents the
numbers on the complex plane. The idea is that a coordinate is iterated multiple times and it is coloured based on whether
the complex numbers go towards infinity (not in the set, coloured based on the number of iterations taken) or not (in the
mandelbrot set, coloured black). For more information, click <a href="https://en.wikipedia.org/wiki/Mandelbrot_set" target="_blank">here.</a>
</p>
<iframe src="https://www.youtube.com/embed/2JUAojvFpCo" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>This video also inspired me to create this.</p>
</section>
</div>
</main>
<footer>
<h2>
Version: Omicron-0001
</h2>
</footer>
</body>
</html>