Monkey Animation Project Part 3: Animation

This is part 3 of a series describing the making of the Travels of Code Monkey project.

Up to this point, I wasn’t sure exactly what sort of animation I wanted to make. The original intent was to make the simplest possible animation that used all of the photos exactly once, perhaps at a speed where you could actually look at the photos. In fact, I made a couple of these without too much trouble, basically by sorting the monkey pictures, and then moving through them. The first version of this just had Mr. Monkey sitting in the middle and gradually rotating a full three hundred-sixty degrees. This was cute, but it was a bit boring, and many of the pictures were scaled too large, or too small, or cropped quite a bit, etc. The next step was to divide the screen into sections, and have Mr. Monkey gradually move around to use all of the pictures, with each one left mostly intact.

Here is one of those test animations. In this one, the pictures are sorted into a number of ‘size’ buckets, and then within each size bucket sorted by rotation. The result is that Mr. Monkey starts out small \ far away, and gradually gets larger \ closer, while rotating.

I was tempted to call the project done at that point, but, thanks partially to some prodding from my then-fiancee (now wife) BlackCatBonifide, I decided to take it to the next level, and make a real animation. I started off trying to create some animation tools within my Processing app. First I added a mode where I could “drive” mock-up Mr. Monkey around like an airplane with the arrow keys, after which the app would go back and “render” the animation using the real photos. This was amusing, but the results are unsurprisingly quite sloppy. It turns out there’s a reason you don’t see many 3rd person 3D flight simulators.

Suzanne meets Mr. Monkey

My cheap tricks having failed, I resigned myself to doing “real” animation, with keyframes and tweening. I spent a while debating whether or not to implement these things myself inside the Processing app. The advantage to that approach would have been to have the entire process smoothly integrated inside one application. In the end, though, I decided against reinventing the wheel. Instead, I used Blender, an open-source 3d-modeling, animation, and non-linear video editing software. Coincidentally, Blender already comes with a model of a monkey head: Suzanne. Unfortunately, she has somewhat different proportions from our own Mr. Monkey, so I ended up re-creating him anyways.

I modified one of Blender’s existing export scripts (using its Python API) to export a given animation of a single object in a very simple text format: Each line has the desired x and y coordinates, size, and rotations for a single frame of animation. Finally, I extended my Processing app to read the animation files exported from Blender. It then performs the previously described matching algorithm for each frame of the animation, and then dumps each frame as a sequentially named jpeg. I eventually imported these back into Blender’s non-linear-video editing tool to create the final product.

The Real Work: Animating

With the tool chain more or less complete, I was left to finally create the animation itself, using Blender’s built-in animation tools. For the verses, I started out by choosing photos that I wanted to freeze on at key parts of the song, and setting up those poses as key frames. Of course, these initial animation were quite boring, with Mr. Monkey drifting in a straight line between each key frame. I spent quite a bit of time making these animations more interesting, by having Mr. Monkey travel in circular paths, rock his head to the music, jump around the screen, etc. Creating interesting, smooth, natural-looking animations even for something as simple as a monkey head is not easy, and I have a lot of respect for those who can do it well. Luckily for me, I only had to do it not-too-terribly; I relied on the photos to make things interesting. Once I had animated Mr. Monkey’s disembodied head flying around in Blender, I exported the animation to text, imported that into my Processing tool, and used that to render the animation using the pool of labeled photos.

Cheap isolation, using mock Mr. Monkey's silhouette as a mask.

For the chorus animations, I utilized my secret weapon: my wife Bonnie (BlackCatBonifide), who does professional work in multimedia, particularly in animation and music. She had already given me a lot of inspiration and feedback up to this point, and she proposed that she do the chorus animations to mix up the animation style a bit. I happily agreed. I created some simple monkey animation loops for her to work with, including versions with Mr. Monkey’s head isolated from the rest of the photo, using Mock Mr. Monkey’s head rendered in silhouette as a mask. Finally, Bonnie combined these with other photos from the Travels of Code Monkey pool, and with other creative-commons photos from Flickr, animating everything together using Final Cut.

Until next time

That just about sums up the technical process. There will probably be at least one more post in the near future with some final thoughts, including what I might have done differently knowing what I know now, and what’s next for animation tools.

Continue to Part 4: Final thoughts