-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (64 loc) · 3.15 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Online Logistic Map</title>
<meta name = "viewport" content = "user-scalable = no">
<link rel="stylesheet" href="res/main.css">
<script src="enable-threads.js"></script>
<script src="build/main.js" defer></script>
</head>
<body>
<noscript>
<div class="warning">JavaScript must be enabled to use the Online Logistic Map.</div>
</noscript>
<main>
<div class="panel" id="main-panel">
<div class="panel" id="output-panels">
<div class="panel row" id="same-axis-plots-panel">
<div class="panel" id="plot-panel">
<div class="panel-label"><p class="label-text">The integration of the function at the specified r</p></div>
<canvas class="canvas left" id="canvas-plot"></canvas>
</div>
<div class="panel" id="logistic-map-panel">
<canvas class="canvas right" id="canvas-logistic-map"></canvas>
<canvas class="canvas right" id="canvas-logistic-map-overlay"></canvas>
<div class="progressbar" id="progressbar-logistic-map">
<label id="label-progressbar-logistic-map" for="progressbar-logistic-map">Initializing...</label>
<progress id="progress-logistic-map" value="0" max="0"></progress>
</div>
<div class="panel-label"><p class="label-text">Map of the function at all r <span class="red"><strong>(Click and drag on the graph to change r!)</strong></span></p></div>
</div>
</div>
<div class="panel grow" id="graph-panel">
<div class="panel-label"><p class="label-text">The function at the specified r</p></div>
<canvas class="canvas" id="canvas-graph"></canvas>
</div>
<div class="panel grow" id="waveform-panel">
<div class="panel-label"><p class="label-text">The audio output at the specified r</p></div>
<canvas class="canvas" id="canvas-waveform"></canvas>
</div>
</div>
<div class="panel row grow" id="ui-panel">
<div class="panel">
<div class="ui-input" id="x-input">
<label for="x">Value of x<sub>0</sub>: </label>
<input type="number" id="x" value="0.5" step="0.05">
</div>
<div class="ui-input" id="equation-input">
<label for="equation">Equation: </label>
<select name="equation" id="equation">
<option value="logistic">x<sub>n+1</sub> = rx<sub>n</sub>(1-x<sub>n</sub>)</option>
<option value="exponential">x<sub>n+1</sub> = rx<sub>n</sub>e^x<sub>n</sub></option>
<option value="gamma">x<sub>n+1</sub> = r / gamma(x<sub>n</sub>)</option>
</select>
</div>
</div>
<div class="panel" id="recalculate-panel">
<button id="recalculate-button">Recalculate!</button>
</div>
</div>
</div>
</main>
</body>
</html>