Math and equations for external tangent lines between two dissimilar circles?

I am trying to determine the maths behind drawing a line from the top of one circle to the top of another (and bottom to bottom). I am doing this for a programmatically generated CAD file, I currently have the software implemented that will just connect the top most points of each circle, but as you can see in the pictures below it does not look right.

Here is how the code performs for equal sized circles, a line from the top to top makes a nice looking figure.

Here is how the code performs for unequal sized circles, a line from the top to top looks a little off

I am trying to determine the tangent points on the circles to draw the lines between. As if you dropped a line onto the circles, I need the points where the line would rest at on each circle. In the picture below, I am drawing the red line currently, but I need the blue one.

From the picture you can see what values I have to work with. How might I go about finding the proper points?

EDIT: The proper jargon for what I want is external tangent lines. My issue now is I need the maths behind creating them so I can translate it into code.

EDIT2: I now have two main questions in bold below.

Following the link in the first edit on how to determine the external tangent lines of the circles, the first thing I need to do is determine the two points of intersection of the two temporary circles drawn to help us (The larger green dotted line circle, and the orange dotted line circle)

If the equation for the two circles are $$(x-x_{green})^2 + (y-y_{green})^2 = r_{green}^2, \tag{Green}$$ $$(x-x_{orange})^2 + (y-y_{orange})^2 = r_{orange}^2. \tag{Orange}$$ Then the equation of the line that intersects the two is (As per this math.stack answer.) $$-2x(x_{green}- x_{orange}) - 2y(y_{green} - y_{orange}) = (r_{green}^2 - r_{orange}^2) - (x_{green}^2 - x_{orange}^2) - (y_{green}^2 - y_{orange}^2).$$ The problem is I am not sure how to obtain the two intersection points from this equation.

So I did find these points, lets call the them $$(r_{top}, s_{top}) \tag{Top}$$ $$(r_{bot}, s_{bot}) \tag{Bottom}$$ Given those two points and the center of the large green circle I can find an equation for line 1 and line 2

Respectively the equation of those two lines would be $$(y_{green}-s_{top})=m_{top}(x_{green}-r_{top}) \quad where \quad m_{top}=\frac{(s_{top}-x_{green})}{(r_{top}-y_{green})} \tag{Line 1}$$ $$(y_{green}-s_{bot})=m_{bot}(x_{green}-r_{green}) \quad where \quad m_{bot}=\frac{(s_{bot}-x_{green})}{(r_{bot}-y_{green})} \tag{Line 2}$$

After I have the equation for these two lines I need to find the point on both where they intersect the main circle $r_{large}$ (From the very first picture). Given that the equation for the circle $r_{large}$ is

$$(x-x_{large})^2 + (y-y_{large})^2 = r_{large}^2, \tag{Largest of two main circles}$$

I would need to solve the equation of the two lines each for x or y, lets go with y

$$y_{top}=m_{top}(x_{green}-r_{top})+s_{top}$$ $$y_{bot}=m_{bot}(x_{green}-r_{bot})+s_{bot}$$

Now we can plug those into the equation for the main circle

$$(x-x_{large})^2+(y_{top}-y_{large})^2=r_{large}^2$$ $$(x-x_{large})^2+(y_{bot}-y_{large})^2=r_{large}^2$$

Then we can solve for x

$$x=x_{top} = \sqrt{r_{large}^2-(y_{top}-y_{large})^2}+x_{large}$$ $$x=x_{bot} = \sqrt{r_{large}^2-(y_{bot}-y_{large})^2}+x_{large}$$

Which you give us $(x_{top},y_{top})$ and $(x_{bot},y_{bot})$, these are the top and bottom points on the largest circle that lie on the external tangent lines of the two circles.

Now I thought given these two points the two tangent points for the smaller circle would be easier to find. If using pencil and paper, all you need to do is draw perpendicular lines from the two tangent points. But to get the actual values is more difficult.

Where would I even start to find the other set of tangent points on the small circle?

Final Edit:

In the end I found this website which helped a lot. It has a lot of different function defined in C for geometric actions. But here is what I ended up with :)

• To clarify: Right now, it looks like the program draws two semicircles and the line segments joining them. Are you asking how one would modify the program to produce a curve without the kinks? – Semiclassical Jul 18 '14 at 15:08
• Yes, right now no matter what I draw two half circles and just connect the tops. I think I might delete the question. I just found exactly what I need though. I need the external tangent lines. jwilson.coe.uga.edu/EMAT6680Su06/Byrd/Assignment%20Six/… – AnotherUser Jul 18 '14 at 15:09
• Neat. But you can probably still leave the question up, as a useful reference to others. (Particularly since some enterprising reader might come up with a better explanation than the one on that page.) – Semiclassical Jul 18 '14 at 15:11
• I'm just now not sure how to do it in code/maths. I guess I do need it up still. – AnotherUser Jul 18 '14 at 15:18

