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.)
 
Line 7: Line 7:
var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false});
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 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 43: Line 21:
var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false});
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});
var clip = board.create('curveintersection', [curve1, curve2],  
clip_path.updateDataArray = function() {
        {strokeWidth: 2, fillColor: 'yellow', fillOpacity: 0.3 });
    // 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();
</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"