Secant and tangent: Difference between revisions

From JSXGraph Wiki
← Older edit
No edit summary
No edit summary
 
(11 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<html>
<jsxgraph box="box" width="600" height="400">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="box" class="jxgbox" style="width:600px; height:400px;"></div>
<script language="JavaScript">
        board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 50, unitY: 25});
board.suspendUpdate();
        // Axes
        b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
        b1axisy = board.createElement('axis', [[0,0], [0,1]], {});


        var p = [];
var p = [];
        p[0] = board.createElement('point', [-1,0], {style:4});
p[0] = board.create('point', [-1,0], {size:2});
        p[1] = board.createElement('point', [-0.5,1], {style:4});
p[1] = board.create('point', [-0.5,1], {size:2});
        p[2] = board.createElement('point', [2,0.5], {style:4});
p[2] = board.create('point', [2,0.5], {size:2});
        p[3] = board.createElement('point', [6,5], {style:4});
p[3] = board.create('point', [6,5], {size:2});
        var polynomial = function(x) {
var pol = JXG.Math.Numerics.lagrangePolynomial(p);
                var i;
graph = board.create('functiongraph', [pol, -10, 10], {strokeWidth:3});
                var y = 0.0;
                var xc = [];
                for (i=0;i<p.length;i++) {
                  xc[i] = p[i].X();
                }
                for (i=0;i<p.length;i++) {
                  var t = p[i].Y();
                  for (var k=0;k<p.length;k++) {
                    if (k!=i) {
                      t *= (x-xc[k])/(xc[i]-xc[k]);
                    }
                  }
                  y += t;
                }
                return y;
            };
        graph = board.createElement('curve', ['x', polynomial, 'x', -10, 10], {curveType:'graph'});


q = board.createElement('glider', [4.5,0,graph], {style:6});
q = board.create('glider', [4.5,0,graph], {size:5});
s = board.createElement('slider', [[0,-3],[4,-3],[0.001,1,1]],{name:' '});
s = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);
q2 = board.createElement('point', [function(){ return q.X()+Math.max(s.X(),0.01);},
q2 = board.create('point', [function(){ return q.X()+Math.max(s.Value(),0.01);},
      function(){ return polynomial(q.X()+Math.max(s.X(),0.01));}], {style:7});
        function(){ return pol(q.X()+Math.max(s.Value(),0.01));}], {face:'[]',size:2});
e = board.createElement('point', [function(){ return q2.X()-q.X();},
e = board.create('point', [function(){ return q2.X()-q.X();},
      function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});
        function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});
line = board.createElement('line',[q,q2],{strokeColor:'#ff0000',dash:2});
line = board.create('line',[q,q2],{strokeColor:'#ff0000',dash:2});
board.unsuspendUpdate();
</jsxgraph>
</script>
</html>


<html>
<jsxgraph box="box2" width="600" height="400">
<div id="box2" class="jxgbox" style="width:600px; height:400px;"></div>
board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});
<script language="JavaScript">
        board = JXG.JSXGraph.initBoard('box2', {originX: 250, originY: 250, unitX: 50, unitY: 25});
board.suspendUpdate();
        // Axes
        b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
        b1axisy = board.createElement('axis', [[0,0], [0,1]], {});


        var f = function(x) { return (Math.abs(x)); };
var f = function(x) { return (Math.abs(x)); };
        graph = board.createElement('curve', ['x', f, 'x', -10, 10], {curveType:'graph'});
graph = board.create('functiongraph', [f, -10, 10], {strokeWidth:3});


        qf = board.createElement('glider', [0,0,graph], {style:6});
qf = board.create('glider', [0,0,graph], {size:5});
        sf = board.createElement('slider', [[0,-3],[4,-3],[0.001,1,1]],{name:' '});
sf = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);
        qf2 = board.createElement('point', [function(){ return qf.X()+sf.X();},
qf2 = board.create('point', [function(){ return qf.X()+sf.Value();},
                            function(){ return f(qf.X()+sf.X());}], {style:7});
          function(){ return f(qf.X()+sf.Value());}], {face:'[]',size:2});
        ef = board.createElement('point', [function(){ return qf2.X()-qf.X();},
ef = board.create('point', [function(){ return qf2.X()-qf.X();},
                      function(){ return (qf2.Y()-qf.Y())/(qf2.X()-qf.X());}], {style:7,name:'Sekantensteigung',trace:true});
          function(){ return (qf2.Y()-qf.Y())/(qf2.X()-qf.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});
        line = board.createElement('line',[qf,qf2],{strokeColor:'#ff0000',dash:2});
line = board.create('line',[qf,qf2],{strokeColor:'#ff0000',dash:2});
board.unsuspendUpdate();
</jsxgraph>
</script>
</html>


<html>
<jsxgraph box="box3" width="600" height="400">
<div id="box3" class="jxgbox" style="width:600px; height:400px;"></div>
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});
<script language="JavaScript">
        board = JXG.JSXGraph.initBoard('box3', {originX: 250, originY: 250, unitX: 50, unitY: 25});
