Skip to content

Commit c35495e

Browse files
janbenderjanbender
committed
- new style
1 parent ec17ffe commit c35495e

3 files changed

Lines changed: 224 additions & 257 deletions

File tree

‎examples/Newton_minimization.html‎

Lines changed: 47 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
<!doctype html>
1+
<!doctype html>
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,56 @@
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>Newton's method for minimization</title>
2422
</head>
2523
<body>
24+
25+
<header class="page-header">
26+
<h1>Newton's method for minimization</h1>
27+
</header>
28+
2629
<main>
27-
<h1 style="text-align:center">Newton's method for minimization</h1>
28-
<table style="align_center;border-radius: 20px;padding: 20px;margin:auto">
29-
<col width="1000">
30-
<tr>
31-
<td>
32-
<div id="plotOutput" style="width: 1000px; height: 600px;border:2px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
33-
</td>
34-
</tr>
35-
<tr>
36-
<td><table style="margin:20px">
37-
<col width="200" style="padding-right:10px">
38-
<col width="100">
39-
<tr>
40-
<td><label for="newton_steps">Newton steps</label></td>
41-
<td><input type="text" id="textInput" value="1" readonly></td>
42-
</tr>
43-
<tr>
44-
<td></td>
45-
<td><input onchange="document.getElementById('textInput').value=this.value;plot.reset()" id="newton_steps" value="1" type="range" min="1" max="50" step="1"></td>
46-
</tr>
47-
<tr>
48-
<td><label for="fct">Function</label></td>
49-
<td><select onchange="plot.reset()" id="fct" size="1">
50-
<option selected="selected">Quartic function</option>
51-
<option>Sinusoidal function</option>
52-
<option>Exponential function</option>
53-
<option>Logarithmic function</option>
54-
</select>
55-
</td>
56-
</tr>
57-
</table></td>
58-
</tr>
30+
<!-- Simulation panel: canvas + controls -->
31+
<div class="card sim-panel">
32+
<div class="sim-canvas-wrap">
33+
<div id="plotOutput" style="width: 100%; height: auto;border:0px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
34+
</div>
35+
</div>
36+
<div class="controls-panel" style="width: 100%;align:center;margin-left:auto;margin-right:auto">
37+
<h3>Controls</h3>
38+
<div class="controls-grid" style="width: 400px;align:left">
39+
<label for="newton_steps">Newton steps</label>
40+
<span class="stat-value"><input type="text" id="textInput" value="1" readonly></span>
5941

60-
<tr><td>
61-
<h2>Newton's method for minimization</h2>
62-
63-
<p>Newton's method can be used to find the minimum of a function $f(x)$. At a minimum the derivative vanishes, $f'(x^*) = 0$, so minimization reduces to finding the root of $f'(x)$.</p>
42+
<label></label>
43+
<input onchange="document.getElementById('textInput').value=this.value;plot.reset()" id="newton_steps" value="1" type="range" min="1" max="50" step="1">
44+
45+
<label for="fct">Function</label>
46+
<select onchange="plot.reset()" id="fct" size="1">
47+
<option selected="selected">Quartic function</option>
48+
<option>Sinusoidal function</option>
49+
<option>Exponential function</option>
50+
<option>Logarithmic function</option>
51+
</select>
52+
</div>
53+
</div>
54+
55+
<!-- Theory section -->
56+
<div class="card theory">
57+
<h2>Newton's method for minimization</h2>
58+
59+
<p>Newton's method can be used to find the minimum of a function $f(x)$. At a minimum the derivative vanishes, $f'(x^*) = 0$, so minimization reduces to finding the root of $f'(x)$.</p>
6460

