Skip to content

Commit e9c6622

Browse files
janbenderjanbender
committed
- added an example to show Newton's method
1 parent b8f0573 commit e9c6622

File tree

2 files changed

+253
-0
lines changed

2 files changed

+253
-0
lines changed

‎examples/Newton_solver.html

+249
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
<!doctype html>
2+
<html class="no-js" lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<style>
6+
body {font-family: Helvetica, sans-serif;}
7+
table {background-color:#CCDDEE;text-align:left}
8+
</style>
9+
<script type="text/x-mathjax-config">
10+
MathJax.Hub.Config({
11+
extensions: ["tex2jax.js"],
12+
jax: ["input/TeX", "output/HTML-CSS"],
13+
tex2jax: {
14+
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
15+
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
16+
processEscapes: true
17+
},
18+
"HTML-CSS": { fonts: ["TeX"] }
19+
});
20+
</script>
21+
<script type="text/javascript" aync src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js"></script>
22+
<script src="https://cdn.plot.ly/plotly-2.5.1.min.js"></script>
23+
<title>Newton solver</title>
24+
</head>
25+
<body>
26+
<main>
27+
<h1 style="text-align:center">Newton solver</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">Quadratic function</option>
51+
<option>Cubic function</option>
52+
<option>Trigonometric function</option>
53+
</select>
54+
</td>
55+
</tr>
56+
</table></td>
57+
</tr>
58+
59+
<tr><td>
60+
<h2>Newton's method</h2>
61+
62+
<p>Newton's method is an iterative approach to find the roots of a function. The method requires the function $f(x)$, its derivative $f'(x)$ and an initial guess $x_0$.</p>
63+
64+
<p>In each iteration the approximation of the solution is improved by:</p>
65+
$$\begin{equation*}
66+
x_{n+1} = x_{n} - \frac{f(x_n)}{f'(x_n)}
67+
\end{equation*}$$
68+
<p>If the initial guess $x_0$ is close enough to the solution and $f'(x_0) \neq 0$, the method usually converges.</p>
69+
</td></tr>
70+
</table>
71+
72+
</main>
73+
74+
<script id="simulation_code" type="text/javascript">
75+
class Plot
76+
{
77+
constructor()
78+
{
79+
this.reset();
80+
this.num_newton_steps = 1;
81+
}
82+
83+
reset()
84+
{
85+
this.num_newton_steps = parseInt(document.getElementById('newton_steps').value);
86+
this.fct = document.getElementById('fct').value;
87+
this.plotFunctions();
88+
}
89+
90+
quadratic_function(x)
91+
{
92+
return 10*(x*x)+2*x-1;
93+
}
94+
95+
grad_quadratic_function(x, y)
96+
{
97+
return 20*x+2.0;
98+
}
99+
100+
cubic_function(x)
101+
{
102+
return 5*(x*x*x)-3*x*x+2*x+1;
103+
}
104+
105+
grad_cubic_function(x, y)
106+
{
107+
return 15*x*x - 6*x+2.0;
108+
}
109+
110+
trigonometric_function(x, y)
111+
{
112+
return 20*Math.sin(2.0*x) + 3*Math.cos(3.0*x);
113+
}
114+
115+
grad_trigonometric_function(x, y)
116+
{
117+
return 40*Math.cos(2.0*x) - 9.0*Math.sin(3.0*x);
118+
}
119+
120+
newton_step(f, grad_f, x)
121+
{
122+
return x - f(x) / grad_f(x);
123+
}
124+
125+
plotFunctions()
126+
{
127+
let x = -3;
128+
let y = 0.5;
129+
let num_steps = 5000;
130+
let xValues = [];
131+
let yValues_quadratic = [];
132+
let yValues_cubic = [];
133+
let yValues_trigonometric = [];
134+
135+
136+
for (let i = 0; i <= num_steps; i++)
137+
{
138+
xValues.push(x);
139+
yValues_quadratic.push(this.quadratic_function(x));
140+
yValues_cubic.push(this.cubic_function(x));
141+
yValues_trigonometric.push(this.trigonometric_function(x,y));
142+
143+
x += 6 / num_steps;
144+
y += 1.0 / num_steps;
145+
}
146+
147+
let current_x = 3.0
148+
var data = [];
149+
if (this.fct == "Quadratic function")
150+
{
151+
let x_newton = []
152+
let y_newton = []
153+
for (let i = 0; i < this.num_newton_steps; i++)
154+
{
155+
x_newton.push(current_x)
156+
y_newton.push(this.quadratic_function(current_x))
157+
current_x = this.newton_step(this.quadratic_function, this.grad_quadratic_function, current_x)
158+
x_newton.push(current_x)
159+
y_newton.push(0)
160+
}
161+
162+
var trace_quadratic = {
163+
x: xValues,
164+
y: yValues_quadratic,
165+
name: "quadr. fct."
166+
};
167+
168+
var trace_quadratic_newton = {
169+
x: x_newton,
170+
y: y_newton,
171+
name: "Newton - quadr. fct."
172+
};
173+
data = [trace_quadratic, trace_quadratic_newton];
174+
}
175+
176+
if (this.fct == "Cubic function")
177+
{
178+
let x_newton = []
179+
let y_newton = []
180+
for (let i = 0; i < this.num_newton_steps; i++)
181+
{
182+
x_newton.push(current_x)
183+
y_newton.push(this.cubic_function(current_x))
184+
current_x = this.newton_step(this.cubic_function, this.grad_cubic_function, current_x)
185+
x_newton.push(current_x)
186+
y_newton.push(0)
187+
}
188+
189+
var trace_cubic = {
190+
x: xValues,
191+
y: yValues_cubic,
192+
name: "cubic fct."
193+
};
194+
195+
var trace_cubic_newton = {
196+
x: x_newton,
197+
y: y_newton,
198+
name: "Newton - cubic fct."
199+
};
200+
data = [trace_cubic, trace_cubic_newton];
201+
}
202+
203+
if (this.fct == "Trigonometric function")
204+
{
205+
current_x = 0.465
206+
let x_newton_trig = []
207+
let y_newton_trig = []
208+
console.log(this.num_newton_steps)
209+
for (let i = 0; i < this.num_newton_steps; i++)
210+
{
211+
x_newton_trig.push(current_x)
212+
y_newton_trig.push(this.trigonometric_function(current_x))
213+
current_x = this.newton_step(this.trigonometric_function, this.grad_trigonometric_function, current_x)
214+
x_newton_trig.push(current_x)
215+
y_newton_trig.push(0)
216+
}
217+
218+
var trace_trigonometric = {
219+
x: xValues,
220+
y: yValues_trigonometric,
221+
name: "trig. fct."
222+
};
223+
224+
var trace_trigonometric_newton = {
225+
x: x_newton_trig,
226+
y: y_newton_trig,
227+
name: "Newton - trig. fct."
228+
};
229+
data = [trace_trigonometric, trace_trigonometric_newton];
230+
}
231+
232+
233+
var layout = {
234+
title: 'Functions',
235+
width: 1000,
236+
height: 600
237+
};
238+
239+
Plotly.newPlot('plotOutput', data, layout);
240+
}
241+
242+
}
243+
244+
plot = new Plot();
245+
plot.reset();
246+
</script>
247+
248+
</body>
249+
</html>

‎index.md

+4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ Why JavaScript? Because everybody can directly run the examples in the browser.
88

99
I hope the examples and their documentation help you to learn something about the simulation methods. Feel free to use the examples in your own courses.
1010

11+
# General
12+
13+
* [Newton's method](examples/Newton_solver.html)
14+
1115
# Particles
1216

1317
* [A simple particle system](examples/particle_system.html)

0 commit comments

Comments
 (0)