Fill the intersection area of three circles - Revision history

A WASSERMANN at 10:14, 15 August 2017

2017-08-15T10:14:54Z

@@ Line 8: / Line 8: @@
              var i, le = curves.length;
-             // The three paths have to be connected
+             // The paths have to be connected
              this.dataX = [];
              this.dataY = [];
@@ Line 53: / Line 53: @@
      // Create three arcs surrounding the intersection area
-     var c1 = brd.create('arc', [p1, i2, i1], {visible:true, strokeWidth:1});
+     var c1 = brd.create('arc', [p1, i2, i1], {visible:false});
-     var c2 = brd.create('arc', [p3, i1, i3], {visible:true, strokeWidth:1});
+     var c2 = brd.create('arc', [p3, i1, i3], {visible:false});
-     var c3 = brd.create('arc', [p5, i3, i2], {visible:true, strokeWidth:1});
+     var c3 = brd.create('arc', [p5, i3, i2], {visible:false});
@@ Line 69: / Line 69: @@
 ===The underlying JavaScript code===
 <source lang="javascript">
 </source>
 [[Category:Geometry]]
 [[Category:Examples]]

A WASSERMANN at 10:13, 15 August 2017

2017-08-15T10:13:53Z

← Older revision		Revision as of 10:13, 15 August 2017
Line 7:		Line 7:
	c.updateDataArray = function() {		c.updateDataArray = function() {
	var i, le = curves.length;		var i, le = curves.length;

	// The three paths have to be connected		// The three paths have to be connected
	this.dataX = [];		this.dataX = [];
Line 23:		Line 24:
	this.bezierDegree = 1;		this.bezierDegree = 1;
	} else {		} else {
	this.bezierDegree = ~~cu1~~.bezierDegree;		this.bezierDegree = curves[0].bezierDegree;
	}		}
	};		};

A WASSERMANN at 10:12, 15 August 2017

2017-08-15T10:12:58Z

