Skip to content

Commit 1e9e05d

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

2 files changed

Lines changed: 119 additions & 143 deletions

File tree

‎examples/spring_damper.html‎

Lines changed: 61 additions & 73 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,78 +16,69 @@
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>Mass-Spring-Damper Model</title>
2422
</head>
2523
<body>
24+
25+
<header class="page-header">
26+
<h1>Mass-Spring-Damper Model</h1>
27+
</header>
28+
2629
<main>
27-
<h1 style="text-align:center">Mass-Spring-Damper Model</h1>
28-
<table style="align_center;border-radius: 20px;padding: 20px;margin:auto">
29-
<col width="700">
30-
<col width="400">
31-
<tr>
32-
<td>
33-
<canvas id="simCanvas" width="700" height="600" style="border:2px solid #000000;border-radius: 20px;background-color:#FFFFFF">Your browser does not support the HTML5 canvas tag.</canvas>
34-
</td>
35-
<td>
36-
<div id="plotOutput" style="width: 600px; height: 600px;border:2px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
37-
</td>
38-
</tr>
39-
<tr>
40-
<td>
41-
<table>
42-
<col width="200" style="padding-right:10px">
43-
<col width="100">
44-
<tr>
45-
<td><label>Current time</label></td>
46-
<td><span id="time">0.00</span> s</td>
47-
</tr>
48-
<tr>
49-
<td><label>Time per sim. step</label></td>
50-
<td><span id="timePerStep">0.00</span> ms</td>
51-
</tr>
52-
<tr>
53-
<td><label for="timeStepSizeInput">Time step size</label></td>
54-
<td><input onchange="gui.sim.timeStepSize=parseFloat(value)" id="timeStepSizeInput" type="number" value="0.01" step="0.001"></td>
55-
</tr>
56-
<tr>
57-
<td><label for="restLengthInput">Rest length</label></td>
58-
<td><input id="restLengthInput" type="number" value="4.0" step="0.1"></td>
59-
</tr>
60-
<tr>
61-
<td><label for="stiffnessInput">Stiffness</label></td>
62-
<td><input onchange="gui.sim.stiffness=parseFloat(value)" id="stiffnessInput" type="number" value="5.0" step="1.0"></td>
63-
</tr>
64-
<tr>
65-
<td><label for="dampingInput">Damping</label></td>
66-
<td><input onchange="gui.sim.damping=parseFloat(value)" id="dampingInput" type="number" value="0.0" step="0.01"></td>
67-
</tr>
68-
<tr>
69-
<td><label for="massInput">Mass</label></td>
70-
<td><input onchange="gui.sim.mass=parseFloat(value)" id="massInput" type="number" value="0.5" step="0.01"></td>
71-
</tr>
72-
<tr>
73-
<td><label for="timeIntegrationInput">Time integration method</label></td>
74-
<td><select onchange="gui.sim.timeIntegrationMethod=value" id="timeIntegrationInput">
75-
<option>Explicit Euler</option>
76-
<option selected="selected">Symplectic Euler</option>
77-
<option>Runge-Kutta 2</option>
78-
<option>Implicit Euler</option>
79-
</select>
80-
</tr>
81-
<tr>
82-
<td></td>
83-
<td><button onclick="gui.restart()" type="button" id="restart">Restart</button></td>
84-
</tr>
85-
<tr>
86-
<td></td>
87-
<td><button onclick="gui.doPause()" type="button" id="Pause">Pause</button></td>
88-
</tr>
89-
</table>
90-
</td>
91-
</tr>
92-
<tr><td>
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+
<canvas id="simCanvas" width="600" height="600" style="border:0px solid #000000;border-radius: 20px;background-color:#FFFFFF">Your browser does not support the HTML5 canvas tag.</canvas>
35+
<div id="plotOutput" style="width: 600px; height: 600px;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>Current time</label>
43+
<span class="stat-value"><span id="time">0.00</span> s</span>
44+
45+
<label>Time per sim. step</label></td>
46+
<span class="stat-value"><span id="timePerStep">0.00</span> ms</span>
47+
48+
<label for="timeStepSizeInput">Time step size</label>
49+
<input onchange="gui.sim.timeStepSize=parseFloat(value)" id="timeStepSizeInput" type="number" value="0.01" step="0.001">
50+
51+
<label for="restLengthInput">Rest length</label>
52+
<input id="restLengthInput" type="number" value="4.0" step="0.1">
53+
54+
<label for="stiffnessInput">Stiffness</label>
55+
<input onchange="gui.sim.stiffness=parseFloat(value)" id="stiffnessInput" type="number" value="5.0" step="1.0">
56+
57+
<label for="dampingInput">Damping</label>
58+
<input onchange="gui.sim.damping=parseFloat(value)" id="dampingInput" type="number" value="0.0" step="0.01">
59+
60+
<label for="massInput">Mass</label>
61+
<input onchange="gui.sim.mass=parseFloat(value)" id="massInput" type="number" value="0.5" step="0.01">
62+
63+
<label for="timeIntegrationInput">Time integration method</label>
64+
<select onchange="gui.sim.timeIntegrationMethod=value" id="timeIntegrationInput">
65+
<option>Explicit Euler</option>
66+
<option selected="selected">Symplectic Euler</option>
67+
<option>Runge-Kutta 2</option>
68+
<option>Implicit Euler</option>
69+
</select>
70+
71+
<div class="full-width">
72+
<button onclick="gui.restart()" id="restart">&#9654; Restart</button>
73+
</div>
74+
<div class="full-width">
75+
<button onclick="gui.doPause()" id="Pause" class="btn-secondary">&#9646;&#9646; Pause</button>
76+
</div>
77+
</div>
78+
</div>
79+
80+
<!-- Theory section -->
81+
<div class="card theory">
9382
<h2>Mass spring algorithm:</h2>
9483
This example shows a mass spring system that consists of particles linked by damped springs:
9584
<ol>
@@ -149,8 +138,7 @@ <h3>2. Time integration</h3>
149138
\end{align*}$$
150139
where $\mathbf f^{\text{ext}}$ are the external forces.
151140

