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 | ||
| (18 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 41: | Line 52: | ||
|      // 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  |      // 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,   | ||
| Line 56: | 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
        });
