-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (154 loc) · 7.2 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Double Pendulum Simulation</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="noSupport">
<p id="noWorkerSupport">
OoPs! Your browser doesn't appear to
support <a href="https://en.wikipedia.org/wiki/Web_Workers">Web
Workers</a>, so this page won't work.
See <a href="http://caniuse.com/webworkers">http://caniuse.com/webworkers</a>
for a list of browsers that do support Web Workers.
</p>
<p id="noSVGSupport">
OoPs! Your browser doesn't appear to
support <a href="https://en.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG</a>,
so this page won't work.
See <a href="http://caniuse.com/svg-html5">http://caniuse.com/svg-html5</a>
for a list of browsers that do support SVG.
</p>
</div>
<div id="title"><a href="https://en.wikipedia.org/wiki/Double_pendulum">Double Pendulum</a></div>
<div id="controls">
<div id="controlsTitle">Initial Conditions</div>
<div id="confInput">
<form class="conditionsInput">
<label>L<sub>1</sub> <input id="l1" value="40" type="text"></label>
<label>L<sub>2</sub> <input id="l2" value="200" type="text"></label>
</form>
<form class="conditionsInput">
<label>M<sub>1</sub> <input id="m1" value="1" type="text"></label>
<label>M<sub>2</sub> <input id="m2" value="1" type="text"></label><br>
</form>
<form class="conditionsInput">
<label>θ<sub>1</sub> <input id="t1" value="179" type="text"></label>
<label>θ<sub>2</sub> <input id="t2" value="179" type="text"></label>
</form>
<form class="conditionsInput">
<label>ω<sub>1</sub> <input id="o1" value="0" type="text"></label>
<label>ω<sub>2</sub> <input id="o2" value="0" type="text"></label><br>
</form>
<form id="conditionsSubmit">
<input id="reload" value="Load new values" type="button">
</form>
</div>
<svg xmlns="http://www.w3.org/2000/svg" id="configHelpButtonSVG"
width="34px" height="34px" viewBox="-2 -2 34 34">
<g id="controlsHelpButton">
<rect rx="2" ry="2" width="30" height="30" stroke="#888" fill="#eee"></rect>
<text fill="#999" stroke="#666" font-size="28" x="8" y="26">?</text>
</g>
</svg>
<div id="controlsHelp">
<svg xmlns="http://www.w3.org/2000/svg" width="230px" height="220px">
<g transform="translate(5,5)">
<!--L_1 vertical-->
<line y2="50" stroke="black" stroke-width="2" stroke-dasharray="10,5"></line>
<!--L_2 vertical-->
<line x1="200" y1="80" x2="200" y2="130" stroke="black" stroke-width="2" stroke-dasharray="10,5"></line>
<!--theta_1 arc-->
<path d="M 0 40 A 40 40 0 0 0 37.14 14.86" fill="none" stroke="black" stroke-width="2"></path>
<!--theta_2 arc-->
<path d="M 164.78 98.96 A 40 40 0 0 0 200 120" fill="none" stroke="black" stroke-width="2"></path>
<circle r="5"></circle>
<!--omega_1 arrow-->
<!--http://stackoverflow.com/questions/12680166/how-to-use-an-arrow-marker-on-an-svg-line-element-->
<defs>
<marker id="triangle" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z"></path>
</marker>
</defs>
<line x1="200" y1="80" x2="220" y2="30" marker-end="url(#triangle)" stroke="black" stroke-width="2"></line>
<!--omega_1 label-->
<text x="190" y="40" font-size="15">ω<tspan dy="5">1</tspan></text>
<!--omega_2 arrow-->
<line x1="70" y1="150" x2="100" y2="205.71" marker-end="url(#triangle)" stroke="black" stroke-width="2"></line>
<!--omega_2 label-->
<text x="92" y="183" font-size="15">ω<tspan dy="5">2</tspan></text>
<!--L_1-->
<line stroke-width="5" stroke="#3E4BAE" x2="200" y2="80"></line>
<!--L_2-->
<line stroke-width="5" stroke="#43AE3E" x1="200" y1="80" x2="70" y2="150"></line>
<!--M_1 circle-->
<circle r="20" cx="200" cy="80" stroke="#3E4BAE" fill="#3E4BAE"></circle>
<!--M_1 label-->
<text x="188" y="82" font-size="15" stroke="#ff0" fill="#ff0">M<tspan dy="5">1</tspan></text>
<!--M_2 circle-->
<circle r="18" cx="70" cy="150" stroke="#43AE3E" fill="#43AE3E"></circle>
<!--M_2 label-->
<text x="58" y="152" font-size="15" stroke="black" fill="#555">M<tspan dy="5">2</tspan></text>
<!--theta_1 label-->
<text x="20" y="50" font-size="15">θ<tspan dy="5">1</tspan></text>
<!--theta_2 label-->
<text x="170" y="130" font-size="15">θ<tspan dy="5">2</tspan></text>
<!--L_1 label-->
<text x="100" y="30" font-size="15">L<tspan dy="5">1</tspan></text>
<!--L_2 label-->
<text x="115" y="100" font-size="15">L<tspan dy="5">2</tspan></text>
</g>
</svg>
<p>These settings define where the pendula begin the simulation.
L's are the lengths of the pendula, M's their masses, θ's
the angle from a downward vertical (measured in degrees,
positive in the counter-clockwise direction, negative in the
clockwise direction), and ω's are angular
velocities (how fast each pendulum is spinning; a non-zero value
would correspond to giving the pendulum a push when the
simulation starts).
</p>
</div><!-- end #controlsHelp -->
</div>
<div id="runControls">
<input id="startPause" value="Start" type="button">
<label>Show trail: <input id="trailCheckbox" type="checkbox"></label>
</div>
<!-- svg doesn't have the equivalent of innerHTML, so wrap the svg in a div that
does. -->
<div id="pendula">
<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700" >
<rect width="700" height="700" fill="white"></rect>
<g transform="translate(350,350) scale(1 -1)">
<polyline id="trail" stroke="black" fill="none" stroke-width="1" points=""></polyline>
<circle r="10"></circle>
<line id="line1" stroke-width="10" stroke="#3E4BAE" y2="39.99" x2="0.7"></line>
<line id="line2" stroke-width="10" stroke="#43AE3E" y2="239.96" x2="4.19" y1="39.99" x1="0.7"></line>
</g>
</svg>
</div>
<form id="getSVG">
<div id="getSVGHeader">
<input id="genSVG" value="Generate SVG of current image" type="button">
<svg xmlns="http://www.w3.org/2000/svg" id="getSVGHelpButtonSVG"
width="34px" height="34px" viewBox="-2 -2 34 34">
<g id="getSVGHelpButton">
<rect rx="2" ry="2" width="30" height="30" stroke="#888" fill="#eee"></rect>
<text fill="#999" stroke="#666" font-size="28" x="8" y="26">?</text>
</g>
</svg>
<div id="getSVGHelpText" style="top: 20px;">
<p><em>If you're not familiar with SVG you can safely ignore
this.</em>
</p>
<p>Click the button to generate an SVG snapshot of the
image currently being shown in the simulator.
</p>
</div>
</div>
<textarea id="svgText" rows="10"></textarea>
</form>
</body></html>