Held on December 3 at University of Toronto’s BA Bahen Center for Information Technology, Spotlight HTML5 featured speakers Frederic Harper, Peter Nitsch, Matthew Potter, Greg Rewis, Bobby Richter, Addy Osmani and David Neumann. Thanks to these passionate and talented presenters, Spotlight HTML5 was informational, fun and interactive.

I had the chance to blog about the event, focusing specifically on two sessions of the day: Peter Nitsch’s Back-end Canvas and Bobby Richter’s Popcorn.js: Make your Media Come Alive (more on that tomorrow). Up first, Nitsch’s session on how HTML5 graphic design can be a great way to express yourself on the web.

Back-end Canvas
With HTML5 still a new and expansive development, it’s just as much about web development as it is graphic design. We can make works of art by way of graphic manipulation, a long-existing form of art which is only recently becoming an extremely popular and aesthetically appealing form of design. Peter Nitsch, a retro textmode geek working at Teehan+Lax, a digital consulting agency in Toronto, expressed this important sentiment in Back-end Canvas.

In his session, Nitsch showed a unique example of HTML5 graphic design via typographic portraits, and how it is utilized in one of Nitsch’s latest projects, Bell Social Portrait. Social Portrait visualizes your digital persona by using tag clouds on Facebook and Twitter to replicate your avatar. So how do we create graphic designs like Social Portrait?

The process is not as inaccessible as you might think. Nitsch covered some of the popular Node.js image processing libraries, including Node Canvas – a canvas implementation for Node.js, which is used to create what you see on Social Portrait.

Probably the most interesting aspects of this had to be the artistic process itself. Part tag cloud and part grafitti art, a grid system was used to manipulate keywords to work within your avatar. The process went from simple blocks aligning themselves into an abstract image, and then into an intricate replica of an image constructed with your personal keywords.

Nitsch also used case studies and supporting code samples to depict just how the artistic process comes into effect. Despite the technical nature of this process, it’s also very much a creative process that’s fast and fulfilling.

Connect with Peter Nitsch online:
[web] peternitsch.net
[work] teehanlax.com
[Twitter] @peter_nitsch

You can also view Peter's slides from his session here.