ricardocabellov5.5

And you may be wondering, where does all this thing about drawing tools come from? Good question!

Although I've always had interest on developing a drawing application, it all started when Aaron Koblin asked me if I would be up for developing a drawing tool for a Johnny Cash homage project he was planning with Chris Milk. I think this was about 6 months ago, even before the Startbucks Love Project (where an alpha version of the drawing tool was used).

Before passing away in 2003, Johnny Cash recorded one last album which was never released, until now. The idea was to build a platform where everyone would be able to draw a frame for the musicvideo for one of the tunes.



The website (front-end and back-end) was built by @radical.media so my work on it gets simplified to the repainter and painter system.

Repainter

One of the requirements for the drawing tool was to record how the frame was being drawn so the visitor on the site could see a timelapse. For example, here is a drawing I did:



There is small aspect ratio bug on that one, but you get the idea...

Doing this took a bit of time, but luckily I had learnt a few tricks some weeks before after trying to port the Colors! Java Repainter applet to AS3.

Creating a file format turns out to be quite simple. Just a matter of deciding a few tags (size, color, opacity, position...) and deciding how many bits you need for each value. For instance, I have STROKE_START which has the id 4, we do bytearray.writeByte(4) and then we save the positions of the mouse, but because these values can be bigger than a byte (256) we need to use int bytearray.writeInt(x) and bytearray.writeInt(y). We do the same for the rest of data and at the end we use bytearray.compress() which is pretty much a zip. The end result is a very simple and optimised file format, faster to parse than a xml and much smaller.

Having a hexadecimal editor is a must here (I used GHex). Here is a screenshot of how the uncompressed file format looks like:



If you know about file formats, I'm sure you already know what's going on, otherwise there you have a quick challenge for lunch time ;)

Painter

Having the file format sorted out I "just" had to develop the drawing tool itself. This may sound an easy task but, starting with the premultiplied alpha nightmare (more info) it has a bunch of little challenges... undo/redo, custom brushes, zoom, panning, brush outline... it just takes its time.



Using the original frame of the video as onion skin we can get nice results in a few minutes.



Now I can't wait to see how the project evolves and hopefully seeing the video without missing frames soon!