diff --git a/index.html b/index.html index 2715fa5..22d3324 100644 --- a/index.html +++ b/index.html @@ -4,99 +4,21 @@ + + + + + + + + + + + Collision Simulation @@ -106,64 +28,115 @@ table th {

Welcome to the collision simulator!

A Project by: Johnathon Slightham

-

Visit the wiki on github for more information on how this works!

-

To use the simulator:

- - +

Visit the wiki on github for more information on how this works!

+

To use the simulator:

+ +

Collision Simulator

-

Project by Johnathon Slightham

-
- -
-
- Your browser does not support HTML 5
-
-
-
-

Modifiers

- Coefficient of Kinetic Friction:
- - Collision Effectiveness (100% - No energy lost): %
- Draw Velocity Vector: -

Placed Particles

- - - - - - - - - -
ID #MassX VelocityY VelocityX AccelerationY Acceleration
- Total Kinetic Energy: J -

Add Particles

-
- Mass: X-Velocity: Y-Velocity: -
-

Modify Graph

- Graph X Axis: - +

Project by Johnathon Slightham

- Graph Y Axis: - +
+
+
+
+

Simulation

+

Your browser does not support HTML 5

+
+
+
+
+
+
+

Modifiers

+

Coefficient of Kinetic Friction:
+ + Collision Effectiveness (100% most efficient): %
+ +

+
+
+
+

Add Particles

+

+

+
+ + +
+
+ + +
+
+ + +
+ +
+

+
+ +
+ +
+

Graph Editor

+

+

+
+ + +
+ +
+ + +
+
+

+
+
+
+
+ +
+
+
+ +

- +
+

Placed Particles

+

+ + + + + + + + +
MassX VelocityY VelocityX AccelerationY Acceleration
+

Total Kinetic Energy: J
+

+
+
+
+

Graph

+

+

+

-
- - - \ No newline at end of file diff --git a/main.js b/main.js index 0115d93..5d61d25 100644 --- a/main.js +++ b/main.js @@ -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!"); diff --git a/pool.jpg b/pool.jpg new file mode 100644 index 0000000..8329b23 Binary files /dev/null and b/pool.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..dec25ee --- /dev/null +++ b/style.css @@ -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; +} \ No newline at end of file