Check collision within circle bounds

Question

I am trying to fill circle with some line alike sprites. I generate random position x and y within +- radius, but I olny want to draw sprite when it not intersects with circle bounds like:

Green lines I want to draw, and the red ones - I don't. I am wondering on some ideas that can help to detect unwanted sprites fast. Is there anything I can use for this purposes? I am using pixi.js and sprite`s height and width are always the same.

Answer 1

A simple idea could be the following one:

For segment (line?), defined by the two point P1 = (x0,y0) and P2 = (x1, y1). The circle is defined by center R = (xc, yc) and a radius r.

Now check

• distance P1 - C < r, also meaning point is IN the circle
• distance P2 - C < r, (same)

If both true, green line ! Depending on the library you used, you'll probably find a method such pointIsInCircle that will do half of the job.

Here is a simple exemple from w3resource

function check_a_point(a, b, x, y, r) {
    var dist_points = (a - x) * (a - x) + (b - y) * (b - y);
    r *= r;
    if (dist_points < r) {
        return true;
    }
    return false;
}