← Older revision		Revision as of 10:12, 15 August 2017
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 ~~cu1~~ = parents~~[0],~~		var curves = parents,
	~~cu2 = parents[1],~~
	~~cu3 = parents[2]~~,
	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() {
			var i, le = curves.length;
	// The three paths have to be connected		// The three paths have to be connected
	this.dataX = ~~cu1~~.~~dataX.slice~~(0,-1).concat(~~cu2~~.dataX.slice(0,-1)~~).concat(cu3.dataX~~);		this.dataX = [];
	this.dataY = ~~cu1~~.dataY~~.slice(0,-1)~~.concat(~~cu2~~.dataY.slice(0,-1)).concat(~~cu3~~.~~dataY~~);		this.dataY = [];
	~~console~~.~~log(~~this.~~dataX~~.~~length~~);		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;

A WASSERMANN at 10:08, 15 August 2017

2017-08-15T10:08:16Z

← Older revision		Revision as of 10:08, 15 August 2017
Line 9:		Line 9:
	c.updateDataArray = function() {		c.updateDataArray = function() {
	// The three paths have to be connected		// The three paths have to be connected
	this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX)~~;//~~.concat(cu3.dataX);		this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX.slice(0,-1)).concat(cu3.dataX);
	this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY)~~;//~~.concat(cu3.dataY);		this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY.slice(0,-1)).concat(cu3.dataY);
	console.log(this.dataX.length);		console.log(this.dataX.length);
	if (this.dataX.length<4) {		if (this.dataX.length<4) {

A WASSERMANN at 10:06, 15 August 2017

2017-08-15T10:06:22Z

← Older revision		Revision as of 10:06, 15 August 2017
Line 9:		Line 9:
	c.updateDataArray = function() {		c.updateDataArray = function() {
	// The three paths have to be connected		// The three paths have to be connected
	this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX).concat(cu3.dataX);		this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX);//.concat(cu3.dataX);
	this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY).concat(cu3.dataY);		this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY);//.concat(cu3.dataY);
	console.log(this.dataX.length);		console.log(this.dataX.length);
	if (this.dataX.length<4) {		if (this.dataX.length<4) {

A WASSERMANN at 10:05, 15 August 2017

2017-08-15T10:05:38Z

← Older revision		Revision as of 10:05, 15 August 2017
Line 50:		Line 50:

	// Join the three arcs and fill the area.		// Join the three arcs and fill the area.
	var c3 = JXG.joinCurves(brd, [c1, c2, c3],		var c4 = JXG.joinCurves(brd, [c1, c2, c3],
	{ strokeColor:'black',		{ strokeColor:'black',
	strokeWidth:3,		strokeWidth:3,

A WASSERMANN at 10:05, 15 August 2017

2017-08-15T10:05:18Z

← Older revision		Revision as of 10:05, 15 August 2017
Line 18:		Line 18:
	}		}
	};		};
	c.prepareUpdate().update().updateRenderer();		c.prepareUpdate().update().updateVisibility().updateRenderer();
	return c;		return c;
	};		};

A WASSERMANN at 10:04, 15 August 2017

2017-08-15T10:04:22Z

← Older revision		Revision as of 10:04, 15 August 2017
Line 8:		Line 8:

	c.updateDataArray = function() {		c.updateDataArray = function() {
	// The ~~two~~ paths have to be connected		// The three paths have to be connected
	this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX).concat(cu3.dataX);		this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX).concat(cu3.dataX);
	this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY).concat(cu3.dataY);		this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY).concat(cu3.dataY);
			console.log(this.dataX.length);
	if (this.dataX.length<4) {		if (this.dataX.length<4) {
	this.bezierDegree = 1;		this.bezierDegree = 1;

A WASSERMANN at 10:02, 15 August 2017

2017-08-15T10:02:43Z

← Older revision		Revision as of 10:02, 15 August 2017
Line 3:		Line 3:
	var cu1 = parents[0],		var cu1 = parents[0],
	cu2 = parents[1],		cu2 = parents[1],
			cu3 = parents[2],
	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);
Line 8:		Line 9:
	c.updateDataArray = function() {		c.updateDataArray = function() {
	// The two paths have to be connected		// The two paths have to be connected
	this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX);		this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX).concat(cu3.dataX);
	this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY);		this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY).concat(cu3.dataY);
	if (this.dataX.length<4) {		if (this.dataX.length<4) {
	this.bezierDegree = 1;		this.bezierDegree = 1;
Line 42:		Line 43:

	// Create three arcs surrounding the intersection area		// Create three arcs surrounding the intersection area
	var c1 = brd.create('arc', [p1, i2, i1], {visible:true, strokeWidth:5});		var c1 = brd.create('arc', [p1, i2, i1], {visible:true, strokeWidth:1});
	var c2 = brd.create('arc', [p3, i1, i3], {visible:true, strokeWidth:5});		var c2 = brd.create('arc', [p3, i1, i3], {visible:true, strokeWidth:1});
	var c3 = brd.create('arc', [p5, i3, i2], {visible:true, strokeWidth:5});		var c3 = brd.create('arc', [p5, i3, i2], {visible:true, strokeWidth:1});

	/*
	// Join the ~~two~~ arcs and fill the area.		// Join the three arcs and fill the area.
	var c3 = JXG.joinCurves(brd, [c1,c2],		var c3 = 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>

A WASSERMANN at 10:00, 15 August 2017

2017-08-15T10:00:47Z

← Older revision		Revision as of 10:00, 15 August 2017
Line 43:		Line 43:
	// Create three arcs surrounding the intersection area		// Create three arcs surrounding the intersection area
	var c1 = brd.create('arc', [p1, i2, i1], {visible:true, strokeWidth:5});		var c1 = brd.create('arc', [p1, i2, i1], {visible:true, strokeWidth:5});
	var c2 = brd.create('arc', [p3, i1, i3], {visible:true});		var c2 = brd.create('arc', [p3, i1, i3], {visible:true, strokeWidth:5});
	//var c3 = brd.create('arc', [p5, i2~~, i1~~], {visible:true});		var c3 = brd.create('arc', [p5, i3, i2], {visible:true, strokeWidth:5});

	/*		/*