jslightham/Collision-Simulator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling & bugfixes

Browse Source
This commit is contained in:
jslightham
2020-05-26 22:49:32 -04:00
parent 1875e10e60
commit f80c989af8
4 changed files with 206 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
index.html
View File

@@ -4,99 +4,21 @@
<!-- 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>
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>
@@ -106,64 +28,115 @@ table th {
<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>
<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</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>
<h4>Project by Johnathon Slightham</h4>
Graph Y Axis:
<select id="graphy">
</select>
<div class="container-fluid">
<div class="row justify-content-start">
<div class="col-xl-6 col-md-4 col-sm-4" id="quote-2-high">
<div class="card bg-light" style="min-width: 790px;">
<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-8 col-sm-8">
<div class="row justify-content-start" id="top-row">
<div class="col mb-10">
<div class="card bg-light">
<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</h4>
<p class="card-text">
<div id="curve_chart"></div>
</p>
</div>
<div id="curve_chart"></div>
</body>
</html>

23
main.js
View File

@@ -43,6 +43,8 @@ var chartX = "measurement";
var chartY = "ekt"
measurementData.push('Measurement Number');
measurementData.push(0);
var bkg = new Image();
bkg.src = "pool.jpg"
ek.push('Kientic Energy (J)');
ek.push(0);
@@ -57,7 +59,7 @@ function main(elem){
canvas = document.getElementById(elem);
ctx = canvas.getContext("2d");
table = document.getElementById("particles");
fr = document.getElementById("fr").value;
//sfr = document.getElementById("sfr").value;
@@ -78,6 +80,7 @@ function main(elem){
// The main loop function that handles each particle
function loop(){
// Set volumes of sounds according to % energy transferred
eff = document.getElementById("effe").value/100;
@@ -190,18 +193,18 @@ function loop(){
}
// Display data in the table
table.rows[i+1].cells[0].innerHTML = elem.id;
table.rows[i+1].cells[1].innerHTML = elem.m + " kg";
table.rows[i+1].cells[2].innerHTML = Math.abs(elem.vx.toPrecision(2));
table.rows[i+1].cells[3].innerHTML = Math.abs(elem.vy.toPrecision(2));
table.rows[i+1].cells[4].innerHTML = elem.ax.toPrecision(2);
table.rows[i+1].cells[5].innerHTML = elem.ay.toPrecision(2);
table.rows[i+1].cells[0].innerHTML = elem.m + " kg";
table.rows[i+1].cells[1].innerHTML = Math.abs(elem.vx.toPrecision(2));
table.rows[i+1].cells[2].innerHTML = Math.abs(elem.vy.toPrecision(2));
table.rows[i+1].cells[3].innerHTML = elem.ax.toPrecision(2);
table.rows[i+1].cells[4].innerHTML = elem.ay.toPrecision(2);
})
}
// Function to draw all particles on the canvas, and draw velocity vectors
function draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(bkg, 0, 0, canvas.width, canvas.height);
particles.forEach((elem, i) =>
{
// Draw actual particle
@@ -370,6 +373,8 @@ function addParticle(){
errMsg += "That mass is too large for this canvas! "
}else if(!form["xvel"].value || !form["yvel"].value || !form["mass"].value){
errMsg += "One or more values is not defined! "
}else if(form["xvel"].value > canvas.width - getRadius(form["mass"].value)*4 || form["yvel"].value > canvas.height - getRadius(form["mass"].value)*4){
errMsg += "The velocity of the particle you added is too large for that mass and this canvas size! "
}
// If no errors, add rows to the table and insert the particle into the array
else{
@@ -408,7 +413,6 @@ function addParticle(){
table.rows[table.rows.length -1].insertCell();
table.rows[table.rows.length -1].insertCell();
table.rows[table.rows.length -1].insertCell();
table.rows[table.rows.length -1].insertCell();
table.rows[table.rows.length -1].insertCell();
particles.push(new Particle(n, tx, ty, xv, yv, parseInt(form["mass"].value)));
}else{
@@ -532,6 +536,9 @@ function frChange(){
if(element.value >= 1){
alert("The coefficient of kinetic friction cannot be more than 1 for a billiard ball!");
element.value = fr;
}else if(element.value < 0){
alert("The coefficient of kinetic friction for a billiard ball cannot be negative!");
element.value = fr;
}
//else if(element.value >= sfr){
// alert("The coefficient of kinetic friction cannot be more than the coefficient of static friction!");

BIN
pool.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

76
style.css Normal file
View File

@@ -0,0 +1,76 @@
body{
background-color: #f2f2f2;
margin-left: 15px;
}
.wrapper {
overflow:hidden;
}
.wrapper div {
min-height: 200px;
padding: 10px;
}
#one {
background-color: white;
float: left;
margin-right: 10px;
width: 775px;
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:auto;
margin-left: auto;
width:100%;
border:0;
border-bottom:2px solid #000;
}
}
.numinput{
width:15%;
}
#playButton {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#play{
color: white;
text-align: center;
margin-top: 50px;
}
.card-text{
padding: 15px;
}
ul {
text-align: center;
list-style-position: inside;
}