Difference between revisions of "Fill the intersection area of three circles"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) (Created page with "<jsxgraph width="600" height="600"> JXG.joinCurves = function(board, parents, attributes) { var cu1 = parents[0], cu2 = parents[1], attr =...") |
A WASSERMANN (talk | contribs) |
||
(23 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<jsxgraph width="600" height="600"> | <jsxgraph width="600" height="600"> | ||
JXG.joinCurves = function(board, parents, attributes) { | JXG.joinCurves = function(board, parents, attributes) { | ||
− | var | + | var curves = parents, |
− | |||
attr = JXG.copyAttributes(attributes, board.options, 'curve'), | attr = JXG.copyAttributes(attributes, board.options, 'curve'), | ||
c = board.create('curve', [[0], [0]], attr); | c = board.create('curve', [[0], [0]], attr); | ||
c.updateDataArray = function() { | c.updateDataArray = function() { | ||
− | // The | + | var i, le = curves.length; |
− | this.dataX = | + | |
− | + | // The paths have to be connected | |
+ | this.dataX = []; | ||
+ | this.dataY = []; | ||
+ | for (i = 0; i < le; i++) { | ||
+ | if (i < le - 1) { | ||
+ | this.dataX = this.dataX.concat(curves[i].dataX.slice(0,-1)); | ||
+ | this.dataY = this.dataY.concat(curves[i].dataY.slice(0,-1)); | ||
+ | } else { | ||
+ | this.dataX = this.dataX.concat(curves[i].dataX); | ||
+ | this.dataY = this.dataY.concat(curves[i].dataY); | ||
+ | } | ||
+ | } | ||
+ | |||
if (this.dataX.length<4) { | if (this.dataX.length<4) { | ||
this.bezierDegree = 1; | this.bezierDegree = 1; | ||
} else { | } else { | ||
− | this.bezierDegree = | + | this.bezierDegree = curves[0].bezierDegree; |
} | } | ||
}; | }; | ||
− | c.prepareUpdate().update().updateRenderer(); | + | c.prepareUpdate().update().updateVisibility().updateRenderer(); |
return c; | return c; | ||
}; | }; | ||
Line 31: | Line 42: | ||
var p5 = brd.create('point', [2.5, 4.5]); | var p5 = brd.create('point', [2.5, 4.5]); | ||
− | var p6 = brd.create('point', [ | + | var p6 = brd.create('point', [-0.5, 4.5]); |
var a3 = brd.create('circle', [p5,p6]); | var a3 = brd.create('circle', [p5,p6]); | ||
// Create two intersection points | // Create two intersection points | ||
− | var i1 = brd.create('intersection', [a1,a2, | + | var i1 = brd.create('intersection', [a1,a2,1], {visible:true}); |
− | var i2 = brd.create('intersection', [a1,a2,1], {visible: | + | var i2 = brd.create('intersection', [a1,a3,0], {visible:true}); |
+ | var i3 = brd.create('intersection', [a2,a3,1], {visible:true}); | ||
+ | |||
− | // Create | + | // Create three arcs surrounding the intersection area |
− | var c1 = brd.create('arc', [p1, i1 | + | var c1 = brd.create('arc', [p1, i2, i1], {visible:false}); |
− | var c2 = brd.create('arc', [p3, i2 | + | var c2 = brd.create('arc', [p3, i1, i3], {visible:false}); |
+ | var c3 = brd.create('arc', [p5, i3, i2], {visible:false}); | ||
− | // Join the | + | |
− | var | + | // Join the three arcs and fill the area. |
+ | var c4 = JXG.joinCurves(brd, [c1, c2, c3], | ||
{ strokeColor:'black', | { strokeColor:'black', | ||
strokeWidth:3, | strokeWidth:3, | ||
Line 54: | Line 69: | ||
===The underlying JavaScript code=== | ===The underlying JavaScript code=== | ||
<source lang="javascript"> | <source lang="javascript"> | ||
+ | JXG.joinCurves = function(board, parents, attributes) { | ||
+ | var curves = parents, | ||
+ | attr = JXG.copyAttributes(attributes, board.options, 'curve'), | ||
+ | c = board.create('curve', [[0], [0]], attr); | ||
+ | |||
+ | c.updateDataArray = function() { | ||
+ | var i, le = curves.length; | ||
+ | |||
+ | // The paths have to be connected | ||
+ | this.dataX = []; | ||
+ | this.dataY = []; | ||
+ | for (i = 0; i < le; i++) { | ||
+ | if (i < le - 1) { | ||
+ | this.dataX = this.dataX.concat(curves[i].dataX.slice(0,-1)); | ||
+ | this.dataY = this.dataY.concat(curves[i].dataY.slice(0,-1)); | ||
+ | } else { | ||
+ | this.dataX = this.dataX.concat(curves[i].dataX); | ||
+ | this.dataY = this.dataY.concat(curves[i].dataY); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | if (this.dataX.length<4) { | ||
+ | this.bezierDegree = 1; | ||
+ | } else { | ||
+ | this.bezierDegree = curves[0].bezierDegree; | ||
+ | } | ||
+ | }; | ||
+ | c.prepareUpdate().update().updateVisibility().updateRenderer(); | ||
+ | return c; | ||
+ | }; | ||
+ | |||
+ | var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-1,5,5,-1], axis:true}); | ||
+ | // Create two arcs (or circles) | ||
+ | var p1 = brd.create('point', [1,1]); | ||
+ | var p2 = brd.create('point', [3,0]); | ||
+ | var a1 = brd.create('circle', [p1,p2]); | ||
+ | |||
+ | var p3 = brd.create('point', [4,1]); | ||
+ | var p4 = brd.create('point', [2,0]); | ||
+ | var a2 = brd.create('circle', [p3,p4]); | ||
+ | |||
+ | var p5 = brd.create('point', [2.5, 4.5]); | ||
+ | var p6 = brd.create('point', [-0.5, 4.5]); | ||
+ | var a3 = brd.create('circle', [p5,p6]); | ||
+ | |||
+ | |||
+ | // Create two intersection points | ||
+ | var i1 = brd.create('intersection', [a1,a2,1], {visible:true}); | ||
+ | var i2 = brd.create('intersection', [a1,a3,0], {visible:true}); | ||
+ | var i3 = brd.create('intersection', [a2,a3,1], {visible:true}); | ||
+ | |||
+ | |||
+ | // Create three arcs surrounding the intersection area | ||
+ | var c1 = brd.create('arc', [p1, i2, i1], {visible:false}); | ||
+ | var c2 = brd.create('arc', [p3, i1, i3], {visible:false}); | ||
+ | var c3 = brd.create('arc', [p5, i3, i2], {visible:false}); | ||
+ | |||
+ | |||
+ | // Join the three arcs and fill the area. | ||
+ | var c4 = JXG.joinCurves(brd, [c1, c2, c3], | ||
+ | { strokeColor:'black', | ||
+ | strokeWidth:3, | ||
+ | fillColor:'yellow', fillOpacity:0.2 | ||
+ | }); | ||
+ | |||
</source> | </source> | ||
[[Category:Geometry]] | [[Category:Geometry]] | ||
[[Category:Examples]] | [[Category:Examples]] |
Latest revision as of 11:14, 15 August 2017
The underlying JavaScript code
JXG.joinCurves = function(board, parents, attributes) {
var curves = parents,
attr = JXG.copyAttributes(attributes, board.options, 'curve'),
c = board.create('curve', [[0], [0]], attr);
c.updateDataArray = function() {
var i, le = curves.length;
// The paths have to be connected
this.dataX = [];
this.dataY = [];
for (i = 0; i < le; i++) {
if (i < le - 1) {
this.dataX = this.dataX.concat(curves[i].dataX.slice(0,-1));
this.dataY = this.dataY.concat(curves[i].dataY.slice(0,-1));
} else {
this.dataX = this.dataX.concat(curves[i].dataX);
this.dataY = this.dataY.concat(curves[i].dataY);
}
}
if (this.dataX.length<4) {
this.bezierDegree = 1;
} else {
this.bezierDegree = curves[0].bezierDegree;
}
};
c.prepareUpdate().update().updateVisibility().updateRenderer();
return c;
};
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-1,5,5,-1], axis:true});
// Create two arcs (or circles)
var p1 = brd.create('point', [1,1]);
var p2 = brd.create('point', [3,0]);
var a1 = brd.create('circle', [p1,p2]);
var p3 = brd.create('point', [4,1]);
var p4 = brd.create('point', [2,0]);
var a2 = brd.create('circle', [p3,p4]);
var p5 = brd.create('point', [2.5, 4.5]);
var p6 = brd.create('point', [-0.5, 4.5]);
var a3 = brd.create('circle', [p5,p6]);
// Create two intersection points
var i1 = brd.create('intersection', [a1,a2,1], {visible:true});
var i2 = brd.create('intersection', [a1,a3,0], {visible:true});
var i3 = brd.create('intersection', [a2,a3,1], {visible:true});
// Create three arcs surrounding the intersection area
var c1 = brd.create('arc', [p1, i2, i1], {visible:false});
var c2 = brd.create('arc', [p3, i1, i3], {visible:false});
var c3 = brd.create('arc', [p5, i3, i2], {visible:false});
// Join the three arcs and fill the area.
var c4 = JXG.joinCurves(brd, [c1, c2, c3],
{ strokeColor:'black',
strokeWidth:3,
fillColor:'yellow', fillOpacity:0.2
});