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

Here’s working code that does what you describe for two circles – assuming the two circles are the same size. Otherwise it is an approximation, since it assumes the tangent points will be on a line perpendicular to that connecting the circle centers.

var point1 : Point = new Point(100, 100);
var point2 : Point = new Point(300, 50);
var radius1 : int = 60;
var radius2 : int = 30;

// if you draw a line from the first circle origo to
// the second origo, this is the angle of that line
var ang : Number = Math.atan2(point2.y - point1.y, point2.x - point1.x);

// find the first point on the circumference that is orthogonal
// to the line intersecting the two circle origos
var start1 : Point = new Point(point1.x + Math.cos(ang + Math.PI / 2) * radius1, 
                               point1.y + Math.sin(ang + Math.PI/2)* radius1);
var end1 : Point = new Point(point2.x + Math.cos(ang + Math.PI / 2) * radius2, 
                             point2.y + Math.sin(ang + Math.PI/2)* radius2);

// find the second point on the circumference that is orthogonal
// to the line intersecting the two circle origos
var start2 : Point = new Point(point1.x + Math.cos(ang - Math.PI / 2) * radius1, 
                               point1.y + Math.sin(ang - Math.PI/2)* radius1);
var end2 : Point = new Point(point2.x + Math.cos(ang - Math.PI / 2) * radius2,
                             point2.y + Math.sin(ang - Math.PI/2)* radius2);

// draw everything on the stage
this.graphics.lineStyle(1, 0x0);
this.graphics.drawCircle(point1.x, point1.y, radius1);
this.graphics.drawCircle(point2.x, point2.y, radius2);

this.graphics.moveTo(start1.x, start1.y);
this.graphics.lineTo(end1.x, end1.y);

this.graphics.moveTo(start2.x, start2.y);
this.graphics.lineTo(end2.x, end2.y);