board.suspendUpdate();
        // Axes
        b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
        b1axisy = board.createElement('axis', [[0,0], [0,1]], {});


        var g = function(x) { return (x<=0)?0:1; };
var g = function(x) { return (x<=0)?0:1; };
        graph = board.createElement('curve', ['x', g, 'x', -10, 10], {curveType:'graph'});
graph = board.create('functiongraph', [g,-10, 10], {strokeWidth:3});


        qg = board.createElement('glider', [0,0,graph], {style:6});
qg = board.create('glider', [0,0,graph], {size:4});
        sg = board.createElement('slider', [[0,-3],[4,-3],[0.001,1,1]],{name:' '});
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);
        qg2 = board.createElement('point', [function(){ return qg.X()+sg.X();},
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},
                            function(){ return g(qg.X()+sg.X());}], {style:7});
            function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});
        eg = board.createElement('point', [function(){ return qg2.X()-qg.X();},
eg = board.create('point', [function(){ return qg2.X()-qg.X();},
                      function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {style:7,name:'Sekantensteigung',trace:true});
            function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});
        line = board.createElement('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});
board.unsuspendUpdate();
</jsxgraph>
</script>
</html>


===The underlying JavaScript code===
Construction 1:
<source lang="javascript">
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});
var p = [];
p[0] = board.create('point', [-1,0], {size:2});
p[1] = board.create('point', [-0.5,1], {size:2});
p[2] = board.create('point', [2,0.5], {size:2});
p[3] = board.create('point', [6,5], {size:2});
var pol = JXG.Math.Numerics.lagrangePolynomial(p);
graph = board.create('functiongraph', [pol, -10, 10], {strokeWidth:3});
q = board.create('glider', [4.5,0,graph], {size:5});
s = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);
q2 = board.create('point', [function(){ return q.X()+Math.max(s.Value(),0.01);},
        function(){ return pol(q.X()+Math.max(s.Value(),0.01));}], {face:'[]',size:2});
e = board.create('point', [function(){ return q2.X()-q.X();},
        function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});
line = board.create('line',[q,q2],{strokeColor:'#ff0000',dash:2});
</source>
Construction 2:
<source lang="javascript">
board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});
var f = function(x) { return (Math.abs(x)); };
graph = board.create('functiongraph', [f, -10, 10], {strokeWidth:3});
qf = board.create('glider', [0,0,graph], {size:5});
sf = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);
qf2 = board.create('point', [function(){ return qf.X()+sf.Value();},
          function(){ return f(qf.X()+sf.Value());}], {face:'[]',size:2});
ef = board.create('point', [function(){ return qf2.X()-qf.X();},
          function(){ return (qf2.Y()-qf.Y())/(qf2.X()-qf.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});
line = board.create('line',[qf,qf2],{strokeColor:'#ff0000',dash:2});
</source>
Construction 3:
<source lang="javascript">
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});
var g = function(x) { return (x<=0)?0:1; };
graph = board.create('functiongraph', [g,-10, 10], {strokeWidth:3});
qg = board.create('glider', [0,0,graph], {size:4});
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},
            function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});
eg = board.create('point', [function(){ return qg2.X()-qg.X();},
            function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Calculus]]
[[Category:Calculus]]

Latest revision as of 08:26, 17 January 2024


The underlying JavaScript code

Construction 1: 

board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});

var p = [];
p[0] = board.create('point', [-1,0], {size:2});
p[1] = board.create('point', [-0.5,1], {size:2});
p[2] = board.create('point', [2,0.5], {size:2});
p[3] = board.create('point', [6,5], {size:2});
var pol = JXG.Math.Numerics.lagrangePolynomial(p);
graph = board.create('functiongraph', [pol, -10, 10], {strokeWidth:3});

q = board.create('glider', [4.5,0,graph], {size:5});
s = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);
q2 = board.create('point', [function(){ return q.X()+Math.max(s.Value(),0.01);},
        function(){ return pol(q.X()+Math.max(s.Value(),0.01));}], {face:'[]',size:2});
e = board.create('point', [function(){ return q2.X()-q.X();},
        function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});
line = board.create('line',[q,q2],{strokeColor:'#ff0000',dash:2});

Construction 2: 

board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});

var f = function(x) { return (Math.abs(x)); };
graph = board.create('functiongraph', [f, -10, 10], {strokeWidth:3});

qf = board.create('glider', [0,0,graph], {size:5});
sf = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);
qf2 = board.create('point', [function(){ return qf.X()+sf.Value();},
           function(){ return f(qf.X()+sf.Value());}], {face:'[]',size:2});
ef = board.create('point', [function(){ return qf2.X()-qf.X();},
           function(){ return (qf2.Y()-qf.Y())/(qf2.X()-qf.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});
line = board.create('line',[qf,qf2],{strokeColor:'#ff0000',dash:2});

Construction 3: 

board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});

var g = function(x) { return (x<=0)?0:1; };
graph = board.create('functiongraph', [g,-10, 10], {strokeWidth:3});

qg = board.create('glider', [0,0,graph], {size:4});
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},
            function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});
eg = board.create('point', [function(){ return qg2.X()-qg.X();},
            function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Secant_and_tangent&oldid=7655"