Skip to content

Commit

Permalink
Merge pull request #2 from kotsoft/viscoelastic
Browse files Browse the repository at this point in the history 
Viscoelastic
  • Loading branch information
@kotsoft
kotsoft authored May 14, 2024
2 parents 323ea22 + 8eae7fa commit 3cf38c6
Show file tree
Hide file tree
Showing 14 changed files with 1,232 additions and 183 deletions.
151 changes: 95 additions & 56 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,75 +13,114 @@
<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="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>
<div id="controls">
<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" selected="true">2K</option>
<option value="3000">3K</option>
<option value="4000">4K</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="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="springStiffness">Spring Stiffness:</label>
<input type="range" name="springStiffness" id="springStiffness" min="0" max=".5" step="0.01" value="0.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="plasticity">Plasticity</label>
<input type="range" name="plasticity" id="plasticity" min="0.1" max="1.0" step="0.01" value="0.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="yieldRatio">Yield Ratio:</label>
<input type="range" name="yieldRatio" id="yieldRatio" min="0.1" max="1.0" step="0.01" value="0.25">
</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="minDistRatio">Min Spring Dist Ratio:</label>
<input type="range" name="minDistRatio" id="minDistRatio" min="0.025" max="1.0" step="0.01" value=".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>
<label for="linViscosity">Linear Viscosity:</label>
<input type="range" name="linViscosity" id="linViscosity" min="0.0" max="0.5" step="0.01" value="0.0">
</p>

<p>
<button id="startButton">Start</button>
<button id="pauseButton">Pause</button>
<button id="resetButton">Reset</button>
</p>
<p>
<label for="quadViscosity">Quadratic Viscosity:</label>
<input type="range" name="quadViscosity" id="quadViscosity" min="0.0" max="0.5" step="0.01" value="0.1">

<p>
<label for="kernelRadius">Kernel Radius:</label>
<input type="range" name="kernelRadius" id="kernelRadius" min="5.0" max="64.0" step="1.0" value="40.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.5">
</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>
<button id="stepButton">Step</button>
<button id="resetButton">Reset</button>
</p>

<p>
<small>
KB: (A)ttract, (R)epel, (E)mit, (D)rain
</small>
<br>
<small>
You can drag mouse as well as window!
</small>
</p>

<p>
<a href="sim_3.html">Prev</a>
</p>
</div>

<p>
<small>
KB: (A)ttract, (R)epel, (E)mit, (D)rain
</small>
<br>
<small>
You can drag mouse as well as window!
</small>
<button id="collapseButton">Collapse</button>
</p>

</div>

<script src="fpsMonitor.js"></script>
<script src="sim_3.js"></script>
<script src="sim_5.js"></script>
<script src="run_0.js"></script>
</body>

Expand Down
27 changes: 25 additions & 2 deletions run_0.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Options
let numParticles = 1000;
let numParticles = 2000;

// Setup a simulation
const canvas = document.getElementById("simCanvas");
Expand All @@ -8,6 +8,7 @@ canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let simulator = new Simulator(canvas.width, canvas.height, numParticles);
simulator.running = true;

const fpsMonitor = new FPSMonitor();