Here is another approach that may be quicker and is accessible without vector calculus.

The two circles have equations $\left(x-h\right)^2+\left(y-k\right)^2=r^2$ and $\left(x-u\right)^2+\left(y-v\right)^2=s^2$

We'll just search for the point $\left(x_1,y_1\right)$ that is on the $\left(h,v\right)$-circle. Once we have that, it's easy to see that the slope of the tangent line is $\frac{y_1-k}{x_1-h}$. So the tangent line will have equation $$y=\frac{y_1-k}{x_1-h}\left(x-x_1\right)+y_1$$

Assume for a second that we have found $x_1$ and $y_1$. How will this line meet the second circle? We can make the substitution for $y$ into the second circle's equation: \begin{align} \left(x-u\right)^2+\left(y-v\right)^2&=s^2\\ \left(x-u\right)^2+\left(\frac{y_1-k}{x_1-h}\left(x-x_1\right)+y_1-v\right)^2&=s^2\\ \left(x-u\right)^2\left(x_1-h\right)^2+\left(\left(y_1-k\right)\left(x-x_1\right)+\left(y_1-v\right)\left(x_1-h\right)\right)^2&=s^2\left(x_1-h\right)^2\\ \end{align}

This is a quadratic equation in $x$, and $x$-values that solve it are $x$-values for a point on the second circle where the line will intersect it. We want this equation to have precisely one solution, since we want the line to be tangent to the second circle. So we rearrange the equation so that we can cleanly see the discriminant and set it equal to $0$.

\begin{align} x^2\left(\left(x_1-h\right)^2+\left(y_1-k\right)^2\right)+x\left(-2u\left(x_1-h\right)^2-2x_1\left(y_1-k\right)^2+2\left(y_1-k\right)\right)\\ {}+u^2\left(x_1-h\right)^2+\left(y_1-k\right)^2x_1^2-2x_1\left(y_1-k\right)\left(y_1-v\right)\left(x_1-h\right)+\left(y_1-v\right)^2\left(x_1-h\right)^2\\ {}-s^2\left(x_1-h\right)^2&=0\\ \end{align}

And so along with satisfying $\left(x_1-h\right)^2+\left(y_1-k\right)^2=r^2$, $x_1$ and $y_1$ satisfy \begin{align} \left(B\right)^2-4\left(A\right)\left(C\right)&=0 \end{align}

where $A$, $B$, and $C$ are evident in the quadratic equation above. So that makes two equations in two unknowns $x_1$ and $y_1$. Solving these two equations will give you one point on the first circle, from which you can determine a slope and plot the tangent line.

Consider $F(x,y) = (x-h)^2+(y-k)^2$. One circle is a level set for this function, where $(h,k)$ is the center. For example, for a radius $2$ circle centered there, you have the solutions to $F(x,y)=4$. Suppose the radius you want for this circle is $r$.

Similarly, let $G(x,y)=(x-u)^2+(y-v)^2$ be a function, one of whose level sets can be the other circle. Name the radius of this circle $s$.

The gradients to these functions are $\nabla F=\langle2(x-h),2(y-k)\rangle$ and $\nabla G=\langle2(x-u),2(y-v)\rangle$.

You are looking for two points $(x_1,y_1)$ and $(x_2,y_2)$ that you can connect to make the line. Now there is a system of equations in these four unknowns, plus two more unknowns $\mu$ and $\lambda$ that are scaling factors, that you can set up and solve. The last expression is a vector perpendicular to the direct line between $(x_1,y_1)$ and $(x_2,y_2)$.

\begin{align} F(x_1,y_1)&=r^2\\ G(x_2,y_2)&=s^2\\ \nabla F(x_1,y_1)&=\lambda \nabla G(x_2,y_2)=\mu\langle y_2-y_1,x_1-x_2\rangle \end{align}

If you break up the last line, it's actually four linear equations. So all told you have six equations in $x_1$, $y_1$, $x_2$, $y_2$, $\mu$, and $\lambda$. Some of the equations are quadratic. Solve this systems of six equations in six unknowns and you'll have what you are looking for. (And extra solutions for the line that is flush with the circles on the other side.)

Here is the system expanded to non-vector equations, and some factors of $2$ cancelled from each side of the last four equations.

\begin{align} \left(x_1-h\right)^2+\left(y_1-k\right)^2&=r^2\\ \left(x_2-u\right)^2+\left(y_2-v\right)^2&=s^2\\ x_1-h &=\lambda\left(x_2-u\right)\\ x_1-h &=\mu\left(y_2-y_1\right)\\ y_1-k &=\lambda\left(y_2-v\right)\\ y_1-k &=\mu\left(x_1-x_2\right)\\ \end{align}