65-
<p>At each iterate $x_n$ a quadratic (second-order Taylor) approximation is formed:</p>
66-
$$q(x) = f(x_n) + f'(x_n)(x-x_n) + \frac{1}{2}f''(x_n)(x-x_n)^2$$
67-
<p>The next iterate $x_{n+1}$ is the minimizer of $q(x)$, giving the update rule:</p>
68-
$$\begin{equation*}
69-
x_{n+1} = x_{n} - \frac{f'(x_n)}{f''(x_n)}
70-
\end{equation*}$$
71-
<p>The green curves show the quadratic approximation at each step. Provided $f''(x_n) > 0$ and $x_0$ is close enough to a local minimum, the method converges rapidly.</p>
72-
</td></tr>
73-
</table>
61+
<p>At each iterate $x_n$ a quadratic (second-order Taylor) approximation is formed:</p>
62+
$$q(x) = f(x_n) + f'(x_n)(x-x_n) + \frac{1}{2}f''(x_n)(x-x_n)^2$$
63+
<p>The next iterate $x_{n+1}$ is the minimizer of $q(x)$, giving the update rule:</p>
64+
$$\begin{equation*}
65+
x_{n+1} = x_{n} - \frac{f'(x_n)}{f''(x_n)}
66+
\end{equation*}$$
67+
<p>The green curves show the quadratic approximation at each step. Provided $f''(x_n) > 0$ and $x_0$ is close enough to a local minimum, the method converges rapidly.</p>
68+
</div>
7469

7570
</main>
7671

@@ -289,8 +284,7 @@ <h2>Newton's method for minimization</h2>
289284

290285
var layout = {
291286
title: "Minimization with Newton's method",
292-
width: 1000,
293-
height: 600
287+
autosize: true
294288
};
295289

296290
Plotly.newPlot('plotOutput', data, layout);

‎examples/Newton_minimization_2D.html‎

Lines changed: 50 additions & 55 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,50 +16,48 @@
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>Newton's method for 2D minimization</title>
2422
</head>
2523
<body>
24+
25+
<header class="page-header">
26+
<h1>Newton's method for 2D minimization</h1>
27+
</header>
28+
2629
<main>
27-
<h1 style="text-align:center">Newton's method for 2D minimization</h1>
28-
<table style="align_center;border-radius: 20px;padding: 20px;margin:auto">
29-
<col width="1000">
30-
<tr>
31-
<td>
32-
<div id="plotOutput" style="width: 1000px; height: 700px;border:2px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
30+
<!-- Simulation panel: canvas + controls -->
31+
<div class="card sim-panel">
32+
<div class="sim-canvas-wrap">
33+
<div id="plotOutput" style="border:0px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
3334
<p style="margin:6px 0 0 4px;color:#555;font-size:0.9em">Click anywhere on the plot to set the starting point x&#x2080;.</p>
34-
</td>
35-
</tr>
36-
<tr>
37-
<td><table style="margin:20px">
38-
<col width="200" style="padding-right:10px">
39-
<col width="100">
40-
<tr>
41-
<td><label>Newton steps</label></td>
42-
<td style="display:flex;align-items:center;gap:6px">
43-
<button onclick="plot.changeSteps(-1)" type="button">&#8722;</button>
44-
<input type="text" id="textInput" value="1" readonly style="width:36px;text-align:center">
45-
<button onclick="plot.changeSteps(+1)" type="button">&#43;</button>
46-
</td>
47-
</tr>
48-
<tr>
49-
<td><label>Starting point x&#x2080;</label></td>
50-
<td><span id="x0Display" style="font-family:monospace"></span></td>
51-
</tr>
52-
<tr>
53-
<td><label for="fct">Function</label></td>
54-
<td><select onchange="plot.reset()" id="fct" size="1">
55-
<option selected="selected">Elliptic quadratic</option>
56-
<option>Rosenbrock function</option>
57-
<option>Himmelblau function</option>
58-
</select>
59-
</td>
60-
</tr>
61-
</table></td>
62-
</tr>
63-
64-
<tr><td>
35+
</div>
36+
</div>
37+
<div class="controls-panel" style="width: 100%;align:center;margin-left:auto;margin-right:auto">
38+
<h3>Controls</h3>
39+
<div class="controls-grid" style="width: 400px;align:left">
40+
<label>Newton steps</label>
41+
<p style="display:flex;align-items:center;gap:6px">
42+
<button onclick="plot.changeSteps(-1)" type="button">&#8722;</button>
43+
<input type="text" id="textInput" value="1" readonly style="width:36px;text-align:center">
44+
<button onclick="plot.changeSteps(+1)" type="button">&#43;</button>
45+
</p>
46+
47+
<label>Starting point x&#x2080;</label>
48+
<span id="x0Display" style="font-family:monospace"></span>
49+
50+
<label for="fct">Function</label>
51+
<select onchange="plot.reset()" id="fct" size="1">
52+
<option selected="selected">Elliptic quadratic</option>
53+
<option>Rosenbrock function</option>
54+
<option>Himmelblau function</option>
55+
</select>
56+
</div>
57+
</div>
58+
59+
<!-- Theory section -->
60+
<div class="card theory">
6561
<h2>Newton's method for 2D minimization</h2>
6662

6763
<p>In two dimensions, Newton's method minimizes $f(\mathbf{x})$, $\mathbf{x} = (x_1, x_2)^\top$, by
@@ -94,8 +90,7 @@ <h3>Example functions</h3>
9490
the Hessian is indefinite and the step may point away from any minimum.
9591
$$f(x_1, x_2) = (x_1^2 + x_2 - 11)^2 + (x_1 + x_2^2 - 7)^2$$
9692
$$\mathbf{x}^* \in \{(3,2),\;(-2.805,\,3.131),\;(-3.779,\,-3.283),\;(3.584,\,-1.848)\}$$</p>
97-
</td></tr>
98-
</table>
93+
</div>
9994

10095
</main>
10196

@@ -385,8 +380,8 @@ <h3>Example functions</h3>
385380
const data = [];
386381
const layout = {
387382
title: "Newton's method — 2D minimization",
388-
width: 1000,
389-
height: 700,
383+
autosize: true,
384+
height: 600,
390385
margin: { l: 50, r: 10, t: 50, b: 50 },
391386
xaxis: { title: 'x₁' },
392387
yaxis: { title: 'x₂', scaleanchor: 'x', scaleratio: 1 },
@@ -401,23 +396,23 @@ <h3>Example functions</h3>
401396

402397
if (this.fct === 'Elliptic quadratic')
403398
{
404-
layout.xaxis.range = [-3, 3];
405-
layout.yaxis.range = [-3, 3];
406-
this.computeData(ellipticQuadratic, this.x0, [-4, 4], [-3, 3], data);
399+
layout.xaxis.range = [-6, 6];
400+
layout.yaxis.range = [-4, 4];
401+
this.computeData(ellipticQuadratic, this.x0, [-6, 6], [-4, 4], data);
407402
this.addMinima([[1.0, 0.5]], data);
408403
}
409404
else if (this.fct === 'Rosenbrock function')
410405
{
411-
layout.xaxis.range = [-3, 3];
412-
layout.yaxis.range = [-3, 3];
413-
this.computeData(rosenbrock, this.x0, [-4, 4], [-3, 3], data);
406+
layout.xaxis.range = [-6, 6];
407+
layout.yaxis.range = [-4, 4];
408+
this.computeData(rosenbrock, this.x0, [-6, 6], [-4, 4], data);
414409
this.addMinima([[1.0, 1.0]], data);
415410
}
416411
else if (this.fct === 'Himmelblau function')
417412
{
418-
layout.xaxis.range = [-3, 3];
419-
layout.yaxis.range = [-3, 3];
420-
this.computeData(himmelblau, this.x0, [-4, 4], [-3, 3], data);
413+
layout.xaxis.range = [-6, 6];
414+
layout.yaxis.range = [-4, 4];
415+
this.computeData(himmelblau, this.x0, [-6, 6], [-4, 4], data);
421416
// four minima; only (3, 2) lies inside [-3,3]×[-3,3]
422417
this.addMinima([[3.0, 2.0], [-2.805, 3.131], [-3.779, -3.283], [3.584, -1.848]], data);
423418
}

0 commit comments

Comments
 (0)