-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
51 lines (51 loc) · 2.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
<html>
<head>
<title>Logistic Map</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="scripts.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id='header'>Logistic Map</div>
<div id='container'>
The Logistic Map is a simple model for population growth which is the canonical example of chaotic systems. Learn more <a href="http://www.kierandkelly.com/what-is-chaos/logistic-map/" target='_blank'>here</a>
<div id='eq'>x<sub>n+1</sub> = rx<sub>n</sub>(1-x<sub>n</sub>)</div>
<div>Where:</div>
<div>x<sub>n</sub> and x<sub>n+1</sub> are the percentages of the max population in the current and next iterations, respectively</div>
<div>r is the growth rate (birth rate - death rate)</div>
<div id='form'>
<form>
Iterations: <input id='iterations' type='text'>
Initial value (x<sub>0</sub>): <input id='x_0' type='text' placeholder='any value 0-1'>
Parameter (r): <input id='r' type='text' placeholder='any value 1-4'>
Animate<input id='animate' type='checkbox' checked>
<input id='submit' type='button' value='Submit'>
<div id='animation_options'>
<div id='animation_label'>Animation Controls:</div>
Speed: <input type="range" min="1" max="30" value="5" id="speed">
<i id='back' class="material-icons">fast_rewind</i>
<!-- <div id='back_tool_tip' class='tool_tip'>go back one iteration</div> -->
<i id='pause' class="material-icons" >pause</i>
<!-- <div id='pause_tool_tip' class='tool_tip'>pause/play animation</div> -->
<i id='forward' class="material-icons">fast_forward</i>
<!-- <div id='forward_tool_tip' class='tool_tip'>go foward one iteration</div> -->
</div>
</form>
</div>
<div id='errors'></div>
<div id='logmap_container'>
<div id='cobweb_label'>Cobweb Diagram</div>
<div id='y_label'>x<sub>n+1</sub></div>
<div id='y_axis'></div>
<div id='plot'>
<canvas id='logmap' height='400' width='400'>
Your browser does not support canvas
</canvas>
</div>
<div id='x_axis'></div>
<div id='x_label'>x<sub>n</sub></div>
</div>
</div>
</body>
</html>