how to find arc center when given two points and a radius

Question

I am a math-illiterate, so I apologize if this doesn't make sense...

I am working on trying to draw a custom interface using the iOS Core Graphics API.

In a 2D space, I need to create a "rounded" corner between an arc segment and a line running from the arc origin to an endpoint.

I'm trying to do this via the following: (if there's an easier way, please let me know)

---

definitions

r:  arc radius (ex: 200)
g:  radius of rounded corner (ex: 5)
s:  arc w/ center: 0,0, radius: r, start: P3, end: 200,0, dir: cw

---

Steps (this part is working)

1. Draw line A from P1 (0, 0) to P2 (0, r - g) (ex: 195)

2. Draw imaginary 45-degree line B that intersects y-axis at P2 with a slope of 1

3. Calculate starting point (P3) of arc S from line B's intersection of arc S (ex: (4.9xx, 199.3xxx))

---

Here is the part I need help with...

??? Draw rounded-corner from P2 to P3 with radius of g ???

How do I find the x, y center-point (P4) that will allow me to draw an arc from P2 to P3?

Here's the diagram:

Please help!!!

Answer 1

Analytic Geometry Answer

Define $(x,y)^R=(-y,x)$ to be a quarter turn rotation. Then $$ \frac{p_1+p_2}{2}\pm(p_1-p_2)^R\sqrt{\frac{r^2}{|p_1-p_2|^2}-\frac14}\tag{1} $$ are the two centers of circles of radius $r$ passing through $p_1$ and $p_2$.

$\hspace{3.2cm}$

Radius of Connecting Circle

Looking at your diagram, the radius of the connecting circle should not be $g$ (which is the difference of the radius of the large circle and the length of the line). The radius of the connecting circle should be $$ \frac{\sqrt{2r^2-(r-g)^2}-(r-g)}{\sqrt{2r^2-(r-g)^2}+(r-g)}(r-g)\tag{2} $$ Use $(2)$ in place of $r$ in $(1)$.

---

Example

$p_1=(8,1)$, $p_2=(0,7)$, and $r=13$ gives $$ \begin{align} \frac{p_1+p_2}{2}&=(4,4)\\ (p_1-p_2)^R&=(8,-6)^R\\ &=(6,8)\\ |p_1-p_2|&=10 \end{align} $$ Plugging into $(1)$ yields $$ (4,4)\pm(6,8)\sqrt{\frac{13^2}{10^2}-\frac14} =(4,4)\pm(7.2,9.6) $$ Thus, we get the points $(11.2,13.6)$ and $(-3.2,-5.6)$.

Answer 2

Let the points be $p_1 = (x_1, y_1)$ and $p_2 = (x_2, y_2)$ . The midpoint between them is $q = ((x_1+x_2)/2, (y_1+y_2)/2)$. The distance between them is $R = \sqrt{(x_2-x_1)^2+(y_2-y_1)^2}$.

The perpendicular bisector of the line through $p_1$ and $p_2$ is the line through $q$ with slope $d = (-dy, dx)$, where $dx = x_2-x_1$ and $dy = y_2-y_1$ .

The points on this line have coordinates $q + t d$ for real $t$.

The center of the desired circle is at distance $r$ from $p_1$ (or $p_2$).

So we want $|q+td-p_1| = r$ or $|q+td-p_1|^2 = r^2$ .

In ordinate form,

$\begin{align} r^2 &= ((x_1+x_2)/2+t(-dy)-x_1)^2 +((y_1+y_2)/2+t(dx)-y_1)^2\\ &= ((x_2-x_1)/2+t(-dy))^2 +((y_2-y_1)/2+t(dx))^2\\ &= (dx/2-t\ dy)^2 +(dy/2+t\ dx)^2\\ &= dx^2/4-dx\ t\ dy+t^2\ dy^2 +dy^2/4+dy\ t\ dx+t^2\ dx^2\\ &= t^2\ (dx^2+dy^2) + (dx^2+dy^2)/4\\ &= (dx^2+dy^2)(t^2+1/4)\\ &= R^2(t^2+1/4)\\ \text{so}\\ t^2 &= \left(\dfrac{r}{R}\right)^2-1/4 \end{align} $

There are two values of $t$ because the center can be on either side of the line connecting $p_1$ and $p_2$.

The desired center is at $q+td = ((x_1+x_2)/2-t\ dy), (y_1+y_2)/2+t\ dx) $.

Answer 3

Presumably, you want a smooth transition from the red arc to the black ones. (As it turns out, your $45^\circ$ line interpretation is inaccurate, but we'll get back to that.) So,

• The little circle must be tangent to the $y$-axis at $P_2$. In particular, this means that $P_4$ is exactly $g$ units to the right of $P_2$; that is, $|P_2P_4| = g$.

• The little circle must be tangent to the big circle at $P_3$. A bit of circle geometry tells us that $P_4$ must lie on the radius $P_1P_3$. Thus, $|P_1P_4| = |P_1P_3|-|P_3P_4| = r - g$.

Now we know the lengths of two sides of right triangle $\triangle P_1P_2P_4$, and we can apply the Pythagorean Theorem to find the third:

$$\begin{align} |P_1P_2|^2 + |P_2 P_4|^2 &= |P_1 P_4|^2 \\[6pt] |P_1P_2|^2 + g^2 &= ( r - g )^2 \\[6pt] |P_1P_2|^2 &= ( r - g )^2 - g^2 = r ( r - 2 g ) \end{align}$$

Simply note that $|P_2P_4|$ is the $x$-coordinate of $P_4$, and $|P_1P_2|$ is the $y$-coordinate. Therefore,

$$P_4 = \left( \; g, \; \sqrt{r(r-2g)} \; \right)$$

Because there's no $45^\circ$ line between $P_2$ and $P_3$ (at least, not usually), you'll probably also need to know that

$$\begin{align} P_2 &= \left( \; 0, \; \sqrt{r(r-2g)} \; \right) &\text{(same $y$ as $P_4$, but on $y$-axis)} \\[6pt] P_3 &= \left( \; \frac{gr}{r-g}, \; \frac{r\;\sqrt{r(r-2g)}}{r-g} \; \right) &\text{(scaling-up $P_4$ by $\frac{|P_1P_3|}{|P_1P_4|} = \frac{r}{r-g}$)} \end{align}$$

---

To see why there's no $45^\circ$ line, consider an extreme case, where $r = 2g$. Here, the red arc is a full semi-circle that immediately starts up at $P_1$, and comes back down at $r$ units to the right on the $x$ axis; that is, $P_2$ is identical to $P_1$, and $P_3$ lies at the point $(r,0)$: the line between these points is the $x$-axis, which is inclined at $0^\circ$, not $45^\circ$.

(Double-checking the formulas in this case: $P_2 = (0,0)$, $P_3 = (2g,0)$, $P_4=(g,0)$. Yup, they work!)

(Another check: When $g=0$, we expect there to be no red arc at all, so that $P_2=P_3=P_4=(0,r)$. Yup, the formulas work there, too!)

Answer 4

Assuming arc is formed in counter-clockwise direction, get angle from center to start point relative to positive x-axis (w/ center as vertex), and same for angle from center of circle to end point of arc.

Subtract both angles, divide by 2. Once you have the half-angle, you can get midpoint M(x,y) by:

M_x = C_x + radius * cos(AngleStart + HalfAngle)
M_y = C_y + radius * sin(AngleStart + HalfAngle)