AS3: Draw a line along the common tangents of two circles

Question

What I've got is two circles on the stage, circ1 and circ2. circ1 has radius 60, and circ2 has radius 30.

circ2 can be dragged around the stage in playback.

What I want is two lines connecting the circles by their common outer tangents. This is working towards turning an old poster into an interactive funbox. Here's a link to the poster, it might help you understand what I mean (although for now I'm just going to worry about two circles on their own).

The problem: I understand how to find common tangents with a pen and paper, but as soon as I try to conceive of how to put this into terms Flash might understand, my brain goes into meltdown. I have no idea how to make this happen using ActionScript.

What I have tried: I've looked around, and this is the closest thing I can find to what I'm trying to achieve (example app is downloadable at the bottom of the page). The only difference is that this includes interior tangents, which I don't need.

Unfortunately this source is written in Java, which, despite my best efforts, I don't understand enough to port to AS3.

So far all I have managed to achieve on my own is to define Points for the center of each circle, and then realize that I can't make flash solve equations for a variable. I then spent several hours Googling trying to figure out how to proceed from here.

Any help would be much appreciated, this is work for a school project that is due in the end of this week. I may have bitten off more than I can chew here, but it's too late to turn back now.

Thanks in advance!

Answer 1

function DrawTangents(p1 : Point, r1 : Number, p2 : Point, r2 : Number) : void {
    var dx = p2.x - p1.x;
    var dy = p2.y - p1.y;
    var dist = Math.sqrt(dx*dx + dy*dy);

    this.graphics.drawCircle(p1.x, p1.y, r1);
    this.graphics.drawCircle(p2.x, p2.y, r2);

    if (dist <= Math.abs(r2 - r1)) {
        // The circles are coinciding. There are no valid tangents.
        return;
    }

    // Rotation from the x-axis.
    var angle1 = Math.atan2(dy, dx);

    // Relative angle of the normals. This is equal for both circles.
    var angle2 = Math.acos((r1 - r2)/dist);

    this.graphics.moveTo(p1.x + r1 * Math.cos(angle1 + angle2),
                         p1.y + r1 * Math.sin(angle1 + angle2));
    this.graphics.lineTo(p2.x + r2 * Math.cos(angle1 + angle2),
                         p2.y + r2 * Math.sin(angle1 + angle2));

    this.graphics.moveTo(p1.x + r1 * Math.cos(angle1 - angle2),
                         p1.y + r1 * Math.sin(angle1 - angle2));
    this.graphics.lineTo(p2.x + r2 * Math.cos(angle1 - angle2),
                         p2.y + r2 * Math.sin(angle1 - angle2));
}