Setting out to solve this system:

Eliminating $\lambda$ and $\mu$:

\begin{align} \left(x_1-h\right)^2+\left(y_1-k\right)^2&=r^2\\ \left(x_2-u\right)^2+\left(y_2-v\right)^2&=s^2\\ \left(x_1-h\right)\left(y_2-v\right) &=\left(y_1-k\right)\left(x_2-u\right)\\ \left(x_1-h\right)\left(x_1-x_2\right) &=\left(y_1-k\right)\left(y_2-y_1\right)\\ \end{align}

The third equation allows us to eliminate $y_2$:

\begin{align} \left(x_1-h\right)^2+\left(y_1-k\right)^2&=r^2\\ \left(x_2-u\right)^2\left(x_1-h\right)^2+\left(y_1-k\right)^2\left(x_2-u\right)^2&=s^2\left(x_1-h\right)^2\\ \left(x_1-h\right)^2\left(x_1-x_2\right) &=\left(y_1-k\right)^2\left(x_2-u\right)+\left(y_1-k\right)\left(v-y_1\right)\left(x_1-h\right)\\ \end{align}

The first equation allows us to eliminate $y_1$:

\begin{align} \left(x_2-u\right)^2\left(x_1-h\right)^2+\left(r^2-\left(x_1-h\right)^2\right)\left(x_2-u\right)^2&=s^2\left(x_1-h\right)^2\\ \left(r^2-\left(x_1-h\right)^2\right)\left(x_2-u\right)\pm\sqrt{r^2-\left(x_1-h\right)^2}\left(v-k\mp\sqrt{r^2-\left(x_1-h\right)^2}\right)\left(x_1-h\right)&=\left(x_1-h\right)^2\left(x_1-x_2\right)\\ \end{align}

Introduce $A=x_1-h$ and $B=x_2-u$:

\begin{align} B^2A^2+\left(r^2-A^2\right)B^2&=s^2A^2\\ \left(r^2-A^2\right)B\pm\sqrt{r^2-A^2}\left(v-k\mp\sqrt{r^2-A^2}\right)A&=A^2\left(A+h-B+u\right)\\ \end{align}

The first equation says that $r^2B^2=s^2A^2$, which allows us to eliminate $B$:

\begin{align} \pm_2\left(r^2-A^2\right)sA\pm r\sqrt{r^2-A^2}\left(v-k\mp\sqrt{r^2-A^2}\right)A&=A^2\left(rA+rh\mp_2sA+ru\right)\\ \pm_2\left(r^2-A^2\right)sA\pm rA\sqrt{r^2-A^2}\left(v-k\right)-r^3A&=A^2\left(rh\mp_2sA+ru\right)\\ \pm_2sAr^2\pm rA\sqrt{r^2-A^2}\left(v-k\right)-r^3A&=A^2\left(rh+ru\right)\\ \pm_2sr\pm \sqrt{r^2-A^2}\left(v-k\right)-r^2&=A\left(h+u\right)\\ \pm \sqrt{r^2-A^2}\left(v-k\right)&=A\left(h+u\right)+r^2\mp_2sr\\ \left(r^2-A^2\right)\left(v-k\right)^2&=A^2\left(h+u\right)^2+2A\left(h+u\right)\left(r^2\mp_2sr\right)+\left(r^2\mp_2sr\right)^2\\ \end{align}

So $$0 = A^2\left(\left(h+u\right)^2+\left(v-k\right)^2\right)+A\left(2r\left(h+u\right)\left(r\mp_2s\right)\right)+r^2\left(r\mp_2s\right)^2-r^2\left(v-k\right)^2$$

From this we can solve for $A$ with the quadratic formula, and then retrieve $B$, $x_1$, $x_2$, $y_1$, and $y_2$. The choice for $\mp_2$, the two solutions for $A$ in the quadratic formula, and the two choices for the sign of $B$ will give $8$ solutions. Four are valid, representing the two lines OP asks for, and the two lines that are tangent to the circles and cross between them. The other four solutions will be extraneous solutions introduced by the squaring that was done at the very last step above.

• Just wanted to thank you for your answer up front. I'll need to take some time to think it over. I'm not familiar with gradient functions. – AnotherUser Jul 18 '14 at 19:15
• Yeah, to understand that aspect requires some understanding of vector calculus. But if you skip to the system of six equations at the end and solve it, you'll have the points that you need to connect. – alex.jordan Jul 18 '14 at 19:20

I also needed to solve this same problem (and also for the inner tangent lines) and found this website gave the final formulas and has a calculator to help with debugging.

http://www.ambrsoft.com/TrigoCalc/Circles2/Circles2Tangent_.htm