Skip to content

Commit 4615e9f

Browse files
janbenderjanbender
committed
- new style
1 parent 1e9e05d commit 4615e9f

3 files changed

Lines changed: 65 additions & 52 deletions

File tree

‎examples/sdf_box_plot.html‎

Lines changed: 30 additions & 24 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,35 +16,44 @@
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>Signed Distance Function - Box</title>
2321
</head>
2422
<body>
23+
24+
<header class="page-header">
25+
<h1>Signed Distance Function - Box</h1>
26+
</header>
27+
2528
<main>
26-
<h1 style="text-align:center">Signed Distance Function - Box</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>Distance</label></td>
40-
<td><span id="distance">0</span></td>
41-
</tr>
42-
<tr>
43-
<td><label for="toleranceInput">Tolerance</label></td>
44-
<td><input onchange="if (value < 0.0) value = 0.0; gui.sim.tolerance=parseFloat(value); gui.update()" id="toleranceInput" type="number" value="0.0" min="0" step="0.1"></td>
45-
</tr>
46-
</table>
42+
<div class="controls-panel">
43+
<h3>Controls</h3>
44+
<div class="controls-grid">
45+
<label>Distance</label>
46+
<span id="distance">0</span>
47+
48+
<label for="toleranceInput">Tolerance</label>
49+
<input onchange="if (value < 0.0) value = 0.0; gui.sim.tolerance=parseFloat(value); gui.update()" id="toleranceInput" type="number" value="0.0" min="0" step="0.1">
50+
</div>
4751
</td>
4852
</tr>
49-
<tr><td>
53+
</table>
54+
55+
<!-- Theory section -->
56+
<div class="card theory">
5057
<h2>Signed distance function of a box:</h2>
5158
The signed distance function of a box with width $w$ and height $h$ is defined as:
5259
$$\Phi(\mathbf{x}) = \min(\max(d_x,d_y),0.0) + \left \|\begin{pmatrix} \max(d_x,0.0) \\ \max(d_y,0.0) \end{pmatrix} \right \| - \text{tolerance},$$
@@ -72,8 +79,7 @@ <h3>Surface normal vector</h3>
7279
<h3>Closest point on the surface</h3>
7380
The closest point $\mathbf s$ on the surface of the box (yellow) can be determined by starting at the point $\mathbf x$ (red) and going by the signed distance in the direction of the negative normal vector:
7481
$$\mathbf s = \mathbf x - \Phi(\mathbf{x}) \mathbf n.$$
75-
</td></tr>
76-
</table>
82+
</div>
7783

7884
</main>
7985

‎examples/sdf_sphere_plot.html‎

Lines changed: 35 additions & 27 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,35 +16,44 @@
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>Signed Distance Function - Sphere</title>
2321
</head>
2422
<body>
23+
24+
<header class="page-header">
25+
<h1>Signed Distance Function - Sphere</h1>
26+
</header>
27+
2528
<main>
26-
<h1 style="text-align:center">Signed Distance Function - Sphere</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>Distance</label></td>
40-
<td><span id="distance">0</span></td>
41-
</tr>
42-
<tr>
43-
<td><label for="radiusInput">Radius</label></td>
44-
<td><input onchange="gui.sim.radius=parseFloat(value); gui.update()" id="radiusInput" type="number" value="5.0" step="0.1"></td>
45-
</tr>
46-
</table>
42+
<div class="controls-panel">
43+
<h3>Controls</h3>
44+
<div class="controls-grid">
45+
<label>Distance</label>
46+
<span id="distance">0</span>
47+
48+
<label for="radiusInput">Radius</label>
49+
<input onchange="gui.sim.radius=parseFloat(value); gui.update()" id="radiusInput" type="number" value="5.0" step="0.1">
50+
</div>
4751
</td>
4852
</tr>
49-
<tr><td>
53+
</table>
54+
55+
<!-- Theory section -->
56+
<div class="card theory">
5057
<h2>Signed distance function of a sphere:</h2>
5158
The signed distance function of a sphere with radius $r$ is defined as:
5259
$$\Phi(\mathbf{x}) = \| \mathbf{x} - \mathbf{x}_{\text{sphere}} \| - r.$$
@@ -60,8 +67,7 @@ <h3>Surface normal vector</h3>
6067
<h3>Closest point on the surface</h3>
6168
The closest point $\mathbf s$ on the surface of the sphere (yellow) can be determined by starting at the point $\mathbf x$ (red) and going by the signed distance in the direction of the negative normal vector:
6269
$$\mathbf s = \mathbf x - \Phi(\mathbf{x}) \mathbf n.$$
63-
</td></tr>
64-
</table>
70+
</div>
6571

6672
</main>
6773

@@ -277,10 +283,12 @@ <h3>Closest point on the surface</h3>
277283

278284
getMousePos(canvas, event)
279285
{
280-
let rect = canvas.getBoundingClientRect();
286+
const rect = canvas.getBoundingClientRect();
287+
const scaleX = canvas.width / rect.width; // buffer / displayed size
288+
const scaleY = canvas.height / rect.height;
281289
return {
282-
x: (event.clientX - rect.left) * canvas.width / rect.width,
283-
y: (event.clientY - rect.top) * canvas.height / rect.height
290+
x: (event.clientX - rect.left) * scaleX,
291+
y: (event.clientY - rect.top) * scaleY
284292
};
285293
}
286294

‎examples/wcsph.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,6 @@ <h3>References</h3>
138138
<li>[BT07] Markus Becker and Matthias Teschner. Weakly compressible SPH for free surface flows. In Proceedings of ACM SIGGRAPH/Eurographics Symposium on Computer Animation, 2007. Eurographics Association.</li>
139139
<li>[AIA+12] Nadir Akinci, Markus Ihmsen, Gizem Akinci, Barbara Solenthaler, and Matthias Teschner, "Versatile rigid-fluid coupling for incompressible SPH", ACM Transactions on Graphics 31(4), 2012</li>
140140
</ul>
141-
</td></tr>
142141
</div>
143142

144143
</main>

0 commit comments

Comments
 (0)