Take the 2-minute tour ×
Mathematics Stack Exchange is a question and answer site for people studying math at any level and professionals in related fields. It's 100% free, no registration required.

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:

Diagram

Please help!!!

share|improve this question
    
If it's not too much trouble, would you mind posting a (link to a) diagram with all your variables labelled? I'm having a bit of trouble visualizing the type of rounded corner you're trying to create between an arc segment and a line. –  Adriano Jul 11 '13 at 17:55
    
ok... I'll revise the post to remove the extraneous stuff and attach a link to an image... –  Joshua Barker Jul 11 '13 at 18:48
    
I added the image, and I removed the graph-theory tag (which is for an entirely-different subject). –  Blue Jul 11 '13 at 19:16
    
wow... these are all great answers... it's going to take me awhile to digest them and see which one works best for my situation... I'll try to get back to you all as soon as I can... thanks! –  Joshua Barker Jul 11 '13 at 20:49

3 Answers 3

up vote 0 down vote accepted

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!)

share|improve this answer
    
The slope of the line between $P_2$ and $P_3$ happens to be $$\sqrt{1-\frac{2g}{r}}$$ which is $1$ (indicating a $45^\circ$ line) when ---and only when--- $g=0$ ... the no-little-circle-at-all case. –  Blue Jul 11 '13 at 20:28
    
@JoshuaBarker: Correct: $P_4$ comes first, and then $P_2$ and $P_3$ follow. –  Blue Jul 11 '13 at 21:38
    
awesome... thanks a lot... this is exactly what I needed... additional points for helping me to understand why my 45-degree assumption was wrong –  Joshua Barker Jul 11 '13 at 21:50

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}$enter image description here

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)$.

share|improve this answer
    
I'm sorry... as I said, I'm math-illiterate, so I only get a bit of the above... how would I use this to find the x,y coordinates of the 3rd point, given that p1 and p2 are not necessarily on the same axis? Please click the link above to my diagram for a better explanation of my problem. –  Joshua Barker Jul 11 '13 at 19:13

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) $.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.