Expand All @@ -24,7 +25,7 @@ function loop() {
loop();

// Event listeners
const materialSliders = ["restDensity", "stiffness", "nearStiffness", "kernelRadius", "pointSize", "gravX", "gravY", "dt"];
const materialSliders = ["restDensity", "stiffness", "nearStiffness", "springStiffness", "plasticity", "yieldRatio", "minDistRatio", "linViscosity", "quadViscosity", "kernelRadius", "pointSize", "gravX", "gravY", "dt"];

for (let sliderId of materialSliders) {
let slider = document.getElementById(sliderId);
Expand Down Expand Up @@ -52,10 +53,32 @@ document.getElementById("pauseButton").addEventListener("click", () => {
simulator.pause();
});

document.getElementById("stepButton").addEventListener("click", () => {
simulator.running = true;
simulator.update();
simulator.running = false;
});

document.getElementById("resetButton").addEventListener("click", () => {
simulator = new Simulator(canvas.width, canvas.height, numParticles);
});

let collapseButton = document.getElementById("collapseButton");

if (collapseButton) {
document.getElementById("collapseButton").addEventListener("click", () => {
let controls = document.getElementById("controls");

if (controls.style.display == "none") {
controls.style.display = "block";
collapseButton.innerText = "Collapse";
} else {
controls.style.display = "none";
collapseButton.innerText = "Expand";
}
});
}

document.getElementById("numParticles").addEventListener("input", (e) => {
if (e.target.value == numParticles) {
return;
Expand Down
40 changes: 27 additions & 13 deletions sim_0.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,34 @@
<canvas id="simCanvas"></canvas>

<div id="overlay">
<p id="fps">FPS: 0</p>
<div id="controls">
<p id="fps">FPS: 0</p>
<p>
<label for="numParticles"># Particles:</label>
<select name="numParticles" id="numParticles">
<option value="2000" selected="true">2K</option>
<option value="10000">10K</option>
<option value="100000">100K</option>
<option value="1000000">1M</option>
</select>
</p>
<p>
<button id="startButton">Start</button>
<button id="pauseButton">Pause</button>
<button id="stepButton">Step</button>
<button id="resetButton">Reset</button>
</p>
<p>
<small>
You can drag window around.
</small>
</p>
<p>
<a href="sim_1.html">Next</a>
</p>
</div>
<p>
<label for="numParticles"># Particles:</label>
<select name="numParticles" id="numParticles">
<option value="1000">1K</option>
<option value="10000">10K</option>
<option value="100000">100K</option>
<option value="1000000">1M</option>
</select>
</p>
<p>
<button id="startButton">Start</button>
<button id="pauseButton">Pause</button>
<button id="resetButton">Reset</button>
<button id="collapseButton">Collapse</button>
</p>
</div>

Expand Down
3 changes: 2 additions & 1 deletion sim_0.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ class Simulator {
draw(ctx) {
ctx.save();
ctx.translate(-2.5, -2.5);
ctx.fillStyle = "#0066FF";

for (let p of this.particles) {
ctx.fillRect(p.posX, p.posY, 5, 5);
Expand Down Expand Up @@ -96,7 +97,7 @@ class Simulator {
adjustSprings(dt) { }
applyViscosity(dt) { }
resolveCollisions(dt) {
const boundaryMul = 1.9; // 1 is no bounce, 2 is full bounce
const boundaryMul = .5; // Soft boundary
const boundaryMinX = 5;
const boundaryMaxX = this.width - 5;
const boundaryMinY = 5;
Expand Down
46 changes: 33 additions & 13 deletions sim_1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,41 @@
<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="3000">3K</option>
<option value="4000">4K</option>
</select>
</p>
<div id="controls">
<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" selected="true">2K</option>
<option value="3000">3K</option>
<option value="4000">4K</option>
</select>
</p>
<p>
<button id="startButton">Start</button>
<button id="pauseButton">Pause</button>
<button id="stepButton">Step</button>
<button id="resetButton">Reset</button>
</p>

<p>
<small>
You can drag window around.
</small>
</p>

<p>
<a href="sim_0.html">Prev</a>
|
<a href="sim_2.html">Next</a>
</p>
</div>

<p>
<button id="startButton">Start</button>
<button id="pauseButton">Pause</button>
<button id="resetButton">Reset</button>
<button id="collapseButton">Collapse</button>
</p>

</div>

<script src="fpsMonitor.js"></script>
Expand Down
2 changes: 2 additions & 0 deletions sim_1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ class Simulator {
ctx.save();
ctx.translate(-5, -5);

ctx.fillStyle = "#0066FF";

for (let p of this.particles) {
ctx.fillRect(p.posX, p.posY, 10, 10);
}
Expand Down
Loading

0 comments on commit 3cf38c6

Please sign in to comment.