Question

I’m making a program in which many weird shapes are drawn onto a canvas. Right now i’m trying to implement the last, and possebly hardest, one.

In this particular shape i need a way to find the location (on a 2d canvas) where the line hits the shape. The following image is an example of what i have right now.

The black dots are the points that a known to me (i also have the location of the center of the three open circles and the radius of these circles). Each of the three outer lines needs a line towards the center dot, ending at the point that it hits the circle. This shape can be turned 90, 180 or 270 degrees.

The shape should look something like the following:

If you need any other information, please ask me in the comments. I’m not very good at math so please be gentle, thanks!

Answer 1

If A and B are points forming a line, then you can describe any point on that line using coordinates:

x = t·A_x + (1−t)·B_x
y = t·A_y + (1−t)·B_y
0 ≤ t ≤ 1

You can also describe the circle with center M and radius r as

(x − M_x)² + (y − M_y)² = r²

So take the x and y from the equations of the line, and plug them into the equation of the circle. You obtain a quadratic equation in t. Its two solutions describe the two points of intersection between the line and circle. In your example, only one of them lies on the line segment, i.e. satisfies 0 ≤ t ≤ 1. The other describes a point on the extension of the segment past its endpoint. Take the correct value for t back to the equations of the line, and you obtain the x and y coordinates of the point of intersection.

If you don’t know up front which circle you want to intersect with a given line, then intersect all three and choose the most appropriate point afterwards. Probably that is the point closest to the outside starting point of the line segment. The same goes in cases where both points of intersection lie on the segment.