Union circle

[jean Mj]

hello can i have some help showing the union of the circles. I can't seem to have the same colors when I move point A (outline and interior) and then I would also like to remove the interior arc. Thank you in advance.

<script>
$(document).ready(function(){
var jsxgraphUnion = {
    board:null,
    initGraph:function(id,w,h,box){
        $("#"+id).width($("#"+id).parent().width()*0.95>w?w:$("#"+id).parent().width()*0.95);
        $("#"+id).height(h);
        JXG.joinCurves = function(boards, parents, attributes) {
            var cu1 = parents[0], cu2 = parents[1],
            attr = JXG.copyAttributes(attributes, boards.options, 'curve'),
            c = boards.create('curve', [[0], [0]], attr);
            c.updateDataArray = function() {
                // The two paths have to be connected
                this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX);
                   this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY);
                if (this.dataX.length<4) {this.bezierDegree = 1;} else {this.bezierDegree = cu1.bezierDegree;}
            };
            c.prepareUpdate().update().updateRenderer();
            return c;
        };
          this.board = JXG.JSXGraph.initBoard(id, {boundingbox:box,axis:false,showCopyright:false, grid:false,  
         pan:{enabled:false},zoom:{enabled: false},showNavigation:false});
    },
    draw:function(){
        var p1 = this.board.create('point', [4,3]);
        var a1 = this.board.create('circle', [p1,3]);
    
        var p3 = this.board.create('point', [7,3]);
        var a2 = this.board.create('circle', [p3,2]);
    
        // Create two intersection points
        var i1 = this.board.create('intersection', [a1,a2,0], {visible:false});
        var i2 = this.board.create('intersection', [a1,a2,1], {visible:false});
    
        // Create two arcs surrounding the intersection area
        var c1 = this.board.create('arc', [p1, i2, i1], {visible:false});
        var c2 = this.board.create('arc', [p3, i1, i2], {visible:false});
    
        // Join the two arcs and fill the area.
        a1.setAttribute({fillColor:function(){if(p1.Dist(p3)>5) return "green"; else return "white"}, fillOpacity:0.5});
        a2.setAttribute({fillColor:function(){if(p1.Dist(p3)>5) return "green"; else return "white"}, fillOpacity:0.5});
        var c3 = JXG.joinCurves(this.board, [c1,c2], {strokeColor:'red', strokeWidth:5,fillColor:'green', fillOpacity:0.5});
    }
}
jsxgraphUnion.initGraph('boxunion1',850,350,[0,7,12,0]);
jsxgraphUnion.draw();
});
</script>

[Murray]

Hello jean Mj

I had a go at it, based on Alfred's example in the recent workshop https://jsxgraph.org/webinar/advanced4.pdf with "intersection" replaced with "union".

Here's my attempt: https://jsfiddle.net/mbourne/53gsh84e/

It's not correct on load, but works fine after any drag action, so I'm missing an update() or something for the initial draw of the graph. Hopefully Alfred can point out my error, or you can spot it.

Some notes:

(1) I didn't use jQuery (doesn't seem any need for this)

(2) I set the board dimensions using CSS, not JS

Hope it helps

Regards

Murray

[Murray]

Hello Alfred

Just wondering if you could address the issue I raised here. I'm still not sure why my fiddle doesn't behave properly on load.

Regards

Murray

[Alfred Wassermann]

Dear Jean and Murray,

sorry for the long delay of my answer.

Yes, Jean's attempt to fill the union of two circles along the example in the JSXGraph wiki is meanwhile outdated. Since v1.2.2 the recently

introduced clipping functions seem to work reliable.

At the time being, the usage is still a little bit clumsy. One has to create an "updatedataArray" method for a curve, exactly like Murray did it in his example.

To call this updateDataArray method the first time, it has to be followed by a call of board.update().

So, here is Jean's example, realized with the JSXGraph clipping function:

var p1 = board.create('point', [4,3]);
var a1 = board.create('circle', [p1,3]);
    
var p3 = board.create('point', [7,3]);
var a2 = board.create('circle', [p3,2]);

var c3 = board.create('curve', [[], []], {
    strokeWidth: 1, fillColor: 'yellow', fillOpacity: 0.4});

c3.updateDataArray = function() {
    var a = JXG.Math.Clip.union(a1, a2, this.board);

    this.dataX = a[0];
    this.dataY = a[1];
};
board.update();

See it live at https://jsfiddle.net/bj4tr3sf/

Best wishes,

Alfred

[jean Mj]

Merci, parfait.