169 lines
5.0 KiB
HTML
169 lines
5.0 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<!-- Googe Charts Script - For Graphs-->
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
|
|
<script src="main.js"></script>
|
|
<title>Collision Simulation</title>
|
|
<style>
|
|
body{
|
|
font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
h1, h4{
|
|
padding-bottom: none;
|
|
padding-top: none;
|
|
}
|
|
|
|
table, th, td, tr{
|
|
border: 2px solid black;
|
|
}
|
|
|
|
.wrapper {
|
|
overflow:hidden;
|
|
}
|
|
|
|
.wrapper div {
|
|
min-height: 200px;
|
|
padding: 10px;
|
|
}
|
|
#one {
|
|
background-color: white;
|
|
float: left;
|
|
margin-right: 10px;
|
|
width: 58%;
|
|
border-radius: 15px;
|
|
margin-bottom: 25px;
|
|
}
|
|
#two {
|
|
background-color: white;
|
|
overflow:hidden;
|
|
margin: 0px;
|
|
border-radius: 15px;
|
|
min-height: 20%;
|
|
width:500px;
|
|
}
|
|
|
|
@media screen and (max-width: 400px) {
|
|
#one {
|
|
float: none;
|
|
margin-right:0;
|
|
width:auto;
|
|
border:0;
|
|
border-bottom:2px solid #000;
|
|
}
|
|
}
|
|
.numinput{
|
|
width:15%;
|
|
}
|
|
#playButton {
|
|
position: fixed; /* Sit on top of the page content */
|
|
display: block; /* Hidden by default */
|
|
width: 100%; /* Full width (cover the whole page) */
|
|
height: 100%; /* Full height (cover the whole page) */
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
|
|
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
|
|
cursor: pointer; /* Add a pointer on hover */
|
|
}
|
|
#play{
|
|
color: white;
|
|
text-align: center;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
border: none;
|
|
}
|
|
|
|
table td, table th {
|
|
border: 1px solid #ddd;
|
|
padding: 2px;
|
|
}
|
|
|
|
table tr{background-color: #f2f2f2;}
|
|
|
|
table th {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
text-align: left;
|
|
background-color: #5bc0de;
|
|
color: white;
|
|
}
|
|
|
|
</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 with the form on the right</li>
|
|
<li>Change the coefficients of friction on the form to the right</li>
|
|
<li>Change the collision effectiveness on the form to the right</li>
|
|
<li>View the graph below the simulation</li>
|
|
<li>Change what the graph displays in each axis</li>
|
|
</ul>
|
|
<button onclick="main('myCanvas')" style="width: 20%; height: 5%; border-radius: 10px; background-color:#0275d8; border: none; color: white;">Run Simulation</button>
|
|
</div>
|
|
</div>
|
|
<h1>Collision Simulator</h1>
|
|
<h4>Project by Johnathon Slightham</h3>
|
|
<div class="wrapper">
|
|
|
|
<div id="one">
|
|
<center>
|
|
<canvas id="myCanvas" width="750" height="750" style="border: solid 2px black;">Your browser does not support HTML 5</canvas><br>
|
|
</center>
|
|
</div>
|
|
<div id="two">
|
|
<h3>Modifiers</h3>
|
|
Coefficient of Kinetic Friction: <input type="number" value="0.00005" step="0.000001" id="fr" onchange="frChange()" class="numinput"> <br>
|
|
<!-- Coefficient of Static Friction: <input type="number" value="0.005" step="0.000001" id="sfr" onchange="sfrChange()" class="numinput"> <br> /!-->
|
|
Collision Effectiveness (100% - No energy lost): <input type="number" id="effe" value="85" class="numinput" onchange="effeChange()">% <br>
|
|
Draw Velocity Vector: <input type="checkbox" id="drawvelocity" name="drawvelocity" value="true">
|
|
<h3>Placed Particles</h3>
|
|
<table id="particles">
|
|
<tr>
|
|
<th>ID #</th>
|
|
<th>Mass</th>
|
|
<th>X Velocity</th>
|
|
<th>Y Velocity</th>
|
|
<th>X Acceleration</th>
|
|
<th>Y Acceleration</th>
|
|
</tr>
|
|
</table>
|
|
Total Kinetic Energy: <span id="ek"></span> J
|
|
<h3>Add Particles</h3>
|
|
<form action="#" onsubmit="addParticle(); return false" name="add" id="add">
|
|
Mass: <input type="number" id="mass" name="mass"> X-Velocity: <input type="number" id="xvel" name="xvel"> Y-Velocity: <input type="number" id="yvel" name="yvel"> <input type="submit" value="Add Particle">
|
|
</form>
|
|
<h3>Modify Graph</h3>
|
|
Graph X Axis:
|
|
<select id="graphx">
|
|
</select>
|
|
|
|
Graph Y Axis:
|
|
<select id="graphy">
|
|
</select>
|
|
</div>
|
|
<br>
|
|
|
|
</div>
|
|
<div id="curve_chart"></div>
|
|
</body>
|
|
|
|
|
|
|
|
</html> |