Blogless: Blog of Design Less Better.

Less is Better Design Edition: Animating the HAL 9000

In the ongoing tradition of doing more with less, DLB reveals how we created a realistic-looking animation of the HAL 9000 with a minimum of resources and effort.

I have to admit, I’m a little jealous of Paul’s wonderful programming posts. Not only does he get to show off his great solutions to common web design problems, but he gets the highest share of our site’s visitors, as well.

The HAL 9000 from the movie 2001.
“What do you think you are doing, Nick?”

In the interest of generating some “graphic traffic”, I thought I’d try something similar and write up an interesting visualization problem I solved this week.

The Background

My neighbor is a screenwriter who also works for Zingerman’s, a famous deli we’ve written about before. Each year, around this time, he makes a short film for the company’s yearly planning meeting. These are surprisingly polished, ambitious affairs, accomplished with virtually no budget and very little time. I chip in by making posters, logos, titles—whatever is needed. It’s strictly unofficial, backchannel stuff, but it’s fun. This year the films of Stanley Kubrick are the theme of his movie. I received my toughest assignment yet: to make a HAL 9000.

The Problem

The scene called for a close-up of HAL blinking slowly. This would be an animation, so my first thought was to keep in all in one program: build a model in 3D and render the frames straight to footage. I figured the model was simple enough that I could recreate the scene by constructing everything realistically. I mean, in reality, HAL is just a lens with light behind it, right?

As it turned out, the straightforward way was not that simple at all. The model was easy enough to construct but the lighting and reflections turned out to be real time-killers. I soon realized that getting the environment set up and properly tuned was going to take me hours, to say nothing of the job of rigging and animating the lights and producing thousands of frames of rendered HD (the live footage was shot in high-def). I either had to give up my weekend, or figure out a better method.

The Fix

When time is a crunch and quality is a factor, sometimes lateral thinking is in order. This is a perfect example of “design less better”.

Creating realism in 3D is too much work? Simplify the job: go 2D and fake everything. Animate only what is necessary to get the effect.

The Implementation

1. One of the powerful ideas of programming is that one should avoid duplicating effort whenever possible. If you can, reuse your own code; reuse others’ if need be. To a certain extent, I think the same holds true in design. We all want to be original, but if someone already has a good answer, sometimes it’s best to take it and move on to unsolved problems.

With this in mind, I began the project looking for stock footage I could use in lieu of recreating the scene, but I found that the quality wasn’t up to snuff for HD. I found some wallpaper at a high resolution that looked about right. I would never do this for a paying client, but this is a strictly non-commercial project, so I figured it was ethically and legally in the clear.

HAL 9000 wallpaper.
Wallpaper found on deviantART. Thanks, Javier!

I quickly realized that with the animated eye, I would need to remake the lens as a transparency. I kept the lens frame, and used the wallpaper as a reference for the remaining steps.

2. The biggest hurdle was figuring out what to do about the winking light coming from HAL’s eye. When I started the project, I figured the only way to animate a light was to do it in 3D. But as I looked closely at what I was trying to make, I realized I could simplify things by animating a simple radial gradient. It looks good and, more importantly, renders very fast even at full 1080 HD.

The setting is used to make HAL's eye as a radial gradient.
The light from HAL’s eye is easily rendered as a radial gradient. Changing the gradient sliders and animating them creates the winking effect.

I started with a black background, made a circle for the lens, and set up the gradient sliders for a custom fill. Then I scrubbed the timeline ahead, made a new gradient for the “winking” effect, keyframed and tweaned the two. I added another copy of the original gradient to the end of the clip and keyed and tweaned this one, as well. To wrap things up, I rendered the sequence to a series of frames.

HAL animation

This process is so simple that it can be duplicated in any number of programs. For example: using keyframes in Flash, writing a short Processing program, or using the animation tools in a 3D program.

3. Next I had to tackle the lens itself. Reflections in 3D are complicated any way you slice them. If they’re real, you need something to reflect, so foreground elements like lights and shapes need to be created off-camera. Even worse, in HAL’s case, the lens causes spherical distortions, which complicate things further. Without knowing what was on the set or its dimensions, recreating the original frame would be pure trial-and-error.

The simple solution is to just simulate the reflections: paint them in 2D. I have a screenshot, so I know what I want them to look like. Rather than trying to figure out how to get them close in 3D, why not just draw exactly what I want?

Tracing the reflections.
(Left) Tracing the reference image. (Middle) The filled shapes. (Right) After blurring and blending.

I traced the reflected shapes in a vector program (Illustrator or even CAD would work). Then I opened them up in an image editor and used them as masks (Ctrl-click the layer thumbnail) for painting in the color fills. Finally, I blurred the shapes slightly and adjusted their transparency to match the framegrab.

4. The final composite is just two layers: the bottom layer with the animated frames and the top layer that contains the background, lens, and reflections with an alpha channel. Run these through AfterEffects, or what have you, and you’ve got your clip.

Composting the layers.

Conclusion

All told, this only took me about three or four hours. Much faster than rendering fully-lit frames in 3D, without a significant hit in quality.

Here’s how everything looks put together.

Efficient. Effective. HAL would approve!

These icons link to social bookmarking sites where readers can share and discover new web pages.
NickAug 8, 2008
 

Comments on this post

1.

Nick,
What an interesting read, and a nice compliment to your 3D at DLB series. You’ve now used 3D techs to make 2D images, and 2D techs to make 3D images. Overall, I learned an important lesson: Sometimes the right tool is just the wrong tool used the right way!
Kudos!

Paul at 7:26am on Fri, Aug 8th.

2.

WHERE CAN I DOWNLOAD THIS AWESOME WALLPAPER!!!!!

Phred at 8:34am on Fri, May 25th.

Post a comment

Name
Email
Url
Comment
  Please feel free to use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Validate

Want to know more?

You're reading BlogLESS, a thrice-weekly blog about the ethics of advertising, branding, design, social media and business. We are also fans of zen, although this itself is perhaps not so zen.