Newton's root finding method: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
(57 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<table width=" | <table width="600" border="0" cellpadding="0" cellspacing="0"> | ||
x<sub>o</sub> is the start value. Drag it. | x<sub>o</sub> is the start value. Drag it. | ||
<p></p> | <p></p> | ||
You may change the function term here: | You may change the function term here, | ||
Try also the following function terms: | |||
<ul> | |||
<li> <code>sin(x)</code> | |||
<li> <code>exp(x)</code> | |||
<li> <code>2^x</code> | |||
<li> <code>1-2/(x*x)</code> | |||
</ul> | |||
<br> | <br> | ||
<td><nobr>f(x) = </nobr></td> | <td><nobr>f(x) = </nobr></td> | ||
<td> | <td> | ||
<form> | <form> | ||
<input style="border:none; background-color:#efefef;padding:5px;margin-left:2px;" type="text" | <input style="border:none; background-color:#efefef;padding:5px;margin-left:2px;" type="text" id="graphterm" value="(x-2)*(x+1)*x*0.2" size="30"/> | ||
<input type="button" value="set function term" onClick="newGraph(document.getElementById('graphterm').value);"> | |||
</form> | </form> | ||
</td> | </td> | ||
<tr><td> </td></tr> | <tr><td> </td></tr> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
// | // Get initial function term | ||
var term = document.getElementById('graphterm').value; | |||
// Recursion depth | // Recursion depth | ||
var steps = 11; | var steps = 11; | ||
// Start value | |||
var | // Start value for x | ||
var x_0 = 3; | |||
for (i = 0; i < steps; i++) { | for (i = 0; i < steps; i++) { | ||
Line 28: | Line 39: | ||
<jsxgraph width="600" height="500"> | <jsxgraph width="600" height="500"> | ||
var i; | var i; | ||
var | var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5, 5, 5, -5], axis:true}); | ||
var ax = | var ax = brd.defaultAxes.x; | ||
var g = | var g = brd.create('functiongraph', [term], {strokeWidth: 2}); | ||
var x = | var x = brd.create('glider', [x_0, 0, ax], {name: 'x_{0}', color: 'magenta', size: 4}); | ||
newton(x,steps); | newGraph(document.getElementById('graphterm').value); | ||
function xval( | newton(x, steps, brd); | ||
for (i = 0; i < steps; i++) | |||
document.getElementById('xv' + i).innerHTML = | function xval() { | ||
for (i = 0; i < steps; i++) { | |||
document.getElementById('xv' + i).innerHTML = (brd.select('x_{' + i + '}').X()).toFixed(14); | |||
} | |||
} | } | ||
brd.on('update', xval); | |||
// Initial call of xval() | |||
xval(); | |||
function newton(p, i) { | function newton(p, i, board) { | ||
if(i>0) { | board.suspendUpdate(); | ||
var f = board.create('glider',[function(){return p.X();}, function(){return | if (i > 0) { | ||
var l = board.create(' | var f = board.create('glider', [function(){ return p.X(); }, function(){ return g.Y(p.X()) }, g], { | ||
var t = board.create('tangent',[f],{strokeWidth: 0.5, strokeColor: '#0080c0', dash: 0}); | name: '', style: 3, color: 'green'}); | ||
var x = board.create(' | var l = board.create('segment', [p, f], {strokeWidth: 0.5, dash: 1, strokeColor: 'black'}); | ||
newton(x,--i); | var t = board.create('tangent', [f], {strokeWidth: 0.5, strokeColor: '#0080c0', dash: 0}); | ||
var x = board.create('intersection', [ax, t, 0],{name: 'x_{' + (steps - i + 1) + '}', style: 4, color: 'red'}); | |||
newton(x, --i, board); | |||
} | } | ||
} | board.unsuspendUpdate(); | ||
} | |||
function newGraph(v) { | function newGraph(v) { | ||
g.generateTerm('x', 'x', v); | |||
//g.updateCurve(); | |||
brd.update(); | |||
} | } | ||
</jsxgraph> | </jsxgraph> | ||
===The underlying JavaScript code=== | |||
<source lang="xml"> | |||
<table width="600" border="0" cellpadding="0" cellspacing="0"> | |||
x<sub>o</sub> is the start value. Drag it. | |||
<p></p> | |||
You may change the function term here: | |||
<br> | |||
<td><nobr>f(x) = </nobr></td> | |||
<td> | |||
<form> | |||
<input style="border:none; background-color:#efefef;padding:5px;margin-left:2px;" type="text" id="graphterm" value="x*x*x/5" size="30"/> | |||
<input type="button" value="set term" onClick="newGraph(document.getElementById('graphterm').value);"> | |||
</form> | |||
</td> | |||
<tr><td> </td></tr> | |||
<script type="text/javascript"> | |||
// Get initial function term | |||
var term = document.getElementById('graphterm').value; | |||
// Recursion depth | |||
var steps = 11; | |||
// Start value for x | |||
var x_0 = 3; | |||
for (i = 0; i < steps; i++) { | |||
document.write('<tr><td><nobr>x<sub>' + i + '</sub> = </nobr></td><td><font id="xv' + i + '"></font></td></tr>'); | |||
} | |||
<</script> | |||
</table> | |||
</source> | |||
<source lang="javascript"> | |||
var i; | |||
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5, 5, 5, -5], axis:true}); | |||
var ax = brd.defaultAxes.x; | |||
var g = brd.create('functiongraph', [term], {strokeWidth: 2}); | |||
var x = brd.create('glider', [x_0, 0, ax], {name: 'x_{0}', color: 'magenta', size: 4}); | |||
newGraph(document.getElementById('graphterm').value); | |||
newton(x, steps, brd); | |||
function xval() { | |||
for (i = 0; i < steps; i++) { | |||
document.getElementById('xv' + i).innerHTML = (brd.select('x_{' + i + '}').X()).toFixed(14); | |||
} | |||
} | |||
brd.on('update', xval); | |||
// Initial call of xval() | |||
xval(); | |||
function newton(p, i, board) { | |||
board.suspendUpdate(); | |||
if (i > 0) { | |||
var f = board.create('glider', [function(){ return p.X(); }, function(){ return g.Y(p.X()) }, g], { | |||
name: '', style: 3, color: 'green'}); | |||
var l = board.create('segment', [p, f], {strokeWidth: 0.5, dash: 1, strokeColor: 'black'}); | |||
var t = board.create('tangent', [f], {strokeWidth: 0.5, strokeColor: '#0080c0', dash: 0}); | |||
var x = board.create('intersection', [ax, t, 0],{name: 'x_{' + (steps - i + 1) + '}', style: 4, color: 'red'}); | |||
newton(x, --i, board); | |||
} | |||
board.unsuspendUpdate(); | |||
} | |||
function newGraph(v) { | |||
g.generateTerm('x', 'x', v); | |||
//g.updateCurve(); | |||
brd.update(); | |||
} | |||
</source> | |||
[[Category:Examples]] | |||
[[Category:Calculus]] |
Latest revision as of 13:54, 15 January 2021
xo is the start value. Drag it. You may change the function term here, Try also the following function terms:
-
sin(x)
-
exp(x)
-
2^x
-
1-2/(x*x)
The underlying JavaScript code
<table width="600" border="0" cellpadding="0" cellspacing="0">
x<sub>o</sub> is the start value. Drag it.
<p></p>
You may change the function term here:
<br>
<td><nobr>f(x) = </nobr></td>
<td>
<form>
<input style="border:none; background-color:#efefef;padding:5px;margin-left:2px;" type="text" id="graphterm" value="x*x*x/5" size="30"/>
<input type="button" value="set term" onClick="newGraph(document.getElementById('graphterm').value);">
</form>
</td>
<tr><td> </td></tr>
<script type="text/javascript">
// Get initial function term
var term = document.getElementById('graphterm').value;
// Recursion depth
var steps = 11;
// Start value for x
var x_0 = 3;
for (i = 0; i < steps; i++) {
document.write('<tr><td><nobr>x<sub>' + i + '</sub> = </nobr></td><td><font id="xv' + i + '"></font></td></tr>');
}
<</script>
</table>
var i;
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5, 5, 5, -5], axis:true});
var ax = brd.defaultAxes.x;
var g = brd.create('functiongraph', [term], {strokeWidth: 2});
var x = brd.create('glider', [x_0, 0, ax], {name: 'x_{0}', color: 'magenta', size: 4});
newGraph(document.getElementById('graphterm').value);
newton(x, steps, brd);
function xval() {
for (i = 0; i < steps; i++) {
document.getElementById('xv' + i).innerHTML = (brd.select('x_{' + i + '}').X()).toFixed(14);
}
}
brd.on('update', xval);
// Initial call of xval()
xval();
function newton(p, i, board) {
board.suspendUpdate();
if (i > 0) {
var f = board.create('glider', [function(){ return p.X(); }, function(){ return g.Y(p.X()) }, g], {
name: '', style: 3, color: 'green'});
var l = board.create('segment', [p, f], {strokeWidth: 0.5, dash: 1, strokeColor: 'black'});
var t = board.create('tangent', [f], {strokeWidth: 0.5, strokeColor: '#0080c0', dash: 0});
var x = board.create('intersection', [ax, t, 0],{name: 'x_{' + (steps - i + 1) + '}', style: 4, color: 'red'});
newton(x, --i, board);
}
board.unsuspendUpdate();
}
function newGraph(v) {
g.generateTerm('x', 'x', v);
//g.updateCurve();
brd.update();
}