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

made drawing more efficient

Browse Source
This commit is contained in:
jslightham
2020-05-28 12:00:59 -04:00
parent 66a30b05d9
commit cb7764e6fd
1 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
main.js
View File

@@ -70,10 +70,7 @@ function main(elem){
// Set a callback to run when the charts API is loaded // Set a callback to run when the charts API is loaded
google.charts.setOnLoadCallback(drawKEChart); google.charts.setOnLoadCallback(drawKEChart);
//canvas.addEventListener("mousedown", doMouseDown, false); // Loop through each particle every 20 milliseconds, create measurements every 1 second
//canvas.addEventListener("onmouseup", doMouseUp, false);
// Loop through each particle every 10 milliseconds, create measurements every 1 second
setInterval(loop, 20); setInterval(loop, 20);
setInterval(measureData, 1000); setInterval(measureData, 1000);
} }
@@ -81,7 +78,6 @@ function main(elem){
// The main loop function that handles each particle // The main loop function that handles each particle
function loop(){ function loop(){
// Set volumes of sounds according to % energy transferred // Set volumes of sounds according to % energy transferred
eff = document.getElementById("effe").value/100; eff = document.getElementById("effe").value/100;
shot.volume = 1 - eff; shot.volume = 1 - eff;
@@ -99,13 +95,13 @@ function loop(){
document.getElementById("ek").innerHTML = ek[ek.length-1]; document.getElementById("ek").innerHTML = ek[ek.length-1];
// Draw board, then process collisions. // Draw board, then process collisions.
draw(); resetDraw();
separate(); separate();
detectCollisions(); detectCollisions();
// Iterate through each particle, to change it's velocity from acceleration, and position from velocity // Iterate through each particle, to change it's velocity from acceleration, and position from velocity
particles.forEach((elem, i) => { particles.forEach((elem, i) => {
draw(elem);
// Determine velocity vector and store for later use // Determine velocity vector and store for later use
elem.v = Math.sqrt(Math.pow(elem.vx, 2) + Math.pow(elem.vy, 2)); elem.v = Math.sqrt(Math.pow(elem.vx, 2) + Math.pow(elem.vy, 2));
@@ -201,12 +197,17 @@ function loop(){
}) })
} }
// Function to draw all particles on the canvas, and draw velocity vectors // Function to reset the canvas
function draw(){ function resetDraw(){
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(bkg, 0, 0, canvas.width, canvas.height); ctx.drawImage(bkg, 0, 0, canvas.width, canvas.height);
particles.forEach((elem, i) => }
{
// Function to draw the given particle on the canvas
function draw(elem){
// Draw actual particle // Draw actual particle
ctx.beginPath(); ctx.beginPath();
ctx.fillStyle = "black"; ctx.fillStyle = "black";
@@ -230,10 +231,9 @@ function draw(){
ctx.stroke(); ctx.stroke();
} }
});
} }
// Function that returns the distance between the two particles given // Function that returns the distance between the two particles given
function getDistance(p1, p2){ function getDistance(p1, p2){
let xDist = Math.abs(p1.x - p2.x); let xDist = Math.abs(p1.x - p2.x);
@@ -275,7 +275,8 @@ function separate(){
noOverlap = false; noOverlap = false;
draw(); draw(elem1);
draw(elem2);
} }
} }
} }