Fill the intersection area of three circles

From JSXGraph Wiki
Jump to: navigation, search

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