Sunday, March 23, 2014

the elevator from the movie "her"

If you haven't seen the movie "Her", I'd recommend that you do so. It won the Best Original Screenplay Oscar, and is a terrific music on humans relationship with technology and with each other, dipping its toe into some intriguing scifi concepts like The Singularity.

The movie is set in a near future world, with a lot of pleasant design work: cool models of phones and earpieces, people commuting via highways converted into walkways... One awesome detail is the elevator, which has a subtle forest scene projected in silhouette on its rear wall, providing a graceful sense of motion as the elevator ascends or descends. Here is a GIF of it I grabbed from the trailer:

The trees move in parallax, with the further tree moving a bit slower.

I was trying to think of the pros and cons of this kind of design work, from a UX point of view. People who are nervous about elevators because they don't like enclosed spaces might feel more comfortable; on the other hand, people who dislike elevators because of the change of altitude might find it scary. (Sometimes I wonder if people are really aware of how an elevator is moving, or if they mentally map it to the idea of walk in a room, press a button, step out in a new space)

Anyway, I really liked it, so I made up an interactive version of it in Processing:

You can change the speed and direction with the mouse. (source code etc available at its main page) It's less organic than the original, but I'm pleased with the result. I procedurally (and randomly) generate the trees, with rectangles as the trunk, lines of varying widths for the branches, and piles of ellipses for the leaves. And parallax is such a nice and easy way of conveying depth in a 2D world... video games have used it as a trick for years (see the classic Moon Patrol for an example, which has a kick-butt little riff to boot.)


  1. Is it possible to use this as a live wallpaper of this design for windows 10?

    1. Nice idea but I have no idea how... i could help someone make a movie by making a lot of screenshots or something?

  2. Whoa, this brings back memories. That's awesome that you implemented it in Processing. The one you saw in the film I implemented in Quartz Composer. I was off to the side of camera controlling this animation using a PS3 controller. I think it ran from my laptop and fed 3 projectors, if I remember correctly.

    The art department on the film had made a beautiful quicktime animation of with the upward movement with the layers of trees and parallax, but production was having trouble finding a vendor who could set it up to be controllable on-the-fly in terms of the speed of playback and when it started and stopped animation. I'd been experimenting with Quartz Composer to customize macOS screen savers and thought I'd be able to control playback of the quicktime with it. Eventually I left that approach behind as it was hard to smoothly control the speed and instead got all the original design files from the art department, altered them to be seamlessly loopable, and set them as separate sprite layers that were animated at different speeds and matched the look of the original quicktime. It being Quartz Composer, these sprites (I think the node was named 'Canvas'?) were rendered on the GPU, and the animation was very smooth and at a higher frame rate than the original quicktime file.

    I had speed linked to trigger pressure, with some smoothing of the input data, and also had extra functions at start and end to make the animation ease-in and ease-out at beginning and end. Also set a button to lock the speed, so it would be possible to start it up smoothly with the trigger, lock speed, and then stop it smoothly when given the cue.

    After that scene was shot I went back to continue working in editorial, but I think I set up a modified version of that quartz composer document as a screen saver on my machine. I should see if I can dig up any of those old files.