Visualising drawings in 3D with DrawPad

20 May 2011


A Blue Perspective: Visualising drawings in 3D with DrawPad

Last February at Ignite Sydney we thought we'd try something a little different to get the crowd involved.

While most people were downing a few drinks, a bunch of lovely lads and ladesses with iPads were circulating through the audience asking people to draw (with their fingers) what inspires them. On the iPads was a drawing application that recorded the time and position that each stroke of their fingers made and that data was used to create a 3D timelapse visualisation of their drawing on the big screen behind the stage. I've put together a little video of the end result:

It was actually quite exciting to see what people came up with. And equally exciting was seeing the looks on their faces as they interacted with the iPads and then waited with anticipation to see how their drawings would be interpreted by the foreign shapes appearing on the screen.

Someone drawing on an iPad using DrawPad To pull off this stunt we used all open web technologies: a webpage running my "DrawPad" Canvas application that allowed people to draw, and captured the movements of their fingers; storage of the stroke data in JSON on the backend (thanks to Tim Lucas); and visualisation of those strokes in 3D using WebGL via Mr. Doob's wonderful three.js library.

To get people drawing, I took a look at 37signals' Chalk but it lacked one important feature: multi-touch drawing, so I decided to write my own drawing app.

If you're never done multi-touch event handling it can be a mysterious process (it certainly was to me) but once you get your head around the notion of an event object that contains multiple points of interaction, then it's actually quite fun.

3D visualisation of a drawingI've uploaded the source code for the drawing app (and the 3D visualiser) into a DrawPad Github project if you want to take a closer look (or improve it in the countless ways that it could be improved upon). Certainly the 3D visualiser is a result of cramped deadlines. I really would have loved to create the stroke paths as true 3D meshes, but had to settle for a series of spheres that follow the path of the stroke instead. (Kind of like voxels.)

But at the end of the day the technology didn't matter. What mattered was the outcome: an easy-to-use way for people to draw what they wanted, and a pretty-as-a-picture translation of what they drew. The fact that it was done in a browser made no difference at all.


, , , , , ,


  1. 1/4

    Shaal commented on 21 May 2011 @ 14:19

    How do you come with such ideas, this might be a good way for Live performances based bars and clubs to get their audience to share their requests, love the way the projection takes the shape of animation on the big screen. Way to go man!

  2. 2/4

    Alex commented on 30 May 2011 @ 18:40

    Very nice effect ... wonderful idea.

  3. 3/4

    Marko commented on 31 May 2011 @ 02:06

    WOV, amazing visualization. It looks like a great idea, it shows that people will enjoy. I would like to try it.

  4. 4/4

    Theo commented on 31 May 2011 @ 06:18

    Well that's what i call creative, great stuff!!!

  5. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed