Newton's root finding method: Difference between revisions

From JSXGraph Wiki
← Older edit
No edit summary
No edit summary
 
(39 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<html>
<html>
<table width="300" border="0" cellpadding="0" cellspacing="0">
<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" id="graphterm" value="x*x*x/5" size="30"/><input type="button" value="set function term" onClick="newGraph(document.getElementById('graphterm').value);">
<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>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<script type="text/javascript">
<script type="text/javascript">
// Initial function term
// Get initial function term
var term = function(x) { return x*x*x/5; };
var term = document.getElementById('graphterm').value;
var graph = function(x) { return term(x); };
 
// Recursion depth
// Recursion depth
var steps = 11;
var steps = 11;
// Start value
 
var s = 3;
// Start value for x
var x_0 = 3;


for (i = 0; i < steps; i++) {
for (i = 0; i < steps; i++) {
Line 30: Line 39:
<jsxgraph width="600" height="500">
<jsxgraph width="600" height="500">
var i;
var i;
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], axis:true});
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5, 5, 5, -5], axis:true});
var ax = board.create('axis', [[0,0], [1,0]], {strokeColor: 'black'});
var ax = brd.defaultAxes.x;
var ay = board.create('axis', [[0,0], [0,1]], {strokeColor: 'black'});


var g = board.create('functiongraph', [function(x){return graph(x);}],{strokeWidth: 2, dash:0});
var g = brd.create('functiongraph', [term], {strokeWidth: 2});
var x = board.create('glider',[s,0,ax], {name: 'x_{0}', strokeColor: 'magenta', fillColor: 'yellow'});
var x = brd.create('glider', [x_0, 0, ax], {name: 'x_{0}', color: 'magenta', size: 4});


newGraph(document.getElementById('graphterm').value);
newGraph(document.getElementById('graphterm').value);
newton(x,steps);
newton(x, steps, brd);
function xval(board) {
 
     for (i = 0; i < steps; i++)
function xval() {
         document.getElementById('xv' + i).innerHTML = board.round(JXG.getReference(board, 'x_{' + i + '}').X(),14);
     for (i = 0; i < steps; i++) {
         document.getElementById('xv' + i).innerHTML = (brd.select('x_{' + i + '}').X()).toFixed(14);
    }
}
}


board.addHook(xval);
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 graph(p.X())},g], {name: '', style: 3, strokeColor: 'green', fillColor: 'yellow'});
     if (i > 0) {
         var l = board.create('line', [p,f],{strokeWidth: 0.5, dash: 1, straightFirst: false, straightLast: false, strokeColor: 'black'});
         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('point',[board.intersection(ax,t,0)],{name: 'x_{'+(steps-i+1) + '}', style: 4, strokeColor: 'magenta', fillColor: 'yellow'});
         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) {
eval("term = function(x){ return "+v+";}");
    g.generateTerm('x', 'x', v);
graph = function(x) { return term(x); };
    //g.updateCurve();
g.Y = function(x){ return term(x); };
    brd.update();
g.updateCurve();
        board.update();
}
}
</jsxgraph>
</jsxgraph>
You also may try the following function terms:
* <math>Math.sin(x)</math>
* <math>Math.exp(x)</math>
* <math>Math.pow(2,x)</math>
* <math>1-2/(x*x)</math>


===The underlying JavaScript code===
===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>&nbsp;</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)

f(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>&nbsp;</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();
}
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Newton%27s_root_finding_method&oldid=7092"