-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (128 loc) · 7.74 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
<html>
<head>
<!-- Googe Charts Script - For Graphs-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- Bootstrap Style Sheets & JS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Simulation code-->
<script src="main.js"></script>
<!-- Stylesheet-->
<link rel="stylesheet" href="style.css" />
<title>Collision Simulation</title>
<style>
</style>
</head>
<body>
<div id = "playButton">
<div id="play">
<h1>Welcome to the collision simulator!</h1>
<h3>A Project by: Johnathon Slightham</h2>
<p>Visit the wiki on github for more information on how this works!</p>
<h3>To use the simulator:</h3>
<ul>
<li>Add a particle</li>
<li>Change the coefficients of friction</li>
<li>Change the collision effectiveness</li>
<li>Display velocity vectors</li>
<li>Change what the graph displays in each axis</li>
<li>View the graph below the simulation</li>
</ul>
<button onclick="main('myCanvas')" class="btn btn-primary">Run Simulation</button>
</div>
</div>
<h1>Collision Simulator</h1>
<h4>Project by Johnathon Slightham</h4>
<div class="container-fixed">
<div class="row justify-content-start">
<div class=" col-sm-12 col-md-12 col-lg-6 col-xl-7" id="quote-2-high">
<div class="card bg-light" >
<h4 class="card-header">Simulation</h4>
<p class="card-text"><center><canvas id="myCanvas" width="750" height="750" style="border: solid 2px black;">Your browser does not support HTML 5</canvas> </center></p>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 fix">
<div class="row justify-content-start" id="top-row">
<div class="col mb-3 fix">
<div class="card bg-light fix">
<h4 class="card-header mb-3">Modifiers</h4>
<p class="card-text">Coefficient of Kinetic Friction: <input type="number" value="0.00005" step="0.000001" id="fr" onchange="frChange()" class="numinput" style="width: 100px;"> <br>
<!-- Coefficient of Static Friction: <input type="number" value="0.005" step="0.000001" id="sfr" onchange="sfrChange()" class="numinput"> <br> /!-->
Collision Effectiveness (100% most efficient): <input type="number" id="effe" value="85" class="numinput" onchange="effeChange()">% <br>
<label class="checkbox-inline"><input type="checkbox" value="" id="drawvelocity" name="drawvelocity" > Draw Velocity Vectors</label>
</p>
</div>
<br>
<div class="card bg-light">
<h4 class="card-header">Add Particles</h4>
<p class="card-text">
<form action="#" onsubmit="addParticle(); return false" name="add" id="add" style="padding-left: 15px; padding-right: 15px; margin-top: -20;">
<div class="form-group">
<label for="mass">Mass</label>
<input type="number" class="form-control" id="mass" placeholder="Enter Mass">
</div>
<div class="form-group">
<label for="mass">X-Velocity</label>
<input type="number" class="form-control" id="xvel" placeholder="Enter Starting X-Velocity">
</div>
<div class="form-group">
<label for="mass">Y-Velocity</label>
<input type="number" class="form-control" id="yvel" placeholder="Enter Starting Y-Velocity">
</div>
<input type="submit" class="btn btn-primary" value="Add Particle">
</form>
</p>
</div>
<br>
<div class="card bg-light">
<h4 class="card-header">Graph Editor</h4>
<p class="card-text">
<form style="padding-left: 15px; padding-right: 15px; margin-top: -20;">
<div class="form-group">
<label for="graphx">Graph X-Axis</label>
<select class="form-control" id="graphx">
</select>
</div>
<div class="form-group">
<label for="graphy">Graph Y-Axis</label>
<select class="form-control" id="graphy">
</select>
</div>
</form>
</p>
</div>
</div>
<div class="row justify-content-start" id="bottom-row">
<div class="col mb-6">
</div>
</div>
</div>
</div>
</div>
<br>
<div class="card bg-light" style="max-width: 75%;">
<h4 class="card-header mb-3">Placed Particles</h4>
<p class="card-text">
<table id="particles" class="table table-striped">
<tr style="background-color: #D9EDF7;">
<th>Mass</th>
<th>X Velocity</th>
<th>Y Velocity</th>
<th>X Acceleration</th>
<th>Y Acceleration</th>
</tr>
</table>
<h5 class="card-title" style="padding-left: 15px;">Total Kinetic Energy: <span id="ek"></span> J</h5>
</p>
</div>
<br>
<div class="card bg-light" style="max-width: 75%;">
<h4 class="card-header mb-3">Graph (Updates Every 100s)</h4>
<p class="card-text">
<div id="curve_chart"></div>
</p>
</div>
</body>
</html>