ast month I tried to encourage readers to embrace a couple of simple math concepts to expand the ol’ ActionScript skill set. I tried to show that by understanding some basic trigonometry (just sine and cosine, honest!) you could be wielding the power of the circle in no time. If you want to prime the pump for this month’s fun, you can check out last month’s article before continuing, but it’s not strictly necessary.

The idea behind my last article was to attempt to diminish the trepidation some users have about “using a lot of math” in scripting. I sometimes have the same problem, and I have to dig a little before I can get my head around a concept. So, I tried to create a handful of examples that build one upon the other, adding features in each new demonstration. One file, for instance, showed how to animate a MovieClip in a circle. Another example simply animated a second MovieClip around the first, while the first was moving in a circle of its own. The effect was a very primitive model crudely similar to the Moon orbiting around the Earth while the Earth orbited around the Sun.

Well, the story seems to have gotten the circle rolling in several regions of the world. One reader named Mike, from Japan, had this to say:

“I loved your article about animation using circles. You made the ideas so easy to understand it was like a light bulb was turned on over my head. The circle animating around another circle got me thinking about trying to mock up a mini solar system. But my first try didn’t look too good because planetary orbits are elliptical, not circular. Can you show me how to simulate a solar system using ellipses?”

Solar System Envy
Thanks for writing, Mike. Unfortunately, mocking up an accurate solar system is a little too complex for this forum. Beyond the elliptical paths around the Sun followed by many celestial bodies, there are other factors to consider. A few important examples are time, speed, acceleration, gravity, centripetal force, and more. Depending on the complexity of your model, you may also want to consider the effect that one celestial body has on another during their respective orbits.

However, I can at least discuss the basis of your question and talk about how to modify the simple code from last month’s article to accommodate elliptical paths. A simple application of an elliptical path should make the ellipse itself easier to grasp, and you can add complexity as needed.

Circle and Ellipse
I’ll try again to make this topic approachable to all, rather than concentrate too much on dense mathematical detail. If you are particularly interested in the latter, I’ve provided a few links in the Related Resources section (see left column) that will allow you to learn more about the geometrical nitty-gritty. Regardless, now is a good time to download the source code for this article so you can have the files handy when you need them.

It’s easy to understand a circle because of a few simple facts. A circle has an equal width and height more accurately called a diameter. Also, the distance from the center of a circle to its circumference (the boundary line you think of when you draw a circle) is the same for any point on that circumference. This is called the radius.

Figure 1. Shades of Round: A crude comparison of a circle and an ellipse are shown.

Purists will cringe (and I’ll get to more accurate descriptions in a moment) but, as a starting point, it may be helpful to think of an ellipse as an elongated circle with two unique radii?one for the x-axis and one for the y-axis (shown in the sample horizontal ellipse in Figure 1, that I will use throughout this article). In fact, a circle is an ellipse, but the two radii just happen to be equal. You’ll see how you can use that analogy by looking at the following code to animate on a circular path, from last month’s article:

function deg2rad(degree) {    return degree * (Math.PI / 180);}function animateCircle() {    var radian = deg2rad(this.angle);    this._x = this.centerX + this.radius * Math.cos(radian);    this._y = this.centerY + this.radius * Math.sin(radian);    this.angle += this.angleChange;    this.angle %= 360;}

The first function is just a utility routine that converts the degree angle unit that you are familiar with to radians, a unit that is more common in computer programming and required by Flash for all similar needs except the _rotation property.

The second function is the heart of the animation. It starts with a center point, which is the location on the stage for the circle, and a radius, which determines the size of the circle. It then derives the points on the circular path by taking the cosine of an angle for the x-coordinate, and the sine of the same angle for the y-coordinate. The function then updates the angle by an incremental value and starts the process over again when the 360-degree point is reached.

By sequentially supplying a series of familiar angle values?0, 10, 20, 30, etc., up to 360 degrees?the MovieClip will animate along the circular path. All of this is explained in greater detail in last month’s article, if you would like more information.

To change the above-coded circular path into an elliptical path with the same geographical center point, all you have to do is use a unique radius value for x and y. These can be derived from a familiar value simply by dividing the ellipse width and height by two, respectively). The example file “ellipse1_circle.fla” in the source code shows this clearly:

this._x = this.centerX + this.xRadius * Math.cos(radian);this._y = this.centerY + this.yRadius * Math.sin(radian);

That’s the only change required to get the first elliptical path from this code. “Sure,” you’re saying to yourself, “That’s fine for an elliptical path around the geographical center of the ellipse. But that doesn’t help with the basic simulation of a planetary orbit.” Right you are. For the next step, one must better understand how an ellipse is created.

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.

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

Simulating Orbits … Finally
Again, considering the aforementioned very simplified model, the source code file “ellipse3_solar_sys.fla” shows how you can set up multiple orbiting bodies. This version of the code adds two things. First, it allows you to pick any spot around which to set up the ellipse. (The previous two examples used the center of the stage.) Second, it allows you to specify this value independently, for each orbiting body. So, for each MovieClip you can specify a point, or another MovieClip, around which to orbit.

To keep the script consistent, this is accomplished by passing either a MovieClip or a point object into the necessary parameter. For example:

setEllipse(mc3, 320, 220, 0, 2, -1, {_x:100, _y:200});setEllipse(mc2, 35, 30, 0, 10, -1, mc3);

The first line specifies that MovieClip “mc3” orbits point (100,200), while the second line specifies that MovieClip “mc2” orbits the current location of MovieClip “mc3″?wherever that may be. This allows you to set up a body that is orbiting another body that is in an orbit of its own (the Moon orbiting the Earth, which is orbiting the Sun). (To save your self a lot of frustration, be sure to read the sidebar, ” Know the Flash Execution Order.”)

What’s Next, Black Holes?
First and foremost, I hope you came away from this article with an understanding of how to modify a circular orbit into an elliptical orbit. If you think you can set up an elliptical orbit using its center, try using one of the ellipse’s focus points. As usual, I’d love to see any experiments that you may come up with!