Intersection of functiongraphs: Difference between revisions

From JSXGraph Wiki
No edit summary
(Simplify from JSX.Math.Clip to curveintersection, but also the old code shaded the WRONG area.)
 
(One intermediate revision by one other user not shown)
Line 5: Line 5:
});
});


var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false, fillColor: 'blue', fillOpacity: 0.0});
var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false});
var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false, fillColor: 'red', fillOpacity: 0.0});
var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false});
 
var clip = board.create('curveintersection', [curve1, curve2], { strokeWidth: 2, fillColor: 'yellow', fillOpacity: 0.3 });
var clip_path = board.create('curve', [[], []], {strokeWidth: 0, fillColor: 'yellow', fillOpacity: 0.6});
clip_path.updateDataArray = function() {
    // var a = JXG.Math.Clip.intersection(curve1, curve2, this.board);
 
    var N = 10000000;
    var infty1 = new JXG.Coords(JXG.COORDS_BY_USER, [1, 0, N], this.board);
    curve1.points.push(infty1);
    curve1.points.push(new JXG.Coords(JXG.COORDS_BY_USER, curve1.points[0].usrCoords, this.board));
    curve1.numberPoints += 2;
 
    var infty2 = new JXG.Coords(JXG.COORDS_BY_USER, [1, 0, -N], this.board);
    curve2.points.push(infty2);
    curve2.points.push(new JXG.Coords(JXG.COORDS_BY_USER, curve2.points[0].usrCoords, this.board));
    curve2.numberPoints += 2;
 
    var a = JXG.Math.Clip.intersection(curve1, curve2, this.board);
    this.dataX = a[0];
    this.dataY = a[1];
 
};
 
board.update();
</jsxgraph>
</jsxgraph>


Line 40: Line 18:
});
});


var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false, fillColor: 'blue', fillOpacity: 0.0});
var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false});
var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false, fillColor: 'red', fillOpacity: 0.0});
var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false});
 
var clip_path = board.create('curve', [[], []], {strokeWidth: 0, fillColor: 'yellow', fillOpacity: 0.6});
clip_path.updateDataArray = function() {
    // var a = JXG.Math.Clip.intersection(curve1, curve2, this.board);
 
    var N = 10000000;
    var infty1 = new JXG.Coords(JXG.COORDS_BY_USER, [1, 0, N], this.board);
    curve1.points.push(infty1);
    curve1.points.push(new JXG.Coords(JXG.COORDS_BY_USER, curve1.points[0].usrCoords, this.board));
    curve1.numberPoints += 2;
 
    var infty2 = new JXG.Coords(JXG.COORDS_BY_USER, [1, 0, -N], this.board);
    curve2.points.push(infty2);
    curve2.points.push(new JXG.Coords(JXG.COORDS_BY_USER, curve2.points[0].usrCoords, this.board));
    curve2.numberPoints += 2;
 
    var a = JXG.Math.Clip.intersection(curve1, curve2, this.board);
    this.dataX = a[0];
    this.dataY = a[1];
 
};


board.update();
var clip = board.create('curveintersection', [curve1, curve2],
        {strokeWidth: 2, fillColor: 'yellow', fillOpacity: 0.3 });
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Curves]]
[[Category:Curves]]

Latest revision as of 18:54, 18 July 2024

The underlying JavaScript code

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

var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false});
var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false});

var clip = board.create('curveintersection', [curve1, curve2], 
         {strokeWidth: 2, fillColor: 'yellow', fillOpacity: 0.3 });
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Intersection_of_functiongraphs&oldid=7668"