Intersection of curves I: Difference between revisions

From JSXGraph Wiki
No edit summary
(replaced complicated call to JSX.Math.Clip with simple call to 'curveintersection')
 
Line 12: Line 12:
var curve1 = board.create('ellipse', p, {strokeColor: 'black'});
var curve1 = board.create('ellipse', p, {strokeColor: 'black'});


var curve2 = board.create('curve', [function(phi){return 4 * Math.cos(2*phi); },  
var curve2 = board.create('curve', [function(phi){return 4 * Math.cos(2*phi);},  
                                     [0, 0],  
                                     [0, 0],  
                                     0, 2 * Math.PI],
                                     0, 2 * Math.PI],
                       {curveType:'polar', strokeColor: 'blue', strokewidth:1});
                       {curveType:'polar', strokeColor: 'blue', strokewidth:1});


 
var clip = board.create('curveintersection', [curve1, curve2],  
var clip_path = board.create('curve', [[], []], {strokeWidth: 3, fillColor: 'yellow', fillOpacity: 0.3});
                      { strokeWidth: 3, fillColor: 'yellow', fillOpacity: 0.3 });
clip_path.updateDataArray = function() {
    var a = JXG.Math.Clip.intersection(curve2, curve1, this.board);
 
    this.dataX = a[0];
    this.dataY = a[1];
};
 
board.update();
</jsxgraph>
</jsxgraph>


Line 49: Line 41:
                       {curveType:'polar', strokeColor: 'blue', strokewidth:1});
                       {curveType:'polar', strokeColor: 'blue', strokewidth:1});


var clip = board.create('curveintersection', [curve1, curve2],
                      { strokeWidth: 3, fillColor: 'yellow', fillOpacity: 0.3 });


var clip_path = board.create('curve', [[], []], {strokeWidth: 3, fillColor: 'yellow', fillOpacity: 0.3});
clip_path.updateDataArray = function() {
    var a = JXG.Math.Clip.intersection(curve2, curve1, 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:42, 18 July 2024

The underlying JavaScript code

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

var p = [];
p.push(board.create('point', [0, -5]));
p.push(board.create('point', [-5, 0]));
p.push(board.create('point', [-3, 3]));

var curve1 = board.create('ellipse', p, {strokeColor: 'black'});

var curve2 = board.create('curve', [function(phi){return 4 * Math.cos(2*phi); }, 
                                    [0, 0], 
                                    0, 2 * Math.PI],
                      {curveType:'polar', strokeColor: 'blue', strokewidth:1});

var clip = board.create('curveintersection', [curve1, curve2], 
                      { strokeWidth: 3, fillColor: 'yellow', fillOpacity: 0.3 });