Difference between revisions of "Newton's root finding method"

From JSXGraph Wiki
Jump to: navigation, search
 
(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> <math>Math.sin(x)</math>
 +
<li> <math>Math.exp(x)</math>
 +
<li> <math>Math.pow(2,x)</math>
 +
<li> <math>1-2/(x*x)</math>
 +
</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" onchange="newGraph(this.value);" value="Math.sin(x)" size="40"/>
+
<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 term" onClick="newGraph(document.getElementById('graphterm').value);">
 
</form>
 
</form>
 
</td>
 
</td>
Line 14: Line 22:
 
<script type="text/javascript">
 
<script type="text/javascript">
 
// Initial function term
 
// Initial function term
function term(x) { return Math.sin(x); }
+
var term = function(x) { return (x-2)*(x+1)*x*0.2; };
 +
var graph = function(x) { return term(x); };
 +
 
// Recursion depth
 
// Recursion depth
 
var steps = 11;
 
var steps = 11;
Line 28: Line 38:
 
<jsxgraph width="600" height="500">
 
<jsxgraph width="600" height="500">
 
var i;
 
var i;
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 300, originY: 200, unitX: 40, unitY: 40, axis:true});
+
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5], axis:false});
var ax = board.create('axis', [[0,0], [1,0]], {strokeColor: 'black'});
+
var ax = brd.create('axis', [[0,0], [1,0]], {strokeColor: 'black'});
var ay = board.create('axis', [[0,0], [0,1]], {strokeColor: 'black'});
+
var ay = brd.create('axis', [[0,0], [0,1]], {strokeColor: 'black'});
var g = board.create('functiongraph', [function(x){return graph(x);}],{strokeWidth: 2, dash:0});
+
 
var x = board.create('glider',[s,0,ax], {name: 'x_{0}', strokeColor: 'magenta', fillColor: 'yellow'});
+
var g = brd.create('functiongraph', [function(x){return graph(x);}],{strokeWidth: 2, dash:0});
function graph(x) { return term(x); }
+
var x = brd.create('glider',[s,0,ax], {name: 'x_{0}', strokeColor: 'magenta', fillColor: 'yellow'});
newton(x,steps);
+
 
function xval(board) {
+
newGraph(document.getElementById('graphterm').value);
 +
newton(x, steps, brd);
 +
 
 +
function xval() {
 
     for (i = 0; i < steps; i++)
 
     for (i = 0; i < steps; i++)
         document.getElementById('xv' + i).innerHTML = board.round(JXG.getReference(board, 'x_{' + i + '}').X(),14);
+
         document.getElementById('xv' + i).innerHTML = (brd.select('x_{' + i + '}').X()).toFixed(14);
 
}
 
}
  
board.addHook(xval);
+
brd.addHook(xval);
  
function newton(p, i) {
+
function newton(p, i, board) {
 +
    board.suspendUpdate();
 +
    if(i>0) {
 +
        var f = board.create('glider',[function(){return p.X();}, function(){return graph(p.X())}, g], {name: '', style: 3, strokeColor: 'green', fillColor: 'yellow'});
 +
        var l = board.create('line', [p,f],{strokeWidth: 0.5, dash: 1, straightFirst: false, straightLast: false, 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, strokeColor: 'magenta', fillColor: 'yellow'});
 +
        newton(x,--i, board);
 +
    }
 +
    board.unsuspendUpdate();   
 +
}
 +
function newGraph(v) {
 +
eval("term = function(x){ return "+v+";}");
 +
graph = function(x) { return term(x); };
 +
g.Y = function(x){ return term(x); };
 +
g.updateCurve();
 +
        brd.update();
 +
}
 +
</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>&nbsp;</td></tr>
 +
<script type="text/javascript">
 +
// Initial function term
 +
var term = function(x) { return x*x*x/5; };
 +
var graph = function(x) { return term(x); };
 +
 +
// Recursion depth
 +
var steps = 11;
 +
// Start value
 +
var s = 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:false});
 +
