Skip to content

Commit 6c4fe2e

Browse files
janbenderjanbender
committed
- new style
1 parent 8c80985 commit 6c4fe2e

4 files changed

Lines changed: 239 additions & 255 deletions

File tree

‎examples/pbd.html‎

Lines changed: 73 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@
22
<html class="no-js" lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<style>
6-
body {font-family: Helvetica, sans-serif;}
7-
table {background-color:#CCDDEE;text-align:left}
8-
</style>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="https://interactivecomputergraphics.github.io/physics-simulation/examples/style.css">
97
<script type="text/x-mathjax-config">
108
MathJax.Hub.Config({
119
extensions: ["tex2jax.js"],
@@ -18,83 +16,82 @@
1816
"HTML-CSS": { fonts: ["TeX"] }
1917
});
2018
</script>
21-
<script type="text/javascript" aync src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js"></script>
19+
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js"></script>
2220
<title>Position-Based Dynamics</title>
2321
</head>
2422
<body>
23+
24+
<header class="page-header">
25+
<h1>Position-Based Dynamics</h1>
26+
</header>
27+
2528
<main>
26-
<h1 style="text-align:center">Position-Based Dynamics</h1>
29+
<!-- Simulation panel: canvas + controls -->
2730
<table style="align_center;border-radius: 20px;padding: 20px;margin:auto">
28-
<col width="1100">
29-
<col width="400">
31+
<col width="75%">
32+
<col width="25%">
3033
<tr>
3134
<td>
32-
<canvas id="simCanvas" width="1024" height="768" style="border:2px solid #000000;border-radius: 20px;background-color:#EEEEEE">Your browser does not support the HTML5 canvas tag.</canvas>
35+
<div class="card sim-panel">
36+
<div class="sim-canvas-wrap">
37+
<canvas id="simCanvas" width="1024" height="960" style="border:2px solid #000000;border-radius: 20px;background-color:#EEEEEE">Your browser does not support the HTML5 canvas tag.</canvas>
38+
</div>
39+
</div>
3340
</td>
3441
<td>
35-
<table>
36-
<col width="180" style="padding-right:10px">
37-
<col width="100">
38-
<tr>
39-
<td><label>Current time</label></td>
40-
<td><span id="time">0.00</span> s</td>
41-
</tr>
42-
<tr>
43-
<td><label>Time per sim. step</label></td>
44-
<td><span id="timePerStep">0.00</span> ms</td>
45-
</tr>
46-
<tr>
47-
<td><label># particles</label></td>
48-
<td><span id="numParticles">0</span></td>
49-
</tr>
50-
<tr>
51-
<td><label># constraints</label></td>
52-
<td><span id="numConstraints">0</span></td>
53-
</tr>
54-
<tr>
55-
<td><label for="widthInput">Width</label></td>
56-
<td><input onchange="gui.restart()" id="widthInput" type="number" value="40" step="1"></td>
57-
</tr>
58-
<tr>
59-
<td><label for="heightInput">Height</label></td>
60-
<td><input onchange="gui.restart()" id="heightInput" type="number" value="30" step="1"></td>
61-
</tr>
62-
<tr>
63-
<td><label for="fixedParticlesInput"># fixed particles</label></td>
64-
<td><select onchange="gui.restart()" id="fixedParticlesInput">
65-
<option value="1">1</option>
66-
<option value="2" selected="selected">2</option>
67-
<option value="4">4</option>
68-
</select></td>
69-
</tr>
70-
<tr>
71-
<td><label for="timeStepSizeInput">Time step size</label></td>
72-
<td><input onchange="gui.sim.timeStepSize=parseFloat(value)" id="timeStepSizeInput" type="number" value="0.01" step="0.001"></td>
73-
</tr>
74-
<tr>
75-
<td><label for="iterationsInput">Iterations</label></td>
76-
<td><input onchange="gui.sim.numIterations=parseInt(value)" id="iterationsInput" type="number" value="5" step="1"></td>
77-
</tr>
78-
<tr>
79-
<td><label for="gravityInput">Gravity</label></td>
80-
<td><input onchange="gui.sim.gravity=parseFloat(value)" id="gravityInput" type="number" value="-9.81" step="0.01"></td>
81-
</tr>
82-
<tr>
83-
<td><label for="massInput">Mass</label></td>
84-
<td><input onchange="gui.sim.mass=parseFloat(value)" id="massInput" type="number" value="0.5" step="0.01"></td>
85-
</tr>
86-
<tr>
87-
<td></td>
88-
<td><button onclick="gui.restart()" type="button" id="restart">Restart</button></td>
89-
</tr>
90-
<tr>
91-
<td></td>
92-
<td><button onclick="gui.doPause()" type="button" id="Pause">Pause</button></td>
93-
</tr>
94-
</table>
42+
<div class="controls-panel">
43+
<h3>Controls</h3>
44+
<div class="controls-grid">
45+
<label>Current time</label>
46+
<span class="stat-value"><span id="time">0.00</span> s</span>
47+
48+
<label>Time per sim. step</label>
49+
<span class="stat-value"><span id="timePerStep">0.00</span> ms</span>
50+
51+
<label># particles</label>
52+
<span class="stat-value"><span id="numParticles">0</span></span>
53+
54+
<label># constraints</label>
55+
<span class="stat-value"><span id="numConstraints">0</span></span>
56+
57+
<label for="widthInput">Width</label>
58+
<input onchange="gui.restart()" id="widthInput" type="number" value="40" step="1">
59+
60+
<label for="heightInput">Height</label>
61+
<input onchange="gui.restart()" id="heightInput" type="number" value="30" step="1">
62+
63+
<label for="fixedParticlesInput"># fixed particles</label>
64+
<select onchange="gui.restart()" id="fixedParticlesInput">
65+
<option value="1">1</option>
66+
<option value="2" selected="selected">2</option>
67+
<option value="4">4</option>
68+
</select>
69+
70+
<label for="timeStepSizeInput">Time step size</label>
71+
<input onchange="gui.sim.timeStepSize=parseFloat(value)" id="timeStepSizeInput" type="number" value="0.005" step="0.001">
72+
73+
<label for="iterationsInput">Iterations</label>
74+
<input onchange="gui.sim.numIterations=parseInt(value)" id="iterationsInput" type="number" value="2" step="1">
75+
76+
<label for="gravityInput">Gravity</label>
77+
<input onchange="gui.sim.gravity=parseFloat(value)" id="gravityInput" type="number" value="-9.81" step="0.01">
78+
79+
<label for="massInput">Mass</label>
80+
<input onchange="gui.sim.mass=parseFloat(value)" id="massInput" type="number" value="0.5" step="0.01">
81+
<div class="full-width">
82+
<button onclick="gui.restart()" id="restart">&#9654; Restart</button>
83+
</div>
84+
<div class="full-width">
85+
<button onclick="gui.doPause()" id="Pause" class="btn-secondary">&#9646;&#9646; Pause</button>
86+
</div>
87+
</div>
88+
</div>
9589
</td>
9690
</tr>
97-
<tr><td>
91+
</table>
92+
93+
<!-- Theory section -->
94+
<div class="card theory">
9895
<h2>PBD algorithm:</h2>
9996
This example shows the position based dynamics method introduced by Müller et al. [MHHR06,BMM17].
10097
<ol>
@@ -160,8 +157,7 @@ <h3>References</h3>
160157
<li>[BMM17] Jan Bender, Matthias Müller, Miles Macklin. A Survey on Position Based Dynamics, 2017. Eurographics Tutorials, 2017</li>
161158
</ul>
162159

163-
</td></tr>
164-
</table>
160+
</div>
165161

166162
</main>
167163

@@ -511,10 +507,12 @@ <h3>References</h3>
511507

512508
getMousePos(canvas, event)
513509
{
514-
let rect = canvas.getBoundingClientRect();
510+
const rect = canvas.getBoundingClientRect();
511+
const scaleX = canvas.width / rect.width; // buffer / displayed size
512+
const scaleY = canvas.height / rect.height;
515513
return {
516-
x: event.clientX - rect.left,
517-
y: event.clientY - rect.top
514+
x: (event.clientX - rect.left) * scaleX,
515+
y: (event.clientY - rect.top) * scaleY
518516
};
519517
}
520518

‎examples/sph_approximation_user_fct.html‎

Lines changed: 47 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@
22
<html class="no-js" lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<style>
6-
body {font-family: Helvetica, sans-serif;}
7-
table {background-color:#CCDDEE;text-align:left}
8-
</style>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="https://interactivecomputergraphics.github.io/physics-simulation/examples/style.css">
97
<script type="text/x-mathjax-config">
108
MathJax.Hub.Config({
119
extensions: ["tex2jax.js"],
@@ -18,55 +16,53 @@
1816
"HTML-CSS": { fonts: ["TeX"] }
1917
});
2018
</script>
21-
<script type="text/javascript" aync src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js"></script>
19+
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js"></script>
2220
<script src="https://cdn.plot.ly/plotly-2.5.1.min.js"></script>
2321
<title>SPH Approximation</title>
2422
</head>
2523
<body>
24+
25+
<header class="page-header">
26+
<h1>SPH Approximation</h1>
27+
</header>
28+
2629
<main>
27-
<h1 style="text-align:center">SPH Approximation</h1>
28-
<table style="align_center;border-radius: 20px;padding: 20px;margin:auto">
29-
<col width="400">
30-
<col width="400" height="400">
31-
<tr>
32-
<td>
33-
<div id="plotOutput" style="width: 600px; height: 600px;border:2px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
34-
</td>
35-
<td>
36-
<div id="plotOutput2" style="width: 600px; height: 600px;border:2px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
37-
</td>
38-
</tr>
39-
<tr>
40-
<td><table style="margin:20px">
41-
<col width="200" style="padding-right:10px">
42-
<col width="300">
43-
<tr>
44-
<td><label for="function">Function f(x,y)</label></td>
45-
<td><input onchange="plot.reset()" id="function" value="Math.sqrt(x*x +y*y)" type="input"></td>
46-
</tr>
47-
<tr>
48-
<td><label>Particle radius</label></td>
49-
<td><span>0.025</span></td>
50-
</tr>
51-
<tr>
52-
<td><label for="supportRadius">Support radius</label></td>
53-
<td><input onchange="plot.reset()" id="supportRadius" value="0.1" type="input"></td>
54-
</tr>
55-
<tr>
56-
<td><label for="randomOffset">Add random offset</label></td>
57-
<td><input onchange="plot.reset()" id="randomOffset" type="checkbox"></td>
58-
</tr>
59-
<tr>
60-
<td><label for="shepardFilter">Use Shepard filter</label></td>
61-
<td><input onchange="plot.plotFunctions()" id="shepardFilter" type="checkbox"></td>
62-
</tr>
63-
</table></td>
64-
</tr>
65-
<tr><td style="padding-left:20px">
66-
(Note you can use expressions like Math.sin or Math.sqrt in the function field.)
67-
</td></tr>
30+
<!-- Simulation panel: canvas + controls -->
31+
<div class="card sim-panel">
32+
<div class="sim-canvas-wrap">
33+
<div class="plots-grid" width="100%">
34+
<div id="plotOutput" style="border:0px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
35+
<div id="plotOutput2" style="border:0px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
36+
</div>
37+
</div>
38+
</div>
39+
<div class="controls-panel" style="width: 100%;align:center;margin-left:auto;margin-right:auto">
40+
<h3>Controls</h3>
41+
<div class="controls-grid" style="width: 400px;align:left">
42+
<label for="function">Function f(x,y)</label>
43+
<input onchange="plot.reset()" id="function" value="Math.sqrt(x*x +y*y)" type="input">
44+
45+
<label>Particle radius</label>
46+
<span>0.025</span>
47+
48+
<label for="supportRadius">Support radius</label></td>
49+
<input onchange="plot.reset()" id="supportRadius" value="0.1" type="input">
6850

69-
<tr><td colspan="2">
51+
<label for="randomOffset">Add random offset</label>
52+
<input onchange="plot.reset()" id="randomOffset" type="checkbox">
53+
54+
<label for="shepardFilter">Use Shepard filter</label>
55+
<input onchange="plot.plotFunctions()" id="shepardFilter" type="checkbox">
56+
57+
58+
</div>
59+
<p style="padding-left:20px">
60+
(Note you can use expressions like Math.sin or Math.sqrt in the function field.)
61+
</p>
62+
</div>
63+
64+
<!-- Theory section -->
65+
<div class="card theory">
7066
<h2>SPH Approximation of different functions:</h2>
7167
In this example a user-defined function is discretized using SPH with the cubic spline kernel [KBST19]. The left plot shows the particle sampling pattern while the right plot shows the exact functions and their SPH approximations. To compute the SPH approximations the function values are sampled along the red line in the left plot. That means that for each point on the line the neighbors are determined and the SPH approximation formula is applied:
7268
$$\langle f(x,y) \rangle = \sum_j \frac{m_j}{\rho_j} f(x_j,y_j) W_{ij}$$
@@ -81,7 +77,7 @@ <h3>References</h3>
8177
<li>[KBST19] Dan Koschier, Jan Bender, Barbara Solenthaler, Matthias Teschner. Smoothed Particle Hydrodynamics for Physically-Based Simulation of Fluids and Solids. Eurographics Tutorial, 2019</li>
8278
</ul>
8379
</td></tr>
84-
</table>
80+
</div>
8581

8682
</main>
8783

@@ -211,7 +207,7 @@ <h3>References</h3>
211207
let dist2 = (x-p.x)*(x-p.x) + (y-p.y)*(y-p.y);
212208
let r2 = this.supportRadius * this.supportRadius;
213209
if (dist2 - r2 < 1.0e-6)
214-
neighbors.push(i);
210+
neighbors.push(i);
215211
}
216212
return neighbors;
217213
}
@@ -386,8 +382,8 @@ <h3>References</h3>
386382

387383
var layout = {
388384
title: 'Particles',
389-
width: 600,
390-
height: 600,
385+
width: 550,
386+
height: 550,
391387
xaxis: {
392388
autorange: [0,2],
393389
},

0 commit comments

Comments
 (0)