In this demo, I draw an animated stickman running. When I started this drawing, my plan was just to draw a stickman. Then I wanted to draw a posable stickman. But once I had a posable stickman, it was a no-brainer to draw a stickman running.

I draw the stickman by drawing one circle and nine vertical lines. That’s right—nine vertical lines that each begin at the origin. How is that possible? Before drawing the right forearm, I translate the origin of the drawing context to the position of the right elbow and rotate the context based on the angle of the right forearm. By manipulating the context, the right forearm is always a line drawn from (0, 0) to (0, 50). There is no math required.

I pose the stickman by passing my drawStickman subroutine nine angles—one for each line. I can move the stickman’s left thigh by changing its angle relative to the hip. To draw the stickman running, I supply two poses and my animateStickman subroutine loops between them, calculating all of the in-between poses for me automatically. Learn more.