Lagrange interpolation, show term: Difference between revisions

From JSXGraph Wiki
(Created page with "Constructs a polynomial of degree <math>n</math> through <math>n+1</math> given points. Points can be added by clicking on "Add point". The dotted line is the graph of the fir...")
 
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 4: Line 4:
<html>
<html>
<form>
<form>
   <input type="button" value="Add point" onClick="addPoint()">
   <input id="add" type="button" value="Add point">
   <input type="button" value="Remove point" onClick="removePoint()">
   <input id="remove" type="button" value="Remove point">
</form>
</form>
</html>
</html>
Line 11: Line 11:
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true});
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true});


var p = [];
var points = [];
p[0] = board.create('point', [-1,2], {size:4});
points[0] = board.create('point', [-1,2], {size:4});
p[1] = board.create('point', [3,-1], {size:4});
points[1] = board.create('point', [3,-1], {size:4});
var f = JXG.Math.Numerics.lagrangePolynomial(p);
var f = JXG.Math.Numerics.lagrangePolynomial(points);
var graph = board.create('functiongraph', [f,-10, 10], {strokeWidth:3});
var graph = board.create('functiongraph', [f, -10, 10], {strokeWidth:3});
var d1 = board.create('functiongraph', [JXG.Math.Numerics.D(f), -10, 10], {dash:1});
var d1 = board.create('functiongraph', [JXG.Math.Numerics.D(f), -10, 10], {dash:1});
var txt = board.create('text', [-3, -4,  () => f.getTerm(2, 't', ' * ')], {fontSize: 16});


function addPoint() {
function addPoint() {
     p.push(board.create('point',[(Math.random()-0.5)*10,(Math.random()-0.5)*3],{size:4}));
     points.push(board.create('point',[(Math.random()-0.5)*10,(Math.random()-0.5)*3],{size:4}));
     board.update();
     board.update();
}
}


function removePoint() {
function removePoint() {
     if (p.Length > 2) {
     if (points.length > 2) {
       board.removeObject(p[p.Length - 1]);
       board.removeObject(points[points.length - 1]);
       p.pop();
       points.pop();
     }
     }
     //board.update();
     //board.update();
}
}
document.getElementById('add').addEventListener("click", addPoint, false);
document.getElementById('remove').addEventListener("click", removePoint, false);


</jsxgraph>
</jsxgraph>
Line 40: Line 45:
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true});
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true});


var p = [];
var points = [];
p[0] = board.create('point', [-1,2], {size:4});
points[0] = board.create('point', [-1,2], {size:4});
p[1] = board.create('point', [3,-1], {size:4});
points[1] = board.create('point', [3,-1], {size:4});
var f = JXG.Math.Numerics.lagrangePolynomial(p);
var f = JXG.Math.Numerics.lagrangePolynomial(points);
var graph = board.create('functiongraph', [f,-10, 10], {strokeWidth:3});
var graph = board.create('functiongraph', [f, -10, 10], {strokeWidth:3});
var d1 = board.create('functiongraph', [JXG.Math.Numerics.D(f), -10, 10], {dash:1});
var d1 = board.create('functiongraph', [JXG.Math.Numerics.D(f), -10, 10], {dash:1});
var txt = board.create('text', [-3, -4,  () => f.getTerm(2, 't', ' * ')], {fontSize: 16});


function addPoint() {
function addPoint() {
     p.push(board.create('point',[(Math.random()-0.5)*10,(Math.random()-0.5)*3],{size:4}));
     points.push(board.create('point',[(Math.random()-0.5)*10,(Math.random()-0.5)*3],{size:4}));
     board.update();
     board.update();
}
}
function removePoint() {
    if (points.length > 2) {
      board.removeObject(points[points.length - 1]);
      points.pop();
    }
    //board.update();
}
document.getElementById('add').addEventListener("click", addPoint, false);
document.getElementById('remove').addEventListener("click", removePoint, false);
</source>
</source>



Latest revision as of 06:58, 4 October 2022

Constructs a polynomial of degree [math]\displaystyle{ n }[/math] through [math]\displaystyle{ n+1 }[/math] given points. Points can be added by clicking on "Add point". The dotted line is the graph of the first derivative, the dashed line is the graph of the second derivative.

References

The underlying JavaScript code

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

var points = [];
points[0] = board.create('point', [-1,2], {size:4});
points[1] = board.create('point', [3,-1], {size:4});
var f = JXG.Math.Numerics.lagrangePolynomial(points);
var graph = board.create('functiongraph', [f, -10, 10], {strokeWidth:3});
var d1 = board.create('functiongraph', [JXG.Math.Numerics.D(f), -10, 10], {dash:1});

var txt = board.create('text', [-3, -4,  () => f.getTerm(2, 't', ' * ')], {fontSize: 16});

function addPoint() {
    points.push(board.create('point',[(Math.random()-0.5)*10,(Math.random()-0.5)*3],{size:4}));
    board.update();
}

function removePoint() {
    if (points.length > 2) {
      board.removeObject(points[points.length - 1]);
      points.pop();
    }
    //board.update();
}

document.getElementById('add').addEventListener("click", addPoint, false);
document.getElementById('remove').addEventListener("click", removePoint, false);