The Amazing Visual Language of Processing
Posted on July 17, 2007 by jwatson
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 youd see on TV than a breathtaking visual sculpture youd 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 qualityof unfolding, of organic emergence, of algorithms made visual.
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 dont 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.
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 timewhich 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 cant see. Processing offered us a way to explore some new looks that we couldnt possibly hand animate.
Since then Motion Theory has used Processing on assignments for HP, Nike and dozens of other projectsa 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 golfers head. Again, the visual quality suggests an unfolding process, something much richer than might be signified using traditional animation techniques.
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 thisand even if it doesnt, it can just help us to develop great visuals that we couldnt otherwise create.
The Processing Exhibition space is a testament to the tools wide range. Projects include Jonathan Harriss 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. Frys work often similarly manipulates information streams. Last year, he used Processing to craft two print illustrations for New York Magazineone 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.
However, Processing is also great for making beautiful things, and indeed, many designers will post their work with a sheepish admission that its eye candy. The opening title sequence for Bigas Lunas 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 Processings 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.
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 thats 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.