Do you remember Newton’s laws of motion from a couple sections back? Back then, we used those laws to calculate the acceleration of an object, so that we could compute and draw its new position in the world. Now, we're going to use those laws to calculate the acceleration of a pendulum, to compute and draw its position along the swing. And as it turns out, we're going to need some help from trigonometry along the way.
A pendulum is a bob suspended from a pivot. Obviously a real-world pendulum would live in a 3D space, but we’re going to look at a simpler scenario, a pendulum in a 2D space—the program canvas .
Diagram of pendulum with angles
In the Forces section, we learned how a force (such as the force of gravity shown in the diagram above) causes an object to accelerate: F=M×A F = M \times A , or A=F/M A = F / M .
In this case, however, the pendulum bob doesn’t simply fall to the ground, since it is attached by an arm to the pivot point. Instead the bob swings towards its rest position, and we want to compute the acceleration of the bob along the swing. We'll call that its angular acceleration, since the pendulum is accelerating along an arc.
In order to determine the pendulum's angular acceleration, we need to break the force of gravity into components. One component will be along the pendulum arm. We can ignore that component because the arm is always pulling against it, cancelling it out. The other component is perpendicular to the arm. That's the one we care about, because it's pulling the pendulum "sideways", making it swing. Let’s zoom in on the pendulum diagram and visualize those components of the gravity force:
Fg F_g is the total force of gravity downwards. Fp F_p is the force of gravity perpendicular to the arm of the pendulum, pointing in the opposite direction that the pendulum is swinging. Fa F_a is the force of gravity along the arm, which we'll ignore since it won't affect the angular acceleration.
Now how do we calculate Fp F_p ? This is where we use our trigonometry. Fg F_g is the hypotenuse of a right triangle, and θ \theta is the angle of the arm. Sine equals opposite over hypotenuse:
sin(θ)=FpFg \sin(\theta) = \dfrac{F_p}{F_g}
Fp=Fgsin(θ) F_p = F_g \cdot \sin(\theta)
Great, we now have a simple formula to compute Fp F _p. Now let's circle back to our original question: What is the angular acceleration of the pendulum? Once we find the angular acceleration, we’ll be able to apply our rules of motion to find the new angle for the pendulum.
angular velocity = angular velocity + angular acceleration
angle = angle + angular velocity
Thanks to Newton’s second law, we know that there is a relationship between force and acceleration, namely F=M×A F = M \times A , or A=F/M A = F / M , and we can use that relationship with the formula above to compute an angular acceleration. See if you can follow this:
Starting with:
perpendicular force = force due to gravity * sine(θ)
Then we divide the right side by mass, to come up with the acceleration, based on Newton's second law:
angular acceleration = (force due to gravity * sine(θ)) / mass
Then we realize we can just divide the force due to gravity by mass, and that's the same thing as acceleration due to gravity, so we'll just substitute that:
angular acceleration = acceleration due to gravity * sine (θ)
Ta-da! We now have a way to calculate the angular acceleration.
We can simplify that even further, since we're ProcessingJS programmers and not physicists. Yes, we know that the acceleration due to gravity on earth is 9.8 meters per second squared. But this number isn’t relevant to us. In our programs, our "gravity" is just an arbitrary number, one that we can use to scale the acceleration to something that feels right.
angular acceleration = gravity * sine(θ)
Amazing. After all that, the formula is so simple. You might be wondering, why bother going through the derivation at all? I mean, learning is great and all, but we could have easily just said, "Hey, the angular acceleration of a pendulum is some constant times the sine of the angle."
This is just another moment in which we remind ourselves that the purpose of the course is not to learn how pendulums swing or gravity works. The point is to think creatively about how things can move about the screen in a computationally based graphics system. The pendulum is just a case study. If you can understand the approach to programming a pendulum, then however you choose to design your onscreen world, you can apply the same techniques.
Of course, we’re not finished yet. We may be happy with our simple, elegant formula, but we still have to apply it in code. This is most definitely a good time to practice our object-oriented programming skills and create a Pendulum object. Let’s think about all the properties we’ve encountered in our pendulum discussion that the object will need to keep track of:
  • arm length
  • angle
  • angular velocity
  • angular acceleration
