Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

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

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!




Application Security Testing: An Integral Part of DevOps

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.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



We have made updates to our Privacy Policy to reflect the implementation of the General Data Protection Regulation.
Thanks for your registration, follow us on our social networks to keep up-to-date