From bfe5e337ef7e04d749fd7874dcc8d40746603e49 Mon Sep 17 00:00:00 2001 From: Ben Plate Date: Tue, 21 Jun 2022 10:18:23 -0700 Subject: [PATCH 01/12] update version number --- Cargo.toml | 2 +- website-src/package-lock.json | 2 +- website-src/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index a50cb34..78fdb9b 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "solar-sim" -version = "0.4.1" +version = "0.5.0" authors = ["Ben Plate "] edition = "2018" description = "Physics simulator written in Rust WASM for use in Solar Sim website" diff --git a/website-src/package-lock.json b/website-src/package-lock.json index 7b0ad4c..1d982ce 100644 --- a/website-src/package-lock.json +++ b/website-src/package-lock.json @@ -1,6 +1,6 @@ { "name": "solar-sim-app", - "version": "0.4.1", + "version": "0.5.0", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/website-src/package.json b/website-src/package.json index c59d0c0..f296708 100644 --- a/website-src/package.json +++ b/website-src/package.json @@ -1,6 +1,6 @@ { "name": "solar-sim-app", - "version": "0.4.1", + "version": "0.5.0", "description": "Creates the Solar Sim website.", "main": "index.js", "scripts": { From 27a2dfcb446d318c83b75c94e8b4f6a8cbf5d452 Mon Sep 17 00:00:00 2001 From: Ben Plate Date: Tue, 21 Jun 2022 10:22:23 -0700 Subject: [PATCH 02/12] update styling --- website-src/static/style.css | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/website-src/static/style.css b/website-src/static/style.css index 16c5b11..6364b54 100644 --- a/website-src/static/style.css +++ b/website-src/static/style.css @@ -14,13 +14,7 @@ div#canvasContainer { border-color: #454545; } -canvas#scene { - position: absolute; - width: 1280px; - height: 720px; -} - -canvas#trails { +canvas { position: absolute; width: 1280px; height: 720px; From 572747a6bcaf03585e4dcd9027c47cc673a803b3 Mon Sep 17 00:00:00 2001 From: Ben Plate Date: Tue, 21 Jun 2022 10:22:29 -0700 Subject: [PATCH 03/12] add placement canvas --- website-src/index.html | 1 + website-src/index.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/website-src/index.html b/website-src/index.html index 28fb912..d25aae0 100644 --- a/website-src/index.html +++ b/website-src/index.html @@ -10,6 +10,7 @@
+
diff --git a/website-src/index.js b/website-src/index.js index 683c48e..d16898c 100644 --- a/website-src/index.js +++ b/website-src/index.js @@ -102,8 +102,11 @@ const lowSimAccuracyElem = document.getElementById("lowSimAccuracy"); const canvas = document.getElementById("scene"); const canvas2 = document.getElementById("trails"); +const canvas3 = document.getElementById("placement"); + const ctx = canvas.getContext("2d"); const ctx2 = canvas2.getContext("2d"); +const ctx3 = canvas3.getContext("2d"); let numTrailParticles = highTrailQualityElem.checked ? 100 : mediumTrailQualityElem.checked ? 50 : lowTrailQualityElem.checked ? 10 : 0; From 8193b2fd5ec5d07cbc8efa61d80ee8d765170748 Mon Sep 17 00:00:00 2001 From: Ben Plate Date: Tue, 21 Jun 2022 10:41:05 -0700 Subject: [PATCH 04/12] correct DOM positioning --- website-src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website-src/index.html b/website-src/index.html index d25aae0..712be1c 100644 --- a/website-src/index.html +++ b/website-src/index.html @@ -10,9 +10,9 @@
- +
From f984360f31c2de1b03d7077939e7b68609aae048 Mon Sep 17 00:00:00 2001 From: Ben Plate Date: Tue, 21 Jun 2022 10:41:12 -0700 Subject: [PATCH 05/12] draw circle to placement over mouse --- website-src/index.js | 46 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/website-src/index.js b/website-src/index.js index d16898c..d8c9c1f 100644 --- a/website-src/index.js +++ b/website-src/index.js @@ -108,6 +108,52 @@ const ctx = canvas.getContext("2d"); const ctx2 = canvas2.getContext("2d"); const ctx3 = canvas3.getContext("2d"); +ctx3.strokeStyle = "white"; +let mouseInCanvas = false; +let mouseClicking = false; +let clickedX = 0; +let clickedY = 0; + +function getMousePos(canvas, evt) { + var rect = canvas.getBoundingClientRect(); + return { + x: evt.clientX - rect.left, + y: evt.clientY - rect.top + }; +} + +canvas3.addEventListener("mouseenter", () => { + mouseInCanvas = true; +}); +canvas3.addEventListener("mouseleave", () => { + mouseInCanvas = false; + ctx3.clearRect(0, 0, WIDTH, HEIGHT); +}); +canvas3.addEventListener("mousedown", (elem, e) => { + mouseClicking = true; + let pos = getMousePos(canvas3, elem); + + clickedX = pos.x; + clickedY = pos.y; +}); +canvas3.addEventListener("mouseup", (elem, e) => { + mouseClicking = false; +}); +canvas3.addEventListener("mousemove", (elem, e) => { + let pos = getMousePos(canvas3, elem); + + if(mouseInCanvas) { + ctx3.clearRect(0, 0, WIDTH, HEIGHT); + + const radius = parseFloat(document.getElementById("radius").value); + if(!(isNaN(radius) || !isFinite(radius) || radius < 0.01)) { + ctx3.beginPath(); + ctx3.arc(pos.x, pos.y, radius, 0, 2 * Math.PI); + ctx3.stroke(); + } + } +}) + let numTrailParticles = highTrailQualityElem.checked ? 100 : mediumTrailQualityElem.checked ? 50 : lowTrailQualityElem.checked ? 10 : 0; highTrailQualityElem.addEventListener("click", (elem, e) => { From 482c751980903bea8523bfb06ac44e65ab3e61c8 Mon Sep 17 00:00:00 2001 From: Ben Plate Date: Tue, 21 Jun 2022 10:43:36 -0700 Subject: [PATCH 06/12] add dragging line --- website-src/index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/website-src/index.js b/website-src/index.js index d8c9c1f..2341e12 100644 --- a/website-src/index.js +++ b/website-src/index.js @@ -148,7 +148,15 @@ canvas3.addEventListener("mousemove", (elem, e) => { const radius = parseFloat(document.getElementById("radius").value); if(!(isNaN(radius) || !isFinite(radius) || radius < 0.01)) { ctx3.beginPath(); - ctx3.arc(pos.x, pos.y, radius, 0, 2 * Math.PI); + + if(mouseClicking) { + ctx3.arc(clickedX, clickedY, radius, 0, 2 * Math.PI); + ctx3.moveTo(clickedX, clickedY); + ctx3.lineTo(pos.x, pos.y); + } else { + ctx3.arc(pos.x, pos.y, radius, 0, 2 * Math.PI); + } + ctx3.stroke(); } } From 4a42f4651b7d09cfe8a03861c9b80a0aa4e18ef1 Mon Sep 17 00:00:00 2001 From: Ben Plate Date: Tue, 21 Jun 2022 11:04:42 -0700 Subject: [PATCH 07/12] add planet adder --- website-src/index.js | 64 ++++++++++++++++++++++++++++---------------- 1 file changed, 41 insertions(+), 23 deletions(-) diff --git a/website-src/index.js b/website-src/index.js index 2341e12..fbef592 100644 --- a/website-src/index.js +++ b/website-src/index.js @@ -78,6 +78,31 @@ for(let i = 0; i < bodies.length; i++) { SolarSim.add_body(body.mass, body.position[0], body.position[1], body.initialVelocity[0], body.initialVelocity[1]); } +function addBody(name, mass, radius, positionX, positionY, velocityX, velocityY) { + if(isNaN(mass) || isNaN(radius) || isNaN(positionX) || isNaN(positionY) || isNaN(velocityX) || isNaN(velocityY) || !(isFinite(mass) && isFinite(radius) && isFinite(positionX) && isFinite(positionY) && isFinite(velocityX) && isFinite(velocityY)) || Math.abs(radius) < 0.01) + return; + + let red = Math.floor(Math.random() * 256).toString(16); + let green = Math.floor(Math.random() * 256).toString(16); + let blue = Math.floor(Math.random() * 256).toString(16); + + if(red.length == 1) red = "0" + red; + if(green.length == 1) green = "0" + green; + if(blue.length == 1) blue = "0" + blue; + + bodies.push({ + name: name, + mass: mass, + radius: radius, + position: [positionX, positionY], + initialVelocity: [velocityX, velocityY], + color: "#" + red + green + blue, + }); + + trails.push([]); + SolarSim.add_body(mass, positionX, positionY, velocityX, velocityY); +} + const debugElem = document.getElementById("debug"); const numBodiesElem = document.getElementById("numBodies"); const simulationTickTimeElem = document.getElementById("simTickTime"); @@ -138,6 +163,18 @@ canvas3.addEventListener("mousedown", (elem, e) => { }); canvas3.addEventListener("mouseup", (elem, e) => { mouseClicking = false; + let pos = getMousePos(canvas3, elem); + + let distX = (clickedX - pos.x) / 25; + let distY = (clickedY - pos.y) / 25; + + const name = document.getElementById("name").value; + const mass = parseFloat(document.getElementById("mass").value); + const radius = parseFloat(document.getElementById("radius").value); + + addBody(name, mass, radius, clickedX, clickedY, distX, distY); + + step(false); }); canvas3.addEventListener("mousemove", (elem, e) => { let pos = getMousePos(canvas3, elem); @@ -240,7 +277,7 @@ function step(simulate) { if(debug && count % 10 == 0) drawTickTimeElem.innerHTML = Math.round((performance.now() - tickTime) * 1000); - if(playing) window.requestAnimationFrame(step); + if(playing && simulate) window.requestAnimationFrame(step); } const toggleButton = document.getElementById("toggle"); @@ -262,6 +299,8 @@ resetButton.addEventListener("click", (elem, e) => { trails = []; SolarSim.clear_universe(); ctx2.clearRect(0, 0, WIDTH, HEIGHT); + + step(false); }) const spawnButton = document.getElementById("spawn"); @@ -275,28 +314,7 @@ spawnButton.addEventListener("click", (elem, e) => { const velocityX = parseFloat(document.getElementById("velocityX").value); const velocityY = parseFloat(document.getElementById("velocityY").value); - if(isNaN(mass) || isNaN(radius) || isNaN(positionX) || isNaN(positionY) || isNaN(velocityX) || isNaN(velocityY) || !(isFinite(mass) && isFinite(radius) && isFinite(positionX) && isFinite(positionY) && isFinite(velocityX) && isFinite(velocityY)) || Math.abs(radius) < 0.01) - return; - - let red = Math.floor(Math.random() * 256).toString(16); - let green = Math.floor(Math.random() * 256).toString(16); - let blue = Math.floor(Math.random() * 256).toString(16); - - if(red.length == 1) red = "0" + red; - if(green.length == 1) green = "0" + green; - if(blue.length == 1) blue = "0" + blue; - - bodies.push({ - name: name, - mass: mass, - radius: radius, - position: [positionX, positionY], - initialVelocity: [velocityX, velocityY], - color: "#" + red + green + blue, - }); - - trails.push([]); - SolarSim.add_body(mass, positionX, positionY, velocityX, velocityY); + addBody(name, mass, radius, positionX, positionY, velocityX, velocityY); }) window.requestAnimationFrame(step); From 648d4a6176de43d8a365911f89889facb251bf09 Mon Sep 17 00:00:00 2001 From: Ben Plate Date: Tue, 21 Jun 2022 11:14:24 -0700 Subject: [PATCH 08/12] remove bodies far enough away from sim --- website-src/index.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/website-src/index.js b/website-src/index.js index fbef592..78243e4 100644 --- a/website-src/index.js +++ b/website-src/index.js @@ -253,6 +253,16 @@ function step(simulate) { for(let i = 0; i < bodies.length; i++) { let body = bodies[i]; let inBounds = (newPositions[i * 2] >= 0 && newPositions[i * 2] < WIDTH && newPositions[i * 2 + 1] >= 0 && newPositions[i * 2 + 1] < HEIGHT); + let inSimBounds = (newPositions[i * 2] >= -WIDTH && newPositions[i * 2] < 2 * WIDTH && newPositions[i * 2 + 1] >= -HEIGHT && newPositions[i * 2 + 1] < 2 * HEIGHT) + + if(!inSimBounds) { + bodies.splice(i, 1); + trails.splice(i, 1); + SolarSim.remove_body(i); + + i--; + continue; + } if(inBounds) { ctx.fillStyle = body.color; From ae40645983154fd8b51a28cfdb65c2c095c0271d Mon Sep 17 00:00:00 2001 From: Ben Plate Date: Tue, 21 Jun 2022 11:14:32 -0700 Subject: [PATCH 09/12] draw on add body --- website-src/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/website-src/index.js b/website-src/index.js index 78243e4..43c24b2 100644 --- a/website-src/index.js +++ b/website-src/index.js @@ -325,6 +325,8 @@ spawnButton.addEventListener("click", (elem, e) => { const velocityY = parseFloat(document.getElementById("velocityY").value); addBody(name, mass, radius, positionX, positionY, velocityX, velocityY); + + step(false); }) window.requestAnimationFrame(step); From 97617246bf7f613e237178ca1ba196b9261cad80 Mon Sep 17 00:00:00 2001 From: Ben Plate Date: Tue, 21 Jun 2022 11:18:17 -0700 Subject: [PATCH 10/12] remove trails correctly --- website-src/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/website-src/index.js b/website-src/index.js index 43c24b2..6c71e74 100644 --- a/website-src/index.js +++ b/website-src/index.js @@ -256,6 +256,10 @@ function step(simulate) { let inSimBounds = (newPositions[i * 2] >= -WIDTH && newPositions[i * 2] < 2 * WIDTH && newPositions[i * 2 + 1] >= -HEIGHT && newPositions[i * 2 + 1] < 2 * HEIGHT) if(!inSimBounds) { + ctx2.fillStyle = "black"; + for(let j = 0; j < trails[i].length; j++) { + ctx2.fillRect(trails[i][j][0] - 1, trails[i][j][1] - 1, 5, 5); + } bodies.splice(i, 1); trails.splice(i, 1); SolarSim.remove_body(i); From d94e22963f3193add6c6007cf769f8131cb5c050 Mon Sep 17 00:00:00 2001 From: Ben Plate Date: Tue, 21 Jun 2022 11:35:48 -0700 Subject: [PATCH 11/12] add separate body adders --- website-src/index.html | 33 ++++++++++++++++++++++++--------- website-src/index.js | 39 ++++++++++++++++++++++++++++----------- 2 files changed, 52 insertions(+), 20 deletions(-) diff --git a/website-src/index.html b/website-src/index.html index 712be1c..cccb9f4 100644 --- a/website-src/index.html +++ b/website-src/index.html @@ -15,15 +15,30 @@
-
- - - - - - - - +
+ +
+ + + + +
+ +
diff --git a/website-src/index.js b/website-src/index.js index 6c71e74..83eefdc 100644 --- a/website-src/index.js +++ b/website-src/index.js @@ -117,6 +117,23 @@ debugElem.addEventListener("click", (elem, e) => { else document.getElementById("debugSection").style.visibility = "hidden"; }) +const dropAdderButton = document.getElementById("dropAdderButton"); +const preciseAdderButton = document.getElementById("preciseAdderButton"); +const dropAdder = document.getElementById("dropAdder"); +const preciseAdder = document.getElementById("preciseAdder"); +dropAdderButton.checked = ""; +preciseAdderButton.checked = ""; + +dropAdderButton.addEventListener("click", () => { + dropAdder.style.display = "block"; + preciseAdder.style.display = "none"; +}) + +preciseAdderButton.addEventListener("click", () => { + dropAdder.style.display = "none"; + preciseAdder.style.display = "block"; +}) + const highTrailQualityElem = document.getElementById("highTrailQuality"); const mediumTrailQualityElem = document.getElementById("mediumTrailQuality"); const lowTrailQualityElem = document.getElementById("lowTrailQuality"); @@ -168,9 +185,9 @@ canvas3.addEventListener("mouseup", (elem, e) => { let distX = (clickedX - pos.x) / 25; let distY = (clickedY - pos.y) / 25; - const name = document.getElementById("name").value; - const mass = parseFloat(document.getElementById("mass").value); - const radius = parseFloat(document.getElementById("radius").value); + const name = document.getElementById("dropName").value; + const mass = parseFloat(document.getElementById("dropMass").value); + const radius = parseFloat(document.getElementById("dropRadius").value); addBody(name, mass, radius, clickedX, clickedY, distX, distY); @@ -182,7 +199,7 @@ canvas3.addEventListener("mousemove", (elem, e) => { if(mouseInCanvas) { ctx3.clearRect(0, 0, WIDTH, HEIGHT); - const radius = parseFloat(document.getElementById("radius").value); + const radius = parseFloat(document.getElementById("dropRadius").value); if(!(isNaN(radius) || !isFinite(radius) || radius < 0.01)) { ctx3.beginPath(); @@ -320,13 +337,13 @@ resetButton.addEventListener("click", (elem, e) => { const spawnButton = document.getElementById("spawn"); spawnButton.addEventListener("click", (elem, e) => { - const name = document.getElementById("name").value; - const mass = parseFloat(document.getElementById("mass").value); - const radius = parseFloat(document.getElementById("radius").value); - const positionX = parseFloat(document.getElementById("positionX").value); - const positionY = parseFloat(document.getElementById("positionY").value); - const velocityX = parseFloat(document.getElementById("velocityX").value); - const velocityY = parseFloat(document.getElementById("velocityY").value); + const name = document.getElementById("preciseName").value; + const mass = parseFloat(document.getElementById("preciseMass").value); + const radius = parseFloat(document.getElementById("preciseRadius").value); + const positionX = parseFloat(document.getElementById("precisePositionX").value); + const positionY = parseFloat(document.getElementById("precisePositionY").value); + const velocityX = parseFloat(document.getElementById("preciseVelocityX").value); + const velocityY = parseFloat(document.getElementById("preciseVelocityY").value); addBody(name, mass, radius, positionX, positionY, velocityX, velocityY); From 33f011debea496ff6c5cc4098f15780c8db65494 Mon Sep 17 00:00:00 2001 From: Ben Plate Date: Tue, 21 Jun 2022 11:41:50 -0700 Subject: [PATCH 12/12] disable drop adder when not selected --- website-src/index.html | 2 +- website-src/index.js | 35 ++++++++++++++++++++--------------- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/website-src/index.html b/website-src/index.html index cccb9f4..54c8474 100644 --- a/website-src/index.html +++ b/website-src/index.html @@ -23,7 +23,7 @@ - + Click to drop at mouse, drag to give velocity
diff --git a/website-src/index.js b/website-src/index.js index 83eefdc..93fb92d 100644 --- a/website-src/index.js +++ b/website-src/index.js @@ -127,11 +127,13 @@ preciseAdderButton.checked = ""; dropAdderButton.addEventListener("click", () => { dropAdder.style.display = "block"; preciseAdder.style.display = "none"; + dropAdderEnabled = true; }) preciseAdderButton.addEventListener("click", () => { dropAdder.style.display = "none"; preciseAdder.style.display = "block"; + dropAdderEnabled = false; }) const highTrailQualityElem = document.getElementById("highTrailQuality"); @@ -151,6 +153,7 @@ const ctx2 = canvas2.getContext("2d"); const ctx3 = canvas3.getContext("2d"); ctx3.strokeStyle = "white"; +let dropAdderEnabled = false; let mouseInCanvas = false; let mouseClicking = false; let clickedX = 0; @@ -194,24 +197,26 @@ canvas3.addEventListener("mouseup", (elem, e) => { step(false); }); canvas3.addEventListener("mousemove", (elem, e) => { - let pos = getMousePos(canvas3, elem); + if(dropAdderEnabled) { + let pos = getMousePos(canvas3, elem); - if(mouseInCanvas) { - ctx3.clearRect(0, 0, WIDTH, HEIGHT); + if(mouseInCanvas) { + ctx3.clearRect(0, 0, WIDTH, HEIGHT); - const radius = parseFloat(document.getElementById("dropRadius").value); - if(!(isNaN(radius) || !isFinite(radius) || radius < 0.01)) { - ctx3.beginPath(); + const radius = parseFloat(document.getElementById("dropRadius").value); + if(!(isNaN(radius) || !isFinite(radius) || radius < 0.01)) { + ctx3.beginPath(); - if(mouseClicking) { - ctx3.arc(clickedX, clickedY, radius, 0, 2 * Math.PI); - ctx3.moveTo(clickedX, clickedY); - ctx3.lineTo(pos.x, pos.y); - } else { - ctx3.arc(pos.x, pos.y, radius, 0, 2 * Math.PI); - } + if(mouseClicking) { + ctx3.arc(clickedX, clickedY, radius, 0, 2 * Math.PI); + ctx3.moveTo(clickedX, clickedY); + ctx3.lineTo(pos.x, pos.y); + } else { + ctx3.arc(pos.x, pos.y, radius, 0, 2 * Math.PI); + } - ctx3.stroke(); + ctx3.stroke(); + } } } }) @@ -334,7 +339,7 @@ resetButton.addEventListener("click", (elem, e) => { step(false); }) -const spawnButton = document.getElementById("spawn"); +const spawnButton = document.getElementById("preciseSpawn"); spawnButton.addEventListener("click", (elem, e) => { const name = document.getElementById("preciseName").value;