Difference between revisions of "Intersection of curves I"

From JSXGraph Wiki
Jump to navigationJump to search
(Created page with "<jsxgraph box="jxgbox" width="600" height="600"> var board = JXG.JSXGraph.initBoard('jxgbox', { axis:true, boundingbox:[-15, 10, 10, -10] }); var p = []; p.push(board...")
 
 
Line 10: Line 10:
 
p.push(board.create('point', [-3, 3]));
 
p.push(board.create('point', [-3, 3]));
  
var curve1 = board.create('ellipse', p,
+
var curve1 = board.create('ellipse', p, {strokeColor: 'black'});
                {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); },  
Line 29: Line 28:
 
board.update();
 
board.update();
 
</jsxgraph>
 
</jsxgraph>
 +
 +
==The underlying JavaScript code==
 +
 +
<source lang="javascript">
 +
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_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>
 +
 +
[[Category:Examples]]
 +
[[Category:Curves]]

Latest revision as of 11:23, 28 March 2020

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_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();