-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathattractor.html
81 lines (81 loc) · 4.08 KB
/
attractor.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Lorenz system with flot.js</title>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<link rel="stylesheet" href="jquery-ui/css/ui-lightness/jquery-ui-1.9.2.custom.min.css" />
<link rel="stylesheet" href="./css/attractor.css" />
<script language="javascript" type="text/javascript" src="./flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./flot/jquery.flot.js"></script>
<script src="jquery-ui/js/jquery-ui-1.9.2.custom.min.js"></script>
<script data-main="js/main" src="js/require.js"></script>
</head>
<body>
<div id="wrapper">
<div id="column1">
<h2 class="topHeader">Lorenz system with flot.js.</h2>
<div id="chartWrapper"><div id="chart"></div></div>
</div>
<div id="column2">
<div class="topHeader"><h2>Parameters to the Lorenz Equations</h2></div>
<div class="row">
<div class="sliderText">sigma: <input id="sigma" type="text" class="sliderInput"></div>
<div id="sigmaSlider" class="slider"></div>
</div>
<div class="row">
<div class="sliderText">rho: <input id="rho" type="text" class="sliderInput"></div>
<div id="rhoSlider" class="slider"></div>
</div>
<div class="row">
<div class="sliderText">beta: <input id="beta" type="text" class="sliderInput"></div>
<div id="betaSlider" class="slider"></div>
</div>
<div class="row">
<h2>Randomise initial point</h2>
</div>
<div class="row">
<div class="sliderText">variation: <input id="ranVary" type="text" class="sliderInput"></div>
<div id="ranVarySlider" class="slider"></div>
</div>
<div class="row">
<div class="sliderText">spread: <input id="ranSpread" type="text" class="sliderInput"></div>
<div id="ranSpreadSlider" class="slider"></div>
</div>
<div class="row">
<p>Randomise on restart: <input id="randomise" type="checkbox" checked="yes"></p>
</div>
<div class="row">
<p>
<button id="restart" type="button">Restart</button>
<button id="resetParms" type="button">Reset Parameters</button>
<button id="pause" type="text">Pause</button>
<button id="resetAxes" type="button">Reset Axes</button>
</p>
</div>
<div class="row">
<h2>Other controls</h2>
</div>
<div class="row">
<div class="sliderText">zoom: <input id="zoom" type="text" class="sliderInput"></div>
<div id="zoomSlider" class="slider"></div>
</div>
<div class="row">
<p>Refresh period (ms): <input id="updateInterval" type="text" class="right"></p>
</div>
<div class="row">
<p>Number of series: <input id="numSeries" type="text" class="right"></p>
</div>
<div class="row">
<p>Points in series: <input id="seriesLen" type="text" class="right"></p>
</div>
<div class="row">
<p>To rotate the plot in 3D space, just drag or Shift + drag on the chart grid. Press 'Reset Axes' to reset.</p>
<p>If you pause the plot, then change the parameter sliders, the plot is redrawn from the start in real time.</p>
<p>To test with multiple series, try setting 'variation' to about 20, 'spread' to about 0.2, and 'Number of series' to 2, then press 'Restart'.</p>
<p>Another nice effect is to set 'Points in series' to 10, 'Number of series' to 20, any value of 'variation' and a low value of 'spread' (<1).</p>
<p>For background on the equations, see <a href="http://en.wikipedia.org/wiki/Lorenz_system">Wikipedia</a>. The code for this demonstration is on <a href="https://github.com/highfellow/lorenz-attractor">Github</a>.</p>
</div>
</div>
</body>
</html>