Merge pull request #1 from kotsoft/double-density-relaxation

Double density relaxation
kotsoft · May 14, 2024 · cb362c8 · cb362c8
2 parents bf17c14 + f923fd7
commit cb362c8
Show file tree

Hide file tree

Showing 14 changed files with 2,294 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -18,11 +18,50 @@
       <label for="numParticles"># Particles:</label>
       <select name="numParticles" id="numParticles">
         <option value="1000">1K</option>
+        <option value="2000">2K</option>
+        <option value="5000">5K</option>
         <option value="10000">10K</option>
-        <option value="100000">100K</option>
-        <option value="1000000">1M</option>
       </select>
     </p>
+    <p>
+      <label for="restDensity">Rest Density:</label>
+      <input type="range" name="restDensity" id="restDensity" min="0.1" max="8.0" step="0.1" value="4.0">
+    </p>
+    <p>
+      <label for="stiffness">Stiffness:</label>
+      <input type="range" name="stiffness" id="stiffness" min="0.1" max="2.0" step="0.1" value="0.5">
+    </p>
+
+    <p>
+      <label for="nearStiffness">Near Stiffness:</label>
+      <input type="range" name="nearStiffness" id="nearStiffness" min="0.1" max="2.0" step="0.1" value="0.5">
+    </p>
+
+    <p>
+      <label for="kernelRadius">Kernel Radius:</label>
+      <input type="range" name="kernelRadius" id="kernelRadius" min="5.0" max="64.0" step="1.0" value="32.0">
+    </p>
+
+    <p>
+      <label for="pointSize">Point Size:</label>
+      <input type="range" name="pointSize" id="pointSize" min="1" max="20" step="1" value="5">
+    </p>
+
+    <p>
+      <label for="gravX">Gravity X:</label>
+      <input type="range" name="gravX" id="gravX" min="-0.5" max="0.5" step="0.01" value="0">
+    </p>
+
+    <p>
+      <label for="gravY">Gravity Y:</label>
+      <input type="range" name="gravY" id="gravY" min="-0.5" max="0.5" step="0.01" value="0.25">
+    </p>
+
+    <p>
+      <label for="dt">Time Step:</label>
+      <input type="range" name="dt" id="dt" min="0.1" max="1.0" step="0.1" value="1.0">
+    </p>
+
     <p>
       <button id="startButton">Start</button>
       <button id="pauseButton">Pause</button>
@@ -31,8 +70,8 @@
   </div>
 
   <script src="fpsMonitor.js"></script>
-  <script src="sim_0.js"></script>
-  <script src="run.js"></script>
+  <script src="sim_3.js"></script>
+  <script src="run_0.js"></script>
 </body>
 
 </html>
diff --git a/run_0.js b/run_0.js
@@ -24,7 +24,27 @@ function loop() {
 loop();
 
 // Event listeners
+const materialSliders = ["restDensity", "stiffness", "nearStiffness", "kernelRadius", "pointSize", "gravX", "gravY", "dt"];
+
+for (let sliderId of materialSliders) {
+  let slider = document.getElementById(sliderId);
+
+  if (slider) {
+    slider.addEventListener("input", (e) => {
+      simulator.material[sliderId] = e.target.value;
+    });
+  }
+}
+
 document.getElementById("startButton").addEventListener("click", () => {
+  for (let sliderId of materialSliders) {
+    let slider = document.getElementById(sliderId);
+
+    if (slider) {
+      simulator.material[sliderId] = slider.value;
+    }
+  }
+
   simulator.start();
 });
 
@@ -44,3 +64,58 @@ document.getElementById("numParticles").addEventListener("input", (e) => {
   numParticles = e.target.value;
   simulator = new Simulator(canvas.width, canvas.height, numParticles);
 });
+
+{
+  let useSpatialHash = document.getElementById("useSpatialHash")
+
+  if (useSpatialHash) {
+    useSpatialHash.addEventListener("change", (e) => {
+      simulator.useSpatialHash = e.target.checked;
+    });
+  }
+}
+
+window.addEventListener("resize", () => {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  simulator.resize(canvas.width, canvas.height);
+});
+
+window.addEventListener("mousemove", (e) => {
+  simulator.mouseX = e.clientX;
+  simulator.mouseY = e.clientY;
+});
+
+window.addEventListener("mousedown", (e) => {
+  if (e.button == 0) {
+    simulator.drag = true;
+  }
+});
+
+window.addEventListener("mouseup", (e) => {
+  if (e.button == 0) {
+    simulator.drag = false;
+  }
+});
+
+const actionKeys = { "e": "emit", "d": "drain", "a": "attract", "r": "repel" };
+
+window.addEventListener("keydown", (e) => {
+  if (actionKeys[e.key]) {
+    simulator[actionKeys[e.key]] = true;
+  }
+});
+
+window.addEventListener("keyup", (e) => {
+  if (actionKeys[e.key]) {
+    simulator[actionKeys[e.key]] = false;
+  }
+});
+
+window.addEventListener("blur", () => {
+  for (let key in actionKeys) {
+    simulator[actionKeys[key]] = false;
+  }
+
+  simulator.drag = false;
+});
diff --git a/scrap_0.html b/scrap_0.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>PVFS 2.1 - Optimize Neighbor Search</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+  <canvas id="simCanvas"></canvas>
+
+  <div id="overlay">
+    <p id="fps">FPS: 0</p>
+    <p>
+      <label for="numParticles"># Particles:</label>
+      <select name="numParticles" id="numParticles">
+        <option value="1000">1K</option>
+        <option value="2000">2K</option>
+        <option value="5000">5K</option>
+        <option value="10000">10K</option>
+      </select>
+    </p>
+    <p>
+      <label for="useSpatialHash">Use Spatial Hash:</label>
+      <input type="checkbox" name="useSpatialHash" id="useSpatialHash" checked="true">
+    </p>
+    <p>
+      <button id="startButton">Start</button>
+      <button id="pauseButton">Pause</button>
+      <button id="resetButton">Reset</button>
+    </p>
+  </div>
+
+  <script src="fpsMonitor.js"></script>
+  <script src="scrap_0.js"></script>
+  <script src="run_0.js"></script>
+</body>
+
+</html>