Skip to content

Commit 2848515

Browse files
janbenderjanbender
committed
- new style
1 parent 71f72e2 commit 2848515

1 file changed

Lines changed: 70 additions & 67 deletions

File tree

‎examples/deformation_gradient_strain.html‎

Lines changed: 70 additions & 67 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,75 +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" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js"></script>
2220
<title>Deformation Gradient - Strain</title>
2321
</head>
2422
<body>
23+
24+
<header class="page-header">
25+
<h1>Deformation Gradient - Strain</h1>
26+
</header>
27+
2528
<main>
26-
<h1 style="text-align:center">Deformation Gradient - Strain</h1>
27-
<table style="align_center;border-radius: 20px;padding: 20px;margin:auto">
28-
<col width="1100">
29-
<col width="400">
29+
<!-- Simulation panel: canvas + controls -->
30+
<table style="align_center;border-radius: 10px;padding: 10px;margin:auto">
31+
<col width="60%">
32+
<col width="40%">
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="960" height="1150" 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 style="text-align:left">
36-
<col width="100">
37-
<col width="100">
38-
<tr>
39-
<td><label for="translation_x">Translation - x</label></td>
40-
<td><input onchange="gui.recompute()" id="translation_x" type="number" value="0.0" step="0.1"></td>
41-
</tr>
42-
<tr>
43-
<td><label for="translation_y">Translation - y</label></td>
44-
<td><input onchange="gui.recompute()" id="translation_y" type="number" value="0.0" step="0.1"></td>
45-
</tr>
46-
<tr>
47-
<td><label for="rotation">Rotation</label></td>
48-
<td><input onchange="gui.recompute()" id="rotation" type="number" value="0" step="0.1"></td>
49-
</tr>
50-
<tr>
51-
<td><label for="scale_x">Scale - x</label></td>
52-
<td><input onchange="gui.recompute()" id="scale_x" type="number" value="1.0" step="0.1"></td>
53-
</tr>
54-
<tr>
55-
<td><label for="scale_y">Scale - y</label></td>
56-
<td><input onchange="gui.recompute()" id="scale_y" type="number" value="1.0" step="0.1"></td>
57-
</tr>
58-
<tr>
59-
<td><label for="shear_x">Shear - x</label></td>
60-
<td><input onchange="gui.recompute()" id="shear_x" type="number" value="0.0" step="0.1"></td>
61-
</tr>
62-
<tr>
63-
<td><label for="shear_y">Shear - y</label></td>
64-
<td><input onchange="gui.recompute()" id="shear_y" type="number" value="0.0" step="0.1"></td>
65-
</tr>
66-
<tr>
67-
<td colspan="2">
68-
<h4>Transformation matrix:</h4>
69-
<p id="eq:T">
70-
$$\mathbf{T} = \mathbf{R} \mathbf{S} \mathbf{U} = \begin{pmatrix} 1 & 0 \\ 0 & 1 \end{pmatrix}$$
71-
</p>
72-
<h4>Deformation gradient:</h4>
73-
<p id="eq:F">
74-
$$\mathbf{F} = \mathbf{D}_s \mathbf{D}_m^{-1} = \begin{pmatrix} 1 & 0 \\ 0 & 1 \end{pmatrix}$$
75-
</p>
76-
<h4>Green strain tensor:</h4>
77-
<p id="eq:E">
78-
$$\mathbf{E}_\text{Green} = \frac12 (\mathbf{F}^T \mathbf{F} - \mathbf{I}) = \begin{pmatrix} 0 & 0 \\ 0 & 0 \end{pmatrix}$$
79-
</p>
80-
<h4>Cauchy strain tensor:</h4>
81-
<p id="eq:ECauchy">
82-
$$\mathbf{E}_\text{Cauchy} = \frac12 (\mathbf{F} + \mathbf{F}^T) - \mathbf{I} = \begin{pmatrix} 0 & 0 \\ 0 & 0 \end{pmatrix}$$
83-
</p>
84-
</td>
85-
</tr>
86-
</table>
42+
<div class="controls-panel">
43+
<h3>Controls</h3>
44+
<div class="controls-grid">
45+
<label for="translation_x">Translation - x</label>
46+
<input onchange="gui.recompute()" id="translation_x" type="number" value="0.0" step="0.1">
47+
48+
<label for="translation_y">Translation - y</label>
49+
<input onchange="gui.recompute()" id="translation_y" type="number" value="0.0" step="0.1">
50+
51+
<label for="rotation">Rotation</label>
52+
<input onchange="gui.recompute()" id="rotation" type="number" value="0" step="0.1">
53+
54+
<label for="scale_x">Scale - x</label>
55+
<input onchange="gui.recompute()" id="scale_x" type="number" value="1.0" step="0.1">
56+
57+
<label for="scale_y">Scale - y</label>
58+
<input onchange="gui.recompute()" id="scale_y" type="number" value="1.0" step="0.1">
59+
60+
<label for="shear_x">Shear - x</label>
61+
<input onchange="gui.recompute()" id="shear_x" type="number" value="0.0" step="0.1">
62+
63+
<label for="shear_y">Shear - y</label>
64+
<input onchange="gui.recompute()" id="shear_y" type="number" value="0.0" step="0.1">
65+
66+
<div style="grid-column: 1 /span 2;">
67+
<h4>Transformation matrix:</h4>
68+
<p id="eq:T">
69+
$$\mathbf{T} = \mathbf{R} \mathbf{S} \mathbf{U} = \begin{pmatrix} 1 & 0 \\ 0 & 1 \end{pmatrix}$$
70+
</p>
71+
72+
<h4>Deformation gradient:</h4>
73+
<p id="eq:F">
74+
$$\mathbf{F} = \mathbf{D}_s \mathbf{D}_m^{-1} = \begin{pmatrix} 1 & 0 \\ 0 & 1 \end{pmatrix}$$
75+
</p>
76+
77+
<h4>Green strain tensor:</h4>
78+
<p id="eq:E">
79+
$$\mathbf{E}_\text{Green} = \frac12 (\mathbf{F}^T \mathbf{F} - \mathbf{I}) = \begin{pmatrix} 0 & 0 \\ 0 & 0 \end{pmatrix}$$
80+
</p>
81+
82+
<h4>Cauchy strain tensor:</h4>
83+
<p id="eq:ECauchy">
84+
$$\mathbf{E}_\text{Cauchy} = \frac12 (\mathbf{F} + \mathbf{F}^T) - \mathbf{I} = \begin{pmatrix} 0 & 0 \\ 0 & 0 \end{pmatrix}$$
85+
</p>
86+
</div>
87+
</div>
88+
</div>
8789
</td>
8890
</tr>
89-
<tr><td>
91+
</table>
92+
93+
<!-- Theory section -->
94+
<div class="card theory">
9095
<h2>Computation of deformation gradient and strain tensor</h2>
9196
<p>This example shows a single linear finite element (triangle) which is deformed by a transformation matrix. This matrix is computed as
9297
$$\mathbf{T} = \mathbf{R} \mathbf{S} \mathbf{U},$$
@@ -109,9 +114,7 @@ <h2>Computation of deformation gradient and strain tensor</h2>
109114

110115
<p>This example shows that the deformation gradient extracts exactly the original transformation from the deformed configuration of the triangle vertices. Moreover, we can see that the linear Cauchy strain tensor is not zero for a pure rotation. This means that a rotation, which is a rigid body transformation, leads to a non-zero strain which can cause artifacts in the simulation.
111116
</p>
112-
113-
</td></tr>
114-
</table>
117+
</div>
115118

116119
</main>
117120

@@ -121,7 +124,7 @@ <h2>Computation of deformation gradient and strain tensor</h2>
121124
constructor()
122125
{
123126
// initialize values
124-
this.x0 = [[0,0], [6,0], [3,5]];
127+
this.x0 = [[-3,-1.5], [3,-1.5], [0,3.5]];
125128
this.x = [[0,0], [6,0], [3,5]];
126129
this.T = [[1,0], [0,1]];
127130
this.F = [[1,0], [0,1]];

0 commit comments

Comments
 (0)