Fill the intersection area of three circles: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
(11 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 42: | Line 53: | ||
// Create three arcs surrounding the intersection area | // Create three arcs surrounding the intersection area | ||
var c1 = brd.create('arc', [p1, i2, i1], {visible: | 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 | // Join the three arcs and fill the area. | ||
var | var c4 = JXG.joinCurves(brd, [c1, c2, c3], | ||
{ strokeColor:'black', | { strokeColor:'black', | ||
strokeWidth:3, | strokeWidth:3, | ||
fillColor:'yellow', fillOpacity:0.2 | fillColor:'yellow', fillOpacity:0.2 | ||
}); | }); | ||
</jsxgraph> | </jsxgraph> | ||
===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 10: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
});