V&A Decode: open source identity
| The Victoria and Albert Museum has commissioned me to design a truly malleable, digital identity for their new landmark exhibition Decode: Digital Design Sensations exhibition and providing it as open source code. Members of the public are invited to remix & recode the original piece and turn it into their own original artwork. Some of these recoded versions might then even become the new Decode identity. | Media partner, CBS Outdoor will be promoting the exhibition using the original piece across its large HD projection screens in platforms on the London Underground from Monday, November 30, 2009. All recoded works submitted via the V&A website before January 11, 2010 will then be put forward into a competition to appear in an advert on CBS Outdoor’s XTP screens, further promoting the exhibition. |
Download the identity & get started at: decode.googlecode.com
Flickr set documenting progress & finished results
Identity concept
| The conceptual starting point for the identity was the observation that code, just like our human languages, consists of many different layers of abstraction. Using abstraction any concept can be decomposed into increasingly smaller & fundamental components and processes. Just as we can describe any concept with our human language on these various levels of abstraction, so we can with code too. | We can talk DNA, nucleii, cells, organs, bodies, animals, biology or just living things - each of these terms also fully includes and encloses all the previously mentioned terms, thus forming a nested structure similar to onion skins. Thinking about the actual meaning of each of these terms, we can also deduce that the more general the term, the further out the semantic layer, the less precise and so the lower is its level of detail. |
An excursion into mapping
| Using this mental image of onion skins and applying it to a wordmark in a graphic design context, we need to create a suitable structure visualizing these nested layers. Terrain maps (especially hiking maps) often show contour lines to visualize the different elevations present in the mapped area. The lines are drawn along threshold elevations and indicate the area within this contour outline is at least as high as the indicated elevation. Often this is coupled with colour coding to make this visualization more obvious. The more contour lines are present in a map, the more precise an image we get of the overall structure of the mapped terrain. The same concept can also be applied to three dimensional spaces. | However, in a true 3D context elevation is not the most suitable metaphor for defining contours. Instead we imagine each point in that 3D space to have a different density and then can choose contours to wrap around areas of a given density value. The equivalent of a contour line in 3D space is a contour surface enclosing a volume. As an example, this technique is most commonly used for visualizing medical MRI scan data: bones have a higher density than tissue and by choosing the correct threshold we can “carve out” the volume only representing the points of the scanned body part occupied by bones. We will do the same for creating contours of the Decode identity wordmark. |
Image by Ivanvlee8 on Flickr, CC BY-NC-SA licensed.
Starting with the word “decode”, a single word, we have to transform this piece of text several times in order to create a true 3D representation of it. The transformation steps are briefly shown in the figure below and are described in further detail on the project wiki.
The following images show the basic concept of the transformation using 2D slices of the actual 3D volumetric version used in the identity. The last image shows 4 resulting contour outlines…
The following wireframe images then show these same contours as nested 3D surface meshes, partly curled up to reveal inner structures…
Wireframe structure without distortion
Wireframe structure with applied vertex extrusion
Ambient occlusion test render done in Sunflow
Concept vs. representation
| A first glimmer of the identity visuals was introduced with the official invitation sent out to patrons in early October. These images have been rendered at super high resolutions (10600 x 5100 pixels) using Sunflow. Since the high resolution combined with some of the parameter variations required long render times (11+ hours per image), I utilized Amazon's Elastic Compute Cloud to assemble my own on-demand (and fully open source) render farm. I've also written a detailed step-by-step tutorial about this setup over here: Sunflow on Amazon EC2 | When the invite was due to be sent out, the detailed inner workings & behavioural dynamics were not yet fully decided above and beyond the agreed contour layer concept and this first (static) model prototype created. However at that point the huge potential of formulating and tying down the identity purely as a volumetric type also finally became obvious to everyone involved. The volumetric representation can be visually interpreted in many, many ways and so creates sufficient scope for different expressions & experimentation by others during the Recode competition phase of the project. |
High resolution artwork for the invitation. (Click images to see higher res versions on flickr)
Creating a platform for remixing / recoding
| The diagram below gives a brief overview of the various conceptual players, their interactions and transformation steps responsible for the current identity look & feel. Since the aim of the project was to allow as many people as possible to take part in this project and create their own customized versions, all tools needed to be free & open source. Having said this, it almost reads like reverse logic, since without open source tools I'd not have been able to create the project in this shape & form to begin with… | The main application itself has been developed with Processing, but also heavily relies on functionality provided by my own library project, toxiclibs, OpenGL and its shading language GLSL. The application also has a graphical user interface allowing people to tweak many parameters of the identity without requiring any coding skills. This GUI functionality comes courtesy of Andreas Schlegel's ControlP5 library. |
Overview of the identity's conceptual components/mechanics
Application screenshot with user interface
Foresight & hindsight
| Commissioning a generative and interactive identity for a major exhibition about said topics might seem (to some) like a logical thing to do, however the V&A is truly breaking new ground here and hence taking on a big risk. Yet I believe everything we've done with this identity is exemplifying the intention of both the exhibition and the V&A as institution itself: to debunk some of the myth behind code based works, to utilize & demonstrate the potential of contemporary means of creation, to document and educated about the breadth and scope of these means… | If you haven't done so by now, you can find the identity application, its source code, a detailed user guide and all other important information on: decode.googlecode.com. The project wiki also contains a large section for people interested in hacking the source code and provides more detailed information about the various different project files and pointers how to re-interpret the identity's data structures. |
Variations created using the identity generator
See your work on the tube...
| As mentioned earlier, the identity will be shown on the CBS owned cross-track HD projectors throughout London Underground for the duration of the show. Recoded works submitted by January 11, 2010 will also be considered for this purpose (works submitted later will still be shown on the V&A website). | A panel of judges consisting of representatives from the V&A, London-based moving image and digital arts organisation, onedotzero, along with CBS Outdoor, will decide which three outstanding recoded designs will be used in the adverts. |
Testing the visuals on CBS XTP system at Camden Station
decode.googlecode.com