Plus we'll also want to specify where the pendulum is hanging from, so we could start with a constructor like this:
var Pendulum  = function(origin, armLength) {
    this.origin = origin;
    this.armLength = armLength;

    this.angle = PI/4;
    this.aVelocity = 0.0;
    this.aAcceleration = 0.0;
We’ll also need to write an update() method to update the pendulum’s angle according to our formula…
Pendulum.prototype.update = function() {
    // Arbitrary constant
    var gravity = 0.4;
    // Calculate acceleration
    this.aAcceleration = -1 * gravity * sin(this.angle);
    // Increment velocity
    this.aVelocity += this.aAcceleration;
    // Increment angle
    this.angle += this.aVelocity;    
…as well as a display() method to draw the pendulum in the window. This begs the question: “Um, where do we draw the pendulum?” We know the angle and the arm length, but how do we know the x,y (Cartesian!) coordinates for both the pendulum’s pivot point (let’s call it origin) and bob location (let’s call it position)? This may be getting a little tiring, but the answer, yet again, is trigonometry. Let's reference the diagram to the left.
The origin is just something we make up, as is the arm length. Let’s say we construct our pendulum like so:
var p = new Pendulum(new PVector(100, 10), 125);
We're storing the current angle on the angle property. So relative to the origin, the pendulum’s position is a polar coordinate: (r,angle). And we need it to be Cartesian. Luckily for us, we spent some time in the Angles section deriving the formula for converting from polar to Cartesian. In that section, our angle was relative to the horizontal axis, but here, it's relative to the vertical axis, so we end up using sin() for the x position and cos() for the y position, instead of cos() and sin(), respectively. And so, we can calculate the position relative to the origin using that conversion formula, and then add the origin position to it:
this.position = new PVector(
   this.armLength * sin(this.angle),
   this.armLength * cos(this.angle));
stroke(0, 0, 0);
fill(175, 175, 175);
line(this.origin.x, this.origin.y, this.position.x, this.position.y);
ellipse(this.position.x, this.position.y, 16, 16);
Before we put everything together, there’s one last little detail I neglected to mention. Let’s think about the pendulum arm for a moment. Is it a metal rod? A string? A rubber band? How is it attached to the pivot point? How long is it? What is its mass? Is it a windy day? There are a lot of questions that we could continue to ask that would affect the simulation. We’re living, of course, in a fantasy world, one where the pendulum’s arm is some idealized rod that never bends and the mass of the bob is concentrated in a single, infinitesimally small point.
Nevertheless, even though we don’t want to worry ourselves with all of the questions, we should add one more variable to our calculation of angular acceleration. To keep things simple, in our derivation of the pendulum’s acceleration, we assumed that the length of the pendulum’s arm is 1. In fact, the length of the pendulum’s arm affects the acceleration greatly: the longer the arm, the slower the acceleration. To simulate a pendulum more accurately, we divide by that length, in this case armLength. For a more involved explanation, visit The Simple Pendulum website.
this.aAcceleration = (-1 * gravity / this.armLength) * sin(this.angle);
Finally, a real-world pendulum is going to experience some amount of friction (at the pivot point) and air resistance. With our code as is, the pendulum would swing forever, so to make it more realistic we can use a “damping” trick. I say trick because rather than model the resistance forces with some degree of accuracy (as we did in the Forces section), we can achieve a similar result by simply reducing the angular velocity during each cycle. The following code reduces the velocity by 1% (or multiplies it by 99%) during each frame of animation:
this.aVelocity *= this.damping;
Putting everything together, we have the following example. We've added a bit of functionality to make it easy to drag the bob and drop it from different heights, too. Try it out! 

This "Natural Simulations" course is a derivative of "The Nature of Code" by Daniel Shiffman, used under a Creative Commons Attribution-NonCommercial 3.0 Unported License.