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.)
 
(3 intermediate revisions 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 });
</jsxgraph>


var clip_path = board.create('curve', [[], []], {strokeWidth: 0, fillColor: 'yellow', fillOpacity: 0.6});
==The underlying JavaScript code==
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();
<source lang="javascript">
</jsxgraph>
var board = JXG.JSXGraph.initBoard('jxgbox', {
    axis:true,
    boundingbox:[-5, 10, 10, -5]
});


==The underlying JavaScript code==
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});


<source lang="javascript"></source>
var clip = board.create('curveintersection', [curve1, curve2],
        {strokeWidth: 2, fillColor: 'yellow', fillOpacity: 0.3 });
</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"