mostly finished
This commit is contained in:
jslightham
169
index.html
Normal file
169
index.html
Normal file
@@ -0,0 +1,169 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user