How do I simulate a swinging pendulum?

Question

I want to simulate a rope with a weight attached, swinging back and forth like a pendulum. Any actual physics is overkill; it's just endlessly repeating the same motion.

JQuery has a the "swing" ease similar to what I'm looking for. How does it work?

I was thinking of rotating from one angle to another with Math.easeOutExpo, but real pendulums ease differently...

Answer 1

Well, you'll have to use a little bit of physics, but you don't need to simulate any physics. There are formulas for pendulum motion you can easily use to set the rotation of your pendulum. For small swings, the motion can be approximated with simple harmonic motion.

The angular displacement at a specific time can be approximated with:

This is most accurate for a small maximum θ, but will likely be accurate enough for your purposes. Create a function that takes the current time, and outputs the angle for which your pendulum should be rotated, and rotate your sprite by that amount.

Answer 2

Here is a no-trig calculation, derived from straight-forward Grade 11 Trig and Physics. It assumes that the origin is the lowest point of the pendulum bob's suspension, that L is the length of the pendulum, and that the normal graphics convention of y increasing down, and x increasing to the right is adopted:

Update: I messed up yAcceleration initially; this is easier.
Update #2: Added explicit time control, and added units of measure.

const float gravity = 9.8;     // units of metres/sec/sec
const float deltaT  = 0.001;   // equals 0.001 sec or 1 millisecond

var xVelocity = 0.010;         // units metres/sec equals 10 cm/sec 
var x = 0.0;                   // units metres
var y = 0.0;                   // units metres

while (true) {
  var xAcceleration = -gravity * (x/L) * (L-y)/L;

  x += (xVelocity + (xAcceleration/2 * deltaT)) * deltaT;
  y  = Math.SQRT(L*L - x*x) - L; 

  xVelocity += xAcceleration * deltaT;
}