Check if points of line are overlapping circle

[Growler]

In Melon JS 8.0, how can I create a draggable line and check if, when dragged, it overlaps two circles?

The start point of the line and end point of the line should be checked for overlap. I.e., the center of the line overlapping the circle shouldn't count.

@obiot

[obiot]

interesting question !

I would see two options :

OPTION 1 :  using a regular physic body with a open polygon or several line shapes, you can know when your body (a polyline then here) is intersecting with any other shape, the trick being to check if both edge are respectively within these two circles, but something you can easily do by testing which line in your body is the one intereseting with a circle and keep track of the circles during the update cycle.

OPTION 2 : I would definitely look as well at the raycast feature (demo here). the only thing is that you have to work around it a bit as the raycast method only take a me.Line object as parameter, so you will have to decompose the line here above, but then it's easy as the below pseudo-code:

var results = me.collision.rayCast(myLine1);

results.forEach(result) {
    if isCircle(result) && result.contains(myLine.points[1) {
        // do something amazing
    }
}

Also do not that the rayCast method relies on the quadtree to only check against the nearby object

 

Edited November 19, 2020 by obiot