-
Notifications
You must be signed in to change notification settings - Fork 0
/
projectiles.html
119 lines (92 loc) · 3.91 KB
/
projectiles.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/raphael.js"></script>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/scale.js"></script>
<script src="js/projectiles.js"></script>
<script src="js/placeholders.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/nav.css">
</head>
<body>
<div id="navbar">
<ul>
<li><a href="index.html">Index</a></li>
<li><a href="linearmotion.html">Linear motion</a><li>
<li><a style="color:black; background-color:#A0A0A0;" href="projectiles.html">Projectiles</a><li>
<li><a href="relative.html">Relative velocity</a></li>
<li><a href="connected.html">Connected particles</a></li>
<li><a href="circular-shm.html">Circular and SHM</a></li>
<li><a href="collisions.html">Collisions</a></li>
</ul>
</div>
<div id="navselect">
<select id="navselectmenu" onchange="location = this.options[this.selectedIndex].value;">
<option value="projectiles.html">Projectiles</option>
<option value="linearmotion.html">Linear Motion</option>
<option value="relative.html">Relative Velocity</option>
<option value="connected.html">Connected Particles</option>
<option value="circular-shm.html">Circular and SHM</option>
<option value="collisions.html">Collisions</option>
<option value="index.html">Index</option>
</select>
</div>
<div style="position:absolute; width:165px; top:70px;">
<!-- INITIAL SPEED FIELD -->
<input id="u" type="text" placeholder="Initial speed u > 0" style = "float:left;width:87.5%;" autocomplete="off"/> </br>
<div style="height:5px;"></div>
<!-- PROJECTILE ANGLE FIELD -->
<input id="angle" type="text" placeholder="Angle 90 ≥ α ≥ 0" style = "float:left;width:87.5%;" autocomplete="off"/> </br>
<div style="height:5px;"></div>
<hr style = "float:left; width:85%;">
</br>
<!-- INCLINE CHECK BOX -->
<label>Incline plane</label>
<input id = "isIncline" type="checkbox" onclick="inclineChecked()" autocomplete="off"></br>
<div style="height:5px;"></div>
<!-- INCLINE ANGLE FIELD -->
<input id="inclineAngle" type="text" placeholder="Incline angle 90 > Θ > 0" style = "float:left;width:87.5%;" autocomplete="off"/> </br>
<div style="height:5px;"></div>
<div style="height:5px;"></div>
<div>or</div>
<div style="height:5px;"></div>
<!-- OFF GROUND CHECK BOX -->
<label>Off ground</label>
<input id = "offGround" type="checkbox" onclick="offgroundChecked()" autocomplete="off"></br>
<div style="height:5px;"></div>
<!-- START HEIGHT FIELD -->
<input id="startHeight" type="text" placeholder="Starting height > 0" style = "float:left;width:87.5%;" autocomplete="off"/> </br>
<div style="height:5px;"></div>
<hr style = "float:left; width:85%;">
</br>
<!-- RUN BUTTON -->
<button onclick="run()" type="button">Run simulation</button> </br>
<div style="height:5px;"></div>
<!-- STOP BUTTON -->
<button onclick="stopSimulation()" type="button">Stop simulation</button>
<div style="height:5px;"></div>
<!-- CLEAR BUTTON -->
<button onclick="clearInput()" type="button">Clear input</button>
<div style="height:5px;"></div>
<!-- HELP BUTTON -->
<button onclick="showHelp()" type="button">Help</button>
<div style="height:5px;"></div>
</div>
<!-- space for the graphics panel -->
<div id="graphics_panel" style="position:absolute; left:165px;width:600px;top:70px;"></div>
<!-- real time info relevant to the simulation -->
<div id ="info_pane" style="position:absolute;left:770px;width:250px;top:70px;">
<div id="ux">Initial x velocity:</div>
<div id="uy">Initial y velocity:</div>
<div id="vx">Current x velocity:</div>
<div id="vy">Current y velocity:</div>
<div id="sx">Current x position:</div>
<div id="sy">Current y position:</div>
<div id="range">Max range:</div>
<div id="height">Max height:</div>
<div id="tof">Time of flight:</div>
<div id="scale">Scale:</div>
</div>
</body>
</html>