Difference between revisions of "Fill the intersection area of three circles"

From JSXGraph Wiki
Jump to: navigation, search
 
(3 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 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() {
             // The three paths have to be connected
+
            var i, le = curves.length;
             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);
+
             // The paths have to be connected
console.log(this.dataX.length);
+
             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 = cu1.bezierDegree;
+
                 this.bezierDegree = curves[0].bezierDegree;
 
             }
 
             }
 
         };
 
         };
Line 44: 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: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 60: 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 12: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
        });