152-
</td></tr>
153-
</table>
141+
</div>
154142

155143
</main>
156144

‎examples/spring_plot.html‎

Lines changed: 58 additions & 70 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,74 +16,66 @@
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>Mass-Spring Model</title>
2422
</head>
2523
<body>
24+
25+
<header class="page-header">
26+
<h1>Mass-Spring Model</h1>
27+
</header>
28+
2629
<main>
27-
<h1 style="text-align:center">Mass-Spring Model</h1>
28-
<table style="align_center;border-radius: 20px;padding: 20px;margin:auto">
29-
<col width="700">
30-
<col width="400">
31-
<tr>
32-
<td>
33-
<canvas id="simCanvas" width="700" height="600" style="border:2px solid #000000;border-radius: 20px;background-color:#FFFFFF">Your browser does not support the HTML5 canvas tag.</canvas>
34-
</td>
35-
<td>
36-
<div id="plotOutput" style="width: 600px; height: 600px;border:2px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
37-
</td>
38-
</tr>
39-
<tr>
40-
<td>
41-
<table>
42-
<col width="200" style="padding-right:10px">
43-
<col width="100">
44-
<tr>
45-
<td><label>Current time</label></td>
46-
<td><span id="time">0.00</span> s</td>
47-
</tr>
48-
<tr>
49-
<td><label>Time per sim. step</label></td>
50-
<td><span id="timePerStep">0.00</span> ms</td>
51-
</tr>
52-
<tr>
53-
<td><label for="timeStepSizeInput">Time step size</label></td>
54-
<td><input onchange="gui.sim.timeStepSize=parseFloat(value)" id="timeStepSizeInput" type="number" value="0.005" step="0.001"></td>
55-
</tr>
56-
<tr>
57-
<td><label for="initialLengthInput">Initial length</label></td>
58-
<td><input onchange="gui.restart()" id="initialLengthInput" type="number" value="2.0" step="0.1"></td>
59-
</tr>
60-
<tr>
61-
<td><label for="stiffnessInput">Stiffness</label></td>
62-
<td><input onchange="gui.restart()" id="stiffnessInput" type="number" value="5.0" step="1.0"></td>
63-
</tr>
64-
<tr>
65-
<td><label for="massInput">Mass</label></td>
66-
<td><input onchange="gui.restart()" id="massInput" type="number" value="0.5" step="0.01"></td>
67-
</tr>
68-
<tr>
69-
<td><label for="timeIntegrationInput">Time integration method</label></td>
70-
<td><select onchange="gui.sim.timeIntegrationMethod=value" id="timeIntegrationInput">
71-
<option>Explicit Euler</option>
72-
<option selected="selected">Symplectic Euler</option>
73-
<option>Runge-Kutta 2</option>
74-
<option>Implicit Euler</option>
75-
</select>
76-
</tr>
77-
<tr>
78-
<td></td>
79-
<td><button onclick="gui.restart()" type="button" id="restart">Restart</button></td>
80-
</tr>
81-
<tr>
82-
<td></td>
83-
<td><button onclick="gui.doPause()" type="button" id="Pause">Pause</button></td>
84-
</tr>
85-
</table>
86-
</td>
87-
</tr>
88-
<tr><td>
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+
<canvas id="simCanvas" width="600" height="600" style="border:0px solid #000000;border-radius: 20px;background-color:#FFFFFF">Your browser does not support the HTML5 canvas tag.</canvas>
35+
<div id="plotOutput" style="width: 600px; height: 600px;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>Current time</label>
43+
<span class="stat-value"><span id="time">0.00</span> s</span>
44+
45+
<label>Time per sim. step</label></td>
46+
<span class="stat-value"><span id="timePerStep">0.00</span> ms</span>
47+
48+
<label for="timeStepSizeInput">Time step size</label>
49+
<input onchange="gui.sim.timeStepSize=parseFloat(value)" id="timeStepSizeInput" type="number" value="0.005" step="0.001">
50+
51+
<label for="initialLengthInput">Initial length</label>
52+
<input onchange="gui.restart()" id="initialLengthInput" type="number" value="2.0" step="0.1">
53+
54+
<label for="stiffnessInput">Stiffness</label>
55+
<input onchange="gui.restart()" id="stiffnessInput" type="number" value="5.0" step="1.0">
56+
57+
<label for="massInput">Mass</label>
58+
<input onchange="gui.restart()" id="massInput" type="number" value="0.5" step="0.01">
59+
60+
<label for="timeIntegrationInput">Time integration method</label>
61+
<select onchange="gui.sim.timeIntegrationMethod=value" id="timeIntegrationInput">
62+
<option>Explicit Euler</option>
63+
<option selected="selected">Symplectic Euler</option>
64+
<option>Runge-Kutta 2</option>
65+
<option>Implicit Euler</option>
66+
</select>
67+
68+
<div class="full-width">
69+
<button onclick="gui.restart()" id="restart">&#9654; Restart</button>
70+
</div>
71+
<div class="full-width">
72+
<button onclick="gui.doPause()" id="Pause" class="btn-secondary">&#9646;&#9646; Pause</button>
73+
</div>
74+
</div>
75+
</div>
76+
77+
<!-- Theory section -->
78+
<div class="card theory">
8979
<h2>Mass spring algorithm:</h2>
9080
This 1D example shows the motion of a mass spring system that consists of a static and a dynamic particle linked by a spring. In each simulation step the following steps are performed:
9181
<ol>
@@ -165,9 +155,7 @@ <h4>Implicit Euler</h4>
165155
\end{align*}
166156
$$
167157

168-
169-
</td></tr>
170-
</table>
158+
</div>
171159

172160
</main>
173161

0 commit comments

Comments
 (0)