Fri, Jan 08, 2010

Stylized Graffiti Rendering

Click the above example to load another tag, there are 26 tags to view and 4 different styles. Mouse position controls rotation.
Earlier this week I stumbled upon #000000book.com a site created as an open database of GML files. GML is a new XML format used to describe graffiti tags. GML stores not only the resulting tag but the artists hand movements that created it, essentially a recording of the tag being written. Aside from providing a great source of interesting data I consider this to be an important effort in curating an often misunderstood global artform.
The first step was to create an AS3 library that could parse GML files and provide an interface to the time stamped point data. In doing this it became very apparent that not all GML files were created equal with some files having wrong parenting of nodes and others storing coords incorrectly but this is to be expected considering the GML spec is only at 0.1c.
To render the tags my aim was for a stylized pseudo 3D look. The points are transformed and projected with Z based on time, then rendered as a 2D textured line. Each line segments left/right edges are outlined and the start/end edges are rotated/scaled based on neighboring point angle and Z respectively. Finally a subtle glow filter adds some contrast.