Merge pull request #10 from ben9583/0.3.0

Release 0.3.0

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "solar-sim"
-version = "0.2.2"
+version = "0.3.0"
 authors = ["Ben Plate <bplate9583@gmail.com>"]
 edition = "2018"
 description = "Physics simulator written in Rust WASM for use in Solar Sim website"

website-src/index.html

@@ -25,6 +25,13 @@
  <button id="spawn">Spawn</button>
  </div>
 
+ <input type="checkbox" id="debug" /><span style="color:white">Enable Debug (slightly lowers performance)</span>
+ <div id="debugSection" style="color:white">
+ <p># of bodies: <span id="numBodies">6</span></p>
+ <p>Simulation tick time: <span id="simTickTime">10</span><span>μs</span></p>
+ <p>Draw tick time: <span id="drawTickTime">10</span><span>μs</span></p>
+ </div>
+
  <script src="./bootstrap.js"></script>
  </body>
 </html>

website-src/index.js

@@ -78,39 +78,76 @@ 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]);
 }
 
+const debugElem = document.getElementById("debug");
+const numBodiesElem = document.getElementById("numBodies");
+const simulationTickTimeElem = document.getElementById("simTickTime");
+const drawTickTimeElem = document.getElementById("drawTickTime");
+
+let count = 0;
+let debug = debugElem.checked;
+document.getElementById("debugSection").style.visibility = debug ? "visible" : "hidden"
+debugElem.addEventListener("click", (elem, e) => {
+ debug = debugElem.checked;
+ if(debug) document.getElementById("debugSection").style.visibility = "visible";
+ else document.getElementById("debugSection").style.visibility = "hidden";
+})
+
 const canvas = document.getElementById("scene");
 const canvas2 = document.getElementById("trails");
 const ctx = canvas.getContext("2d");
 const ctx2 = canvas2.getContext("2d");
 
+let tickTime = performance.now();
+
 function step(simulate) {
- if(simulate) SolarSim.step_time();
+ if(simulate) {
+ count++;
+ if(debug && count % 10 == 0) {
+ numBodiesElem.innerHTML = bodies.length;
+ tickTime = performance.now();
+ SolarSim.step_time();
+ simulationTickTimeElem.innerHTML = Math.round((performance.now() - tickTime) * 1000);
+ }
+ else {
+ SolarSim.step_time();
+ }
+ }
 
  ctx.clearRect(0, 0, WIDTH, HEIGHT)
 
+ if(debug && count % 10 == 0) tickTime = performance.now();
+
  const newPositions = SolarSim.get_positions();
  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);
 
- ctx.fillStyle = body.color;
- ctx.beginPath();
- ctx.arc(newPositions[i * 2], newPositions[i * 2 + 1], body.radius, 0, 2 * Math.PI);
- ctx.fill();
+ if(inBounds) {
+ ctx.fillStyle = body.color;
+ ctx.beginPath();
+ ctx.arc(newPositions[i * 2], newPositions[i * 2 + 1], body.radius, 0, 2 * Math.PI);
+ ctx.fill();
+ }
 
  if(simulate) {
- if(trails[i].length >= 100) {
+ if(trails[i].length >= 100 || (!inBounds && trails[i].length > 0)) {
  let toRemove = trails[i].shift();
  ctx2.fillStyle = "black";
  ctx2.fillRect(toRemove[0] - 1, toRemove[1] - 1, 5, 5);
  }
- trails[i].push([newPositions[i * 2], newPositions[i * 2 + 1]]);
- ctx2.fillStyle = "white";
- ctx2.fillRect(newPositions[i * 2], newPositions[i * 2 + 1], 3, 3);
+ if(inBounds) {
+ trails[i].push([newPositions[i * 2], newPositions[i * 2 + 1]]);
+ ctx2.fillStyle = "white";
+ ctx2.fillRect(newPositions[i * 2], newPositions[i * 2 + 1], 3, 3);
+ }
  }
  }
+
+ if(debug && count % 10 == 0) drawTickTimeElem.innerHTML = Math.round((performance.now() - tickTime) * 1000);
+
+ window.requestAnimationFrame(step);
 }
 
-let proc = setInterval(() => step(true), 10);
 let playing = true;
 
 const toggleButton = document.getElementById("toggle");
@@ -146,12 +183,9 @@ spawnButton.addEventListener("click", (elem, e) => {
  const velocityX = parseFloat(document.getElementById("velocityX").value);
  const velocityY = parseFloat(document.getElementById("velocityY").value);
 
- console.log("checking");
  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;
 
- console.log("success");
-
  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);
@@ -171,5 +205,6 @@ spawnButton.addEventListener("click", (elem, e) => {
 
  trails.push([]);
  SolarSim.add_body(mass, positionX, positionY, velocityX, velocityY);
- step(false);
 })
+
+window.requestAnimationFrame(step);

website-src/package.json

@@ -1,6 +1,6 @@
 {
  "name": "solar-sim-app",
- "version": "0.2.1",
+ "version": "0.3.0",
  "description": "Creates the Solar Sim website.",
  "main": "index.js",
  "scripts": {