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.)