To get stickman running, writing a subroutine that draws a posable stickman is only half the job. My stickman running animation has ten separate frames. Unless I want to manually pose stickman in each frame, I also need an animateStickman subroutine to calculate his poses for me.

This is how the animateStickman subroutine works: I create two poses—one for frame A and one for frame B—and then the subroutine calculates all of the in-between poses automatically and loops through them. Because the subroutine is essentially transforming the pose in frame A into the pose in frame B, this type of animation only works when stickman’s motion is smooth and periodic.

While stickman’s pose in frame A looks identical to his pose in frame B, I colored his right side blue and his left side red so that it’s easier to see what’s changing. If we just focus on his blue right arm, his right upper arm has an angle of -72° in frame A and 54° in frame B. Remember, those angles are relative to his torso. His right lower arm has an angle of 234° in frame A and 270° in frame B.

Use the number field to step through the frames one by one, and see how his right upper arm angle and his right lower arm angle change over time.

Frame: ; right upper arm angle: , right lower arm angle:

Frames between frame A and frame B: ; draw a new frame every: milliseconds

We can also change the number of frames between frame A and frame B. Increasing the number of frames makes the animation slower and smoother. The animateStickman subroutine automatically calculates the poses for the new frames. Changing the time between frames adjusts the speed of the animation without changing the number of frames being looped.

Animate a stickman.