infusion / circle.js Goto Github PK

Problem

I was looking for a lightweight library for some basic graphic simulations and Google led me to this project. After integrating it, I noticed the visuals I was seeing when overlapping circles didn’t seem to square with the results of the intersectionArea function.

Trigonometry isn’t my forte so I did some additional research and found this alternate implementation: https://math.stackexchange.com/a/290526. It gives a different result.

I compared its results against a couple different methods generated by AI tools. Those matched the Stack Exchange method.

Here’s the method:

function overlapArea(circle1, circle2) {
    const x0 = circle1.x, y0 = circle1.y, r0 = circle1.r;
    const x1 = circle2.x, y1 = circle2.y, r1 = circle2.r;

    const rr0 = r0*r0;
    const rr1 = r1*r1;
    const c = Math.sqrt((x1-x0)*(x1-x0) + (y1-y0)*(y1-y0));
    const phi = (Math.acos((rr0+(c*c)-rr1) / (2*r0*c)))*2;
    const theta = (Math.acos((rr1+(c*c)-rr0) / (2*r1*c)))*2;
    const area1 = 0.5*theta*rr1 - 0.5*rr1*Math.sin(theta);
    const area2 = 0.5*phi*rr0 - 0.5*rr0*Math.sin(phi);
    return area1 + area2;
}

Note: it does not handle cases where circles do not overlap or one fully contains another.

Expected Result

const c1 = { r: 47, x: 153, y: 153 };
const c2 = { r: 100, x: 100, y: 100 };
Circle.intersectionArea(c1, c2);
> 5446.476156798457

Actual Result

Circle.intersectionArea(c1, c2);
> 4061.298531989056

Note, also, reversing the argument order produces different results:

Circle.intersectionArea(c1, c2) === Circle.intersectionArea(c2, c1)
> false

Steps to Reproduce

I wrote up some tests here that reproduce the problem: https://jsfiddle.net/klenwell/6qk3v52d/