By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.

Planetary Orbits: Elliptical Animations with ActionScript : Page 2

Bringing some degree of realism to a simulation of planetary orbits requires elliptical, not circular, paths. This article will show you how to create them. Also included is a major execution order "gotcha" that you may not be aware of!

Two Foci
The differing width and height of an ellipse that sets it apart from a circle means that there is not one center point that is equidistant from any point on the ellipse. Instead, an ellipse has two focus points. The distance to any point on the ellipse is the sum of the distance from each of these foci.

Figure 2. Two Foci: Creating an ellipse using two foci, "F1" and "F2."

You can see this in practical terms by making an ellipse yourself. Put two thumbtacks about four inches apart in a paper-sized piece of cardboard. (These distances are arbitrary, but it will get you started.) Next, tie a loose-fitting string, about seven inches long or so, between the two thumbtacks. Finally, place a pencil inside the string and pull it away from the tacks until the string is taut. The string will look like a triangle with the pencil and the two tacks in the corners. Move the pencil all the way around the cardboard, keeping the string taut, and you will draw an ellipse.

This is illustrated in Figure 2. For the purposes of this article, "F1" will be the left focus point for a horizontal ellipse, or the top focus point for a vertical ellipse. Similarly, "F2" will be the right or bottom focus point, for horizontal or vertical ellipses, respectively.

Now that you've drawn your ellipse, you can move from arts and crafts to astronomy. In 1609, Johannes Kepler reasoned that the planetary orbits were not circular as once thought, but were elliptical with the Sun at one of the two focus points of the elliptical orbit. So, to simulate an orbit, you must be able to determine the location of the foci, and use one as the Sun.

Calculating the Foci
To calculate the focus points, you need to know a few basic things. Using correct terminology, the longest axis, going through the two focus points, is called the major axis. The axis perpendicular to this axis at the center of the ellipse is called the minor axis. Half the major axis, marked in Figure 2 by a, is called the semimajor axis. Half the minor axis, indicated as b in Figure 2, is called the semiminor axis.

Often, the first time learning a subject, it's helpful to work with terms you are comfortable with. To simplify, I'll use the terms "width" and "height," and "xRadius" and "yRadius" when discussing the major, minor, semimajor, and semiminor axes, respectively. There's still one more thing you have to figure out before you can continue.

To find the focus points of an ellipse, you must calculate the eccentricity of the ellipse. This is how elongated it is. Once you know the eccentricity of an ellipse, you can multiply this factor by the "xRadius" (or a in Figure 2) to get the distance from the center point to a focus point. This is marked by ae in Figure 2 and is the offset distance you'll use in your script to move the ellipse to the correct new location.

There are a few ways to calculate the eccentricity of an ellipse. The formula I'll use is:

(If you're interested in knowing how this formula was derived, check out the Related Resources on ellipses, left column.) Writing that in ActionScript, using the aforementioned simplified terms, the formula becomes:

e = Math.sqrt(1 - (yRadius*yRadius) / (xRadius*xRadius))

where Math.sqrt() is the Math object notation for square root.

Once you have the eccentricity of the ellipse, all you have to do is multiply that by the "xRadius" (in the case of our horizontal ellipse) to get the distance from the center of the ellipse to one of the focus points around which you can orbit your MovieClip. You may wish to orbit a MovieClip around a specific point, or it might even be the location of another MovieClip. For example, you might again want your example to show the Earth orbiting the Sun and the Moon orbiting the Earth.

But which focus point should you use? Since the ae (or xRadius * e) distance you just calculated is the same from the center to each focus point, the last step you need to take is to determine how to apply the offset. One method would be to use a conditional statement (if or switch, for example) to specify whether you add or subtract the offset from the center point of your ellipse. But there is a simpler way. If you use -1 to represent the left/top focus, 0 to represent the center, and 1 to represent the right/bottom focus, you can multiply the ae offset by this factor and subtract it from the desired anchor point.

For example, say you are placing your ellipse in the center of your stage at (275,200); you have an ellipse that is 250 pixels wide and 150 pixels tall. This results in an eccentricity of .8. Since your ellipse is 250 pixels wide, the "xRadius" is 125, or half the width. Therefore, the x offset would be calculated like this:

centerX -= (xRadius * e) * ellipseFocusPoint;

1) -1 for left focus point

275 -= (125*.8) * -1
275 - (-100)

This adds 100 to the center point of the ellipse, making it appear as though it is orbiting around the left focus point.

2) 0 for center point

275 -= (125*.8) * 0
275 - (0)

This does not change the center point of the ellipse.

3) 1 for right focus point

275 -= (125*.8) * 1
275 - (100)

This subtracts 100 from the center point of the ellipse, making it appear as though it is orbiting around the right focus point.

The example file "ellipse2_foci.fla" in the source code makes this clear. It animates a MovieClip around the center of the stage, but shifts the ellipse by this ae factor allowing you to choose either the ellipse center, or either focus point as the point around which the object moves. It also stores the variables in the MovieClip object being animated (mc.xRadius, for example), making it possible to store different values for each MovieClip.

Author's Note: Throughout, I've mentioned that I'm using a horizontal ellipse for this discussion. If you want to create a vertical ellipse, you must modify the equation slightly. First, you must switch around the major and minor axes in the calculation of the eccentricity of the ellipse. Remember that the eccentricity of the ellipse is how elongated it is. The equation must divide the shorter axis by the longer axis. If you accidentally invert these values, you'll get a useless result because you'll be trying to calculate the square root of a negative number.

For example, assume a vertical ellipse of 2 wide and 4 tall. The eccentricity formula would end up as the square root of 1 - 4/2, or 1-2, or -1. It helps to remember that an eccentricity of 0 is a circle, and an eccentricity of 1 is a straight line. Your e values will usually be between 0 and 1.

Similarly, you will want to shift the appropriate center coordinate based on whether or not the ellipse is horizontal or vertical. You don't want to adjust the eccentricity formula for a vertical ellipse and then forget to change the y-coordinate instead of the x-coordinate.

The final adjustment to the two lines of ActionScript, for a vertical ellipse, would be: