Newton's root finding method: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) (New page: <jsxgraph width="600" height="500"> var i; var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 300, originY: 200, unitX: 40, unitY: 40, axis:true}); var ax = board.create('axis', [[0,0]...) |
A WASSERMANN (talk | contribs) No edit summary |
||
(46 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<html> | |||
<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, | |||
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> | |||
<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-2)*(x+1)*x*0.2" size="30"/> | |||
<input type="button" value="set term" onClick="newGraph(document.getElementById('graphterm').value);"> | |||
</form> | |||
</td> | |||
<tr><td> </td></tr> | |||
<script type="text/javascript"> | |||
// Initial function term | |||
var term = function(x) { return (x-2)*(x+1)*x*0.2; }; | |||
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> | |||
</html> | |||
<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:false}); | ||
var ax = | var ax = brd.create('axis', [[0,0], [1,0]], {strokeColor: 'black'}); | ||
var ay = | var ay = brd.create('axis', [[0,0], [0,1]], {strokeColor: 'black'}); | ||
var g = | |||
var x = | 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'}); | |||
newton(x,steps); | |||
function xval( | 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 = | document.getElementById('xv' + i).innerHTML = (brd.select('x_{' + i + '}').X()).toFixed(14); | ||
} | } | ||
brd.addHook(xval); | |||
function newton(p, i) { | 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(' | 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 | 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(); | ||
brd.update(); | |||
} | } | ||
</jsxgraph> | </jsxgraph> | ||
< | |||
<table width=" | ===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. | x<sub>o</sub> is the start value. Drag it. | ||
<p></p> | <p></p> | ||
Line 41: | Line 85: | ||
<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*x*x/5" size="30"/> | ||
<input type="button" value="set 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"> | ||
// 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> | </script> | ||
</table> | </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) { | |||
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(); | |||
} | |||
</source> | |||
[[Category:Examples]] | |||
[[Category:Calculus]] |
Revision as of 15:33, 20 February 2013
xo is the start value. Drag it. You may change the function term here, Try also the following function terms:
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">
// 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();
}