-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (117 loc) · 4 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
<!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">
<title>Mandelbrot</title>
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="flex-container">
<form id="settings-menu">
<h1>Mandelbrot</h1>
<h2>Take Control</h2>
<p id="help-button">Help and keyboard shortcut <h></p>
<div class="flex-container inputs">
<p>Center
</p>
<div class="icon">
<i id="center-reset" class="fas fa-backspace"></i>
</div>
<input type="number" id="x-input" min="-2" max="2" step="0.000000000000000001">
<input type="number" id="y-input" min="-2" max="2" step="0.000000000000000001">
</div>
<div class="flex-container inputs">
<p>Max Iterations
</p>
<div class="icon">
<i id="max-iterations-reset" class="fas fa-backspace"></i>
</div>
<input type="number" id="max-iterations-input">
</div>
<div class="flex-container inputs">
<p>Bounds
</p>
<div class="icon">
<i id="bounds-reset" class="fas fa-backspace"></i>
</div>
<input type="number" id="bounds-input" min="1" max="100000" step="0.1">
</div>
<div class="flex-container inputs">
<p>Speed
</p>
<div class="icon">
<i id="speed-invert" class="fas fa-exchange-alt"></i>
<i id="speed-reset" class="fas fa-backspace"></i>
</div>
<input type="number" id="speed-input" step="0.000000000000000001">
</div>
<div class="flex-container inputs">
<p>Apply Zoom
</p>
<div class="icon">
<i id="zoom-reset" class="fas fa-backspace"></i>
</div>
<input type="number" id="zoom-input" min="1" max="10000000000000000" step="1">
</div>
<div class="flex-container inputs">
<p>Web Workers
</p>
<div class="icon">
<i id="worker-count-reset" class="fas fa-backspace"></i>
</div>
<input type="number" id="worker-count-input" min="2" max="16" step="1">
</div>
<div class="flex-container inputs">
<p>Color Scheme
</p>
<select id="color-scheme-input">
<option value="cottonCandy">Cotton Candy</option>
<option value="glow">Glow</option>
</select>
</div>
<div class="flex-container color inputs">
<div class="icon">
<i id="color-reset" class="fas fa-backspace"></i>
</div>
<input type="color" id="color-1-input">
<input type="color" id="color-2-input">
<input type="color" id="color-3-input">
<input type="color" id="color-4-input">
</div>
<div class="flex-container margin-top">
<input class="button" type="submit" id="submit-button" value="Draw" />
<input class="button" type="submit" id="animate-button" value="Animate" />
<input class="button" type="reset" id="reset-button" value="Reset" />
</div>
</form>
<div class="radial">
<canvas id="canvas"></canvas>
<p id="error-message"></p>
</div>
</div>
<div class="info-box">
<p>For a better performance, it is recommended to increases the amount of Web Workers. This will enable the
javascript engine to utilize multiple cores on your cpu. Any amount above your actual amount of CPU threads
will have no effect.</p>
<p>You can see the full project on github at <a
href="https://github.com/cloutierMat/interactable-mandelbrot.git"
target="_blank">cloutierMat/interactable-mandelbrot.git</a></p>
</div>
<div hidden id="help-modal">
<div id="help-modal-body">
<h2>
HELP!
</h2>
<p>A Mandelbrot set animation create in javascript only, using the canvas. I also take advantage of
webworkers to improve computational performance.</p>
</div>
</div>
<script type="module" src="./src/script.js"></script>
</body>
</html>