Tag Archives: 3d

Lawnmower Man

Lawnmower Man is a low-budget (5M) independent film released in 1992. It was the top-grossing independent film that year, and the the first film that I know of to use full-frame 3D animation for key plot scenes.

It’s also the one motion picture I’ve worked on.

For Lawnmower Man, I managed a small team that designed and animated simulated (i.e. fake) user interface for the characters to interact with. This was a side project when I was still working at Apple, conducted in the evening and during strategically chosen vacation days.

My work got an unusual amount of “screen time” for a first effort, and the director shook his head as he told me what other directors were stuck with for their screen graphics. The Northern California interactive media boom had made a lot of new stuff possible: interactive 3D, 32-bit graphics, transparency, animation and compositing were way ahead of hollywood’s UI thinking. For many years after, movies were still cursed with command line UI and super-crude graphics. It was fun to solve the problems with real interaction design tools, even if the UI was completely made up.

In those days, directors didn’t want a computer anywhere near the rolling camera as a locked-up computer could hold up shooting, costing hundreds per minute. After animating all the user interface in advance, I used a special video recorder, controlled by computer, to record one frame at a time onto Betacam tape cassette. The result played back beautifully and smoothly – quite a treat for those of us used to the stutters of real-time animation in the 90s.

On camera, this tape was then played through the fake computer monitors while the actors pantomimed interaction with the user interface. The UI would move and change on its own; to appear to be using it, the actors (Pierce Brosnan and Jeff Fahey) memorized the timing  and positions so they could move their hands correctly.

An interesting note: video (in the US) and film have different frame rates. Video is (around) 30 frames per second, and film is 24 frames per second. If you just point a film camera at a video monitor, the difference in frame rate will cause moving black bars to appear on the video screen, ruining the visuals. To fix this, they have special tape players that synchronize with the film’s shutter speed. There are companies that specialize in this, and you see them in the credits as “24 frame playback.”

For production, we used the 3D workhorse of the time for the Mac (the ‘040 era:) infini-D and everyone’s favorite animation and interactivity authoring tool, MacroMind Director. This was a time when the ability to composite images with an alpha channel (transparency) was somewhat new in the personal computer world – the first time where you could seamlessly blend output from 2D and 3D graphics programs, and Director was a great tool for this type of work.

It was a great experience visiting the set to do the final transfers; it was my first view into how large-scale creative endeavors can be organized to maximize creative freedom and personal expression while tightly controlling cost and delivering a compelling product. One “all nighter” as I recorded a few fixes to some of the animations, the set crew built an entire house – with paint and wiring – on the soundstage outside the art department. I was amazed at what this industry does on a daily basis. As the software industry becomes more design-driven, we are similarly challenged to be creative at scale – to maintain a coherent creative vision while coordinating the actions of thousands of individuals, many with their own creative sub-domains. But that’s another post.

Tagged , , , ,

structural animation in HTML5 + CSS3

I was cooking up a new search preview control lately and came across a very interesting idiom in HTML5/CSS3 that seems like one of those small technical details that indicates how we code web apps is about to change radically. This JSFiddle demonstrates what I consider to be an interesting and possibly important breakthrough in UI frameworks.

If you run the fiddle on a Chrome browser you’ll see an image. If you hover your mouse over the image, you’ll see something like the below:

Screenshot showing a user interface consisting of a picture of a "Tintin" statue with an array of images fanned out behind it like a deck of cards.

A control for showing a set of images in the effective space of one image. The user can “spin” the deck so that cards are rapidly rotated through the top position, allowing rapid preview of set contents. When the mouse moves away, the “deck” smoothly stacks up under the top image. see the demo

You’ll notice (on Chrome) that the cards in the background start out hidden, then animate smoothly out into the fan shape shown above.

There’s more: click on the top image and it will smoothly fade while flying towards you, the rest of the deck will smoothly rotate up with each card taking the place of the previous one, the original will reappear smoothly at the bottom – allowing infinite cycling – and everything happens at the best frame rate your machine can produce. On a MacBook Pro, it’s a solid 60 frames per second. It’s an entrancing effect, tuned to the nearest millisecond. In one of my apps I have it hooked to scrolling and it runs like recombinant mercury.

Here’s the interesting part: the code that runs when you click (or scroll) looks like this:

box.prev = function() {
$div.append($div.children(“.page”).first().remove());
}

This is superficially JQuery, but the practitioner will recognize that JQuery is not being used for animation. What this says is:

“remove the first child of the div and put it onto the end of the div”

In other words, a purely structural statement. There are no pointers to the top page, no “firstHiddenPane” variables keeping track of things, no ad-hoc circular buffer implementations. There is literally zero presentation logic for this arguably state-of-the art control.

This control’s behavior is built entirely in CSS3. You might expect the appearance – the static image – to be in CSS, but here a fairly complex set of dynamic state is being managed by the CSS engine with high GPU utilization** While we have been approaching this kind of architecture for quite some time in CSS, I think this example implementation represents a threshold in the evolution of the model wherein some large, complex, and hard-to-master user interface constructs suddenly become easier to build on JS/HTML/CSS than on any other UI platform – and promise to run with optimal performance characteristics on modern and future OS platforms.

As an example, I’m rewriting a fairly large and sophisticated view control to use this technique and finding the already-heavily-refactored code to be reduced by more than 50%. At the same time, it’s getting faster by a large measure. The code is also getting far prettier, always a key indicator.

More to share in a future prototype. Love to hear your thoughts about this technique – is it really something new, or just another idiom?

If you don’t want to parse the code, the key CSS concepts used are nth-child, transition, and transform. The insight was how they work together: more on this in a later post, if you can stand not to tinker it out yourself.

* all currrent-gen browsers can do this technique, but cross-browser CSS3 (including all variants) would be much harder to read. For my production work, I typically use a script called -prefix-free from Lea Verou that automatically inserts the right browser prefixes dynamically at runtime.

* certainly all the discrete visual elements are loaded onto GPU “surfaces;” with a suitable set of shaders, the position and opacity values could easily be interpolated on the GPU, meaning all the CPU-side CSS engine would need to do would be to switch shader parameters on the DIV’s surfaces

Tagged , , , ,