Intersection of functiongraphs: Difference between revisions

From JSXGraph Wiki
(Created page with "<jsxgraph box="jxgbox" width="600" height="600"> var board = JXG.JSXGraph.initBoard('jxgbox1', { axis:true, boundingbox:[-5, 10, 15, -5] }); var curve1 = board.create...")
 
(Simplify from JSX.Math.Clip to curveintersection, but also the old code shaded the WRONG area.)
 
(6 intermediate revisions by one other user not shown)
Line 1: Line 1:
<jsxgraph box="jxgbox" width="600" height="600">
<jsxgraph box="jxgbox" width="600" height="600">
var board = JXG.JSXGraph.initBoard('jxgbox1', {
var board = JXG.JSXGraph.initBoard('jxgbox', {
     axis:true,
     axis:true,
     boundingbox:[-5, 10, 15, -5]
     boundingbox:[-5, 10, 10, -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 curve2 = board.create('functiongraph', ['-x^2+4'], {strokeColor: 'black', fixed: false, fillColor: 'red', fillOpacity: 0.0});
var clip = board.create('curveintersection', [curve1, curve2], { strokeWidth: 2, fillColor: 'yellow', fillOpacity: 0.3 });
//var curve2 = board.create('functiongraph', ['sin(x)'], {strokeColor: 'black', fixed: false, fillColor: 'red', fillOpacity: 0.0});
</jsxgraph>
var c = board.create('circle', [[0,0], 4]);


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;
<source lang="javascript">
    var infty1 = new JXG.Coords(JXG.COORDS_BY_USER, [1, 0, N], this.board);
var board = JXG.JSXGraph.initBoard('jxgbox', {
     curve1.points.push(infty1);
     axis:true,
     curve1.points.push(new JXG.Coords(JXG.COORDS_BY_USER, curve1.points[0].usrCoords, this.board));
     boundingbox:[-5, 10, 10, -5]
    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.greinerHormann(curve1, curve2, 'intersection', this.board);
    this.dataX = a[0];
    this.dataY = a[1];


};
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});
board.update();
</jsxgraph>
 
==The underlying JavaScript code==


<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"