Skip to content

Commit 4aa9205

Browse files
janbenderjanbender
committed
- new style
1 parent d4ab6f9 commit 4aa9205

1 file changed

Lines changed: 51 additions & 48 deletions

File tree

‎examples/time_integration.html‎

Lines changed: 51 additions & 48 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,59 +16,65 @@
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>Time integration</title>
2321
</head>
2422
<body>
23+
24+
<header class="page-header">
25+
<h1>Time integration</h1>
26+
</header>
27+
2528
<main>
26-
<h1 style="text-align:center">Time integration</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 for="timeStepSizeInput">Time step size</label></td>
44-
<td><input onchange="gui.restart()" id="timeStepSizeInput" type="number" value="0.05" step="0.01"></td>
45-
</tr>
46-
<tr>
47-
<td><label for="timeIntegrationInput">Time integration method</label></td>
48-
<td><select onchange="gui.restart()" id="timeIntegrationInput">
49-
<option>Explicit Euler</option>
50-
<option selected="selected">Symplectic Euler</option>
51-
<option>Runge-Kutta 2</option>
52-
</select>
53-
</tr>
54-
<tr>
55-
<td><label for="gravityInput">Gravity</label></td>
56-
<td><input onchange="gui.restart()" id="gravityInput" type="number" value="-9.81" step="0.01"></td>
57-
</tr>
58-
<tr>
59-
<td><label for="massInput">Mass</label></td>
60-
<td><input onchange="gui.restart()" id="massInput" type="number" value="1.0" step="0.01"></td>
61-
</tr>
62-
<tr>
63-
<td></td>
64-
<td><button onclick="gui.restart()" type="button" id="restart">Restart</button></td>
65-
</tr>
66-
<tr>
67-
<td></td>
68-
<td><button onclick="gui.doPause()" type="button" id="Pause">Pause</button></td>
69-
</tr>
70-
</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 for="timeStepSizeInput">Time step size</label>
49+
<input onchange="gui.restart()" id="timeStepSizeInput" type="number" value="0.05" step="0.01">
50+
51+
<label for="timeIntegrationInput">Time integration method</label>
52+
<select onchange="gui.restart()" id="timeIntegrationInput">
53+
<option>Explicit Euler</option>
54+
<option selected="selected">Symplectic Euler</option>
55+
<option>Runge-Kutta 2</option>
56+
</select>
57+
58+
<label for="gravityInput">Gravity</label>
59+
<input onchange="gui.restart()" id="gravityInput" type="number" value="-9.81" step="0.01">
60+
61+
<label for="massInput">Mass</label>
62+
<input onchange="gui.restart()" id="massInput" type="number" value="1.0" step="0.01">
63+
64+
<div class="full-width">
65+
<button onclick="gui.restart()" id="restart">&#9654; Restart</button>
66+
</div>
67+
<div class="full-width">
68+
<button onclick="gui.doPause()" id="Pause" class="btn-secondary">&#9646;&#9646; Pause</button>
69+
</div>
70+
</div>
71+
</div>
7172
</td>
7273
</tr>
73-
<tr><td>
74+
</table>
75+
76+
<!-- Theory section -->
77+
<div class="card theory">
7478
<h2>Time integration methods:</h2>
7579
This example shows the motion of a particle with an initial velocity. Moreover, a constant gravitational acceleration is acting on the particle. In this special case an analytic solution can be computed as:
7680
$$\begin{align*}
@@ -110,8 +114,7 @@ <h3>Runge-Kutta 2</h3>
110114
\mathbf s(t + \Delta t) &= \mathbf s(t) + \mathbf k_2.
111115
\end{align*}$$
112116
Note that the Runge-Kutta method has multiple stages (in our case 2) to achieve a higher-order accuracy. However, this approach is more expensive than the Euler methods since the function has to be evaluated once per stage.
113-
</td></tr>
114-
</table>
117+
</div>
115118

116119
</main>
117120

0 commit comments

Comments
 (0)