Continuing my personal studies on simulating true gravitational acceleration in Actionscript, a couple days ago I arrived at one of the more conceptually challenging tasks I have tackled to date: the pendulum. I say conceptually challenging, because I tried to create a realistic pendulum in Flash a year or so ago and gave up after giving it a go. Now I realize that not only was my understanding of Actionscript limited then, but my realization of what true pendulum physics entails was also somewhat amiss.

As with any new task I set out to complete (especially those requiring a significant level of new knowledge on my part), I start with an array of Google searches — search terms like pendulum math, pendulum physics and actionscript pendulum tutorial to name a few. What intrigued me is that, while the results for such searches were incredibly numerous, very few of them actually tackled the topic of realistic pendulum movement. Instead, the majority of them (like this informative tutorial) create a facade to display a fairly believable pendulum motion by setting some random oscillation variables to the rotation of the movie clip. While this may suffice for the average SWF presentation, I wanted to find a much more realistic look that actually allows the pendulum object to react to forces acting upon it.

Enter physics lesson 1. After reading numerous tutorials that all failed to help me attain my desired goal, I decided to take a step back and look at my understanding of the physics driving a pendulum’s motion to see if there were a way I could just come up with my own solution. Indeed, I realized that I did not have a full understanding of the driving physics. My first misconception was that the gravitational force that acts on a pendulum both causes the acceleration of it and eventually causes it to stop that motion. Quite the contrary, I found, is the fact that, by definition, a perfect pendulum is a mass at the end of a mass-less rod, and as such, if gravity is the only force acting upon it, it will never stop its motion. While gravity plays a role in where the pendulum stops its motion, it does not play a role in stopping the pendulum’s motion itself. Once I understood this simple fact completely, my solution came to me at a surprisingly fast rate.

Following my physics study, I began looking to the actual physics equations used to calculate the angular acceleration of an object due to gravity. I very quickly came across this physics site that gives some absolutely priceless information regarding all sorts of algorithms and equations for motion, including precise answers for the calculation of angular acceleration with regards to a pendulum! After studying all the methods available and considering the ease at which a MovieClip or Sprite can be rotated with Actionscript, I very quickly decided to follow the rotational method of calculation as it applies to my pendulum.

Let’s look at the result, and then we will step through the simple process to calculating the animation:

As you can see, the motion of the pendulum is very fluid, and it accelerates and slows as expected, easing into rest at the peak of its journey before reversing its acceleration to return to its point of origin again. My solution was the result of choosing to find the angular acceleration each frame and update the rotation of the MovieClip instead of trying to actually calculate the position of the pendulum itself, which had been my initial attempt. In so doing, I was able to come up with a very simple approach to this animation.

First, I settled on using the rotational method for calculating the angular acceleration as I mentioned before, so I decided to use the simplified equation provided on the physics site above: θ'' = - g⁄R sin θ. Since we already know the angle of rotation our pendulum begins with (either by explicit assignment or by user input or some sort), the calculation of the change in this angle becomes extremely easy. For ease of calculation, I simply made the assumption that our gravity is pulling straight down, but this can easily be modified to allow for gravitational pull from different angles as well.

A couple other criteria for making the animation most believable is the needed access to both the FPS of the document as well as what power of gravity you choose to use in your calculation. For my example, these are both member variables of the base class and are assigned statically (30 FPS and gravity of 4 for this example). Obviously, the higher the gravity setting, the faster the acceleration and shorter the period of your pendulum’s swing. With these pieces in place, the actual calculation and assignment of the animation position is as simple as these two methods inside our Pendulum class:

protected function rotate(e :Event) :void
{
     // Calculate gravity per frame
     var g_segment :Number = this.swf.gravity / this.swf.frame_rate;

     // Calculate current angle in radians for use with sin
     var r_angle :Number = this.angle * (Math.PI / 180);

     // Use our equation to get the additional change to velocity (in degrees, not radians)
     this.velocity += (g_segment / this.rod_length) * Math.sin(r_angle) * (180 / Math.PI);
     this.setAngle(this.angle - this.velocity);
}

public function setAngle(n :Number) :void
{
     this.rotation = n;
     this.angle = n;
}

Since we are only dealing with changes to rotation and angle, we don’t have to worry about what the current angle or rotation is directly. Only the calculation of difference really cares where we currently are. With this understanding, we are able to update the position of our pendulum based on the angle of acceleration change, not based upon our current position.

As you can see, this turned out to be a fairly simple solution, once I got my mind wrapped around the physics needed for the calculation. I hope this has been some help to you. My next task on this topic is going to be to create multiple modifiable gravitational sources surrounding a pendulum to allow for testing advanced gravitational effects upon this object. I am planning to post any interesting updates which I may uncover during my study.

In the meantime, feel free to view and/or download the source for the SWF above.

View: Full Source Code