var ax = brd.create('axis', [[0,0], [1,0]], {strokeColor: 'black'});
 +
var ay = brd.create('axis', [[0,0], [0,1]], {strokeColor: 'black'});
 +
 
 +
var g = brd.create('functiongraph', [function(x){return graph(x);}],{strokeWidth: 2, dash:0});
 +
var x = brd.create('glider',[s,0,ax], {name: 'x_{0}', strokeColor: 'magenta', fillColor: 'yellow'});
 +
 
 +
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.addHook(xval);
 +
 
 +
function newton(p, i, board) {
 +
    board.suspendUpdate();
 
     if(i>0) {
 
     if(i>0) {
 
         var f = board.create('glider',[function(){return p.X();}, function(){return graph(p.X())},g], {name: '', style: 3, strokeColor: 'green', fillColor: 'yellow'});
 
         var f = board.create('glider',[function(){return p.X();}, function(){return graph(p.X())},g], {name: '', style: 3, strokeColor: 'green', fillColor: 'yellow'});
 
         var l = board.create('line', [p,f],{strokeWidth: 0.5, dash: 1, straightFirst: false, straightLast: false, strokeColor: 'black'});
 
         var l = board.create('line', [p,f],{strokeWidth: 0.5, dash: 1, straightFirst: false, straightLast: false, strokeColor: 'black'});
 
         var t = board.create('tangent',[f],{strokeWidth: 0.5, strokeColor: '#0080c0', dash: 0});
 
         var t = board.create('tangent',[f],{strokeWidth: 0.5, strokeColor: '#0080c0', dash: 0});
         var x = board.create('point',[board.intersection(ax,t,0)],{name: 'x_{'+(steps-i+1) + '}', style: 4, strokeColor: 'magenta', fillColor: 'yellow'});
+
         var x = board.create('intersection',[ax,t,0],{name: 'x_{'+(steps-i+1) + '}', style: 4, strokeColor: 'magenta', fillColor: 'yellow'});
         newton(x,--i);
+
         newton(x,--i, board);
 
     }
 
     }
 +
    board.unsuspendUpdate();   
 
}
 
}
 
function newGraph(v) {
 
function newGraph(v) {
eval("function term(x){ return "+v+";}");
+
eval("term = function(x){ return "+v+";}");
graph = function(x) { return term(x); }
+
graph = function(x) { return term(x); };
 
g.Y = function(x){ return term(x); };
 
g.Y = function(x){ return term(x); };
 
g.updateCurve();
 
g.updateCurve();
         board.update();
+
         brd.update();
 
}
 
}
</jsxgraph>
+
</source>
 +
 
 +
 
 +
[[Category:Examples]]
 +
[[Category:Calculus]]

Latest revision as of 17:33, 20 February 2013

xo is the start value. Drag it.

You may change the function term here, Try also the following function terms:
  • Math.sin(x)
  • Math.exp(x)
  • Math.pow(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">
// Initial function term
var term = function(x) { return x*x*x/5; };
var graph = function(x) { return term(x); };
	
// Recursion depth
var steps = 11;
// Start value
var s = 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:false});
var ax = brd.create('axis', [[0,0], [1,0]], {strokeColor: 'black'});
var ay = brd.create('axis', [[0,0], [0,1]], {strokeColor: 'black'});

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

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.addHook(xval);

function newton(p, i, board) {	
    board.suspendUpdate();	
    if(i>0) {
        var f = board.create('glider',[function(){return p.X();}, function(){return graph(p.X())},g], {name: '', style: 3, strokeColor: 'green', fillColor: 'yellow'});
        var l = board.create('line', [p,f],{strokeWidth: 0.5, dash: 1, straightFirst: false, straightLast: false, 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, strokeColor: 'magenta', fillColor: 'yellow'});
        newton(x,--i, board);
    }
    board.unsuspendUpdate();    
}	
function newGraph(v) {
	eval("term = function(x){ return "+v+";}");				
	graph = function(x) { return term(x); };
	g.Y = function(x){ return term(x); };
	g.updateCurve();
        brd.update();
}