The Amazing Visual Language of Processing

A black screen erupts in a flurry of colored particles that scuttle like leaves in the wind, gradually revealing the smooth contours of an Audi TT sedan. Made by Universal Everything, the Sheffield, England-based design firm started by Designers Republic member Matt Pyke in 2004, the piece is less a commercial you’d see on TV than a breathtaking visual sculpture you’d find… well, you might find it in a museum as more exhibition spaces recognize the growing artistry of motion graphics. But most viewers saw it online, as a viral video sent spinning from person to person and tagged with multiple exclamation points. What makes the video stand out is how it captures an emerging aesthetic quality—of unfolding, of organic emergence, of algorithms made visual.

Stills from the viral/HD-TV spot for the Audi TT sedan by Universal Everything.

The source of this visual spectacle? An award-wining program called Processing, created six years ago by C.E.B. Reas and Ben Fry, who were part of the Aesthetics + Computation Group at the MIT Media Lab, where they worked with John Maeda. Recently recognized by the 2006 National Design Triennial and awarded a Golden Nica at the 2005 edition of Ars Electronica, Processing emerged from a desire to have a tool that would help designers understand programming. “Ben and I both studied graphic design so we don’t come at this from engineering or computer science background,” explains Reas, who now teaches in the Design | Media Arts program at the University of California, Los Angeles. “We came to it as designers and the language thus has been built differently.”

New York Magazine illustration by Ben Fry.

The difference Reas references is the fact that Processing uses a simplified language syntax and intuitive interface that lets designers start experimenting immediately. Some use it primarily as a way to test ideas. Says interaction designer Raegan Kelly, “For me the appeal of Processing was that it is a non-proprietary open source programming sketchpad for visual artists who grapple with problems of data display in computational environments.” She continues, “It's relatively easy to learn, and allows one to move fairly quickly from idea to proof of concept, one idea at a time—which means there is no need to develop a complex codescript to see if what you want to make can be made, and ultimately will say what you are trying to say.”

The Venice, California-based company Motion Theory was among the first design firms to use Processing in their work. “We first used it in an R.E.M. video five years ago,” explains Motion Theory co-founder Mathew Cullen. “We wanted to try Processing for the video because we were exploring very abstract concepts related to visualizing superstrings, emotion and other forces we can’t see. Processing offered us a way to explore some new looks that we couldn’t possibly hand animate.”

Since then Motion Theory has used Processing on assignments for HP, Nike and dozens of other projects—a recent spot for Nike, for example, visualizes the nascent calculations required to make a putt by Tiger Woods as a swirl of graphics swimming around the golfer’s head. Again, the visual quality suggests an unfolding process, something much richer than might be signified using traditional animation techniques.

Frames from Nike "One," in which Motion Theory used Processing to visualize thoughts, for Wieden+Kennedy.

“In the hands of the right artist, Processing can be an important part of an overall look because it helps to manipulate images in very specific ways that relate to the underlying concepts,” explains Cullen. “We like to make sure that design is an intentional process that not only communicates a message, but the nature of the design itself echoes the communication. Processing can sometimes achieve this—and even if it doesn’t, it can just help us to develop great visuals that we couldn’t otherwise create.”

Screenshot from Harris's interactive Universe.

The Processing Exhibition space is a testament to the tool’s wide range. Projects include Jonathan Harris’s interactive Universe, which allows users to create personal constellations from data collected from news sources and to derive meaning based on their own orchestration of it. Fry’s work often similarly manipulates information streams. Last year, he used Processing to craft two print illustrations for New York Magazine—one illustrates connections among 50 top blogs, using information from the website Technorati while the other shows a globe made from the names of significant blogs. He has also created Salary Vs. Performance, a sketch that allows users to compare the money spent by 30 baseball teams in relation to their success throughout the season. Processing is particularly apt for these applications, namely visualizing information, and creating ways of making connections among data sets.

Yo so la Juani title sequence still.

However, Processing is also great for making beautiful things, and indeed, many designers will post their work with a sheepish admission that it’s eye candy. The opening title sequence for Bigas Luna’s film Yo so la Juani, for example, looks like a stunning, multi-layered 3-D Spiro-graph drawing come to life, and there are innumerable examples of beautiful, complex moving image works made using Processing. Designer Marius Watz maintains the Generator X blog, home to many examples of Processing-based art, with categories that include “beauty of numbers,” “computational design” and “performative software.”

“There is a place for and a need for wondrous things,” asserts Kelly in response to Processing’s role in generative art. “There are times when I see something by Jared [Tarbell], a simple computational visualization of a complex math equation iterated on screen, that completely captures me, causes me to think about beauty and systems and things normally only understood by brains very different than mine. I would like to think there is a place for that alongside standardization protocols, universal access and deep data sets.”

Marius Watz's GasWorks 1-3.

That beauty now surfaces in unusual places, such as an ad for an Audi sedan. More importantly, though, Processing is allowing designers to push the boundaries of design itself, expanding its borders to include new realms and processes. Reas notes that in less than a decade, graphic design has embraced motion and sound, and “that’s now happening with interface and interactive design.” But Reas also points out another key factor: Processing helps designers build a sense of code literacy, which in turn will contribute to more sophisticated considerations of what Watz calls generative aesthetics and design as a computational process that unfolds spatially and temporally.