Fill the intersection area of three circles: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(5 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});




     // 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,  
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 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
        });