Making of The Johnny Cash Project
March 31st 2010
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!
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!
Amazing concept and execution! Well done Doob.
Can't wait to see the "finished" video.
Can't wait to see the "finished" video.
March 31st 2010
Hey Ricardo! It was a long process but the team here at @radical.media is really excited to see all of our hard work together finally out for the world to see! Hope we can work together again on another project in the future... felicidades a todos!
March 31st 2010
Hey, I suppose you're not the one to deal with this, but as I'm here to say I'm really impressed with your stuff, having spent a bit of time here this morning looking through and having jumped right in to the Johnny Cash Project, I have a gripe/bug report.
If you make the mistake of refreshing the page or closing the tab etc. you lose the work you are doing, but not only that. You get signed out and if you don't notice that and do another drawing when you ask to submit, you go to a sign in page and lose your work again.
Bit frustrating and a waste of good work and that.
Surely it can't be too hard to use a cookie or something to keep one signed in. Or allow one to sign in and not lose the drawing.
I'm getting a bit frustrated with losing two drawings in one morning.
Other than that it's a great project and I'm really looking foward to seeing more of it.
Thanks for your great work and hope you don't mind the gripe, and can pass it on to the responsible party. I'm using Crome browser, and as far as I know it's fully updated. Maybe I should try in Firefox?
If you make the mistake of refreshing the page or closing the tab etc. you lose the work you are doing, but not only that. You get signed out and if you don't notice that and do another drawing when you ask to submit, you go to a sign in page and lose your work again.
Bit frustrating and a waste of good work and that.
Surely it can't be too hard to use a cookie or something to keep one signed in. Or allow one to sign in and not lose the drawing.
I'm getting a bit frustrated with losing two drawings in one morning.
Other than that it's a great project and I'm really looking foward to seeing more of it.
Thanks for your great work and hope you don't mind the gripe, and can pass it on to the responsible party. I'm using Crome browser, and as far as I know it's fully updated. Maybe I should try in Firefox?
April 3rd 2010
Thanks a lot for the feedback Scott, I'll forward your message to the guys dealing with that.
April 4th 2010
Hey mr.doob, when I tried in Firefox I found my missing drawing there waiting for me. So I'll just apologise for complaining as the half finished drawing wasn't that good anyway, and the other isn't lost.
STOP PRESS
But now I found that my latest drawing, which didn't seem to have any problems at the time of submitting doesn't appear on my contributions page either. So who knows what to think.
There must be some sort of bug getting round.
I'm going to try another.
Anyhow thanks for the good work, I flipped out at the Ball Pool project as you can imagine if you go check out this watercolour work of mine.
http://spaingaroo.com/english/gallery-abstract/image2.html
A big hug from Spain
STOP PRESS
But now I found that my latest drawing, which didn't seem to have any problems at the time of submitting doesn't appear on my contributions page either. So who knows what to think.
There must be some sort of bug getting round.
I'm going to try another.
Anyhow thanks for the good work, I flipped out at the Ball Pool project as you can imagine if you go check out this watercolour work of mine.
http://spaingaroo.com/english/gallery-abstract/image2.html
A big hug from Spain
April 4th 2010
Awesome work! Thanks for the run down of how you wrote the data. I was curious as to how you approached it, because XML would have been a beast. :)
April 12th 2010
Would it be possible for you to release the EXACT same drawing application, but with the option to choose your own reference image?
April 22nd 2010
Roy
My special Attention!
Last Saturday night, I met the Ghost of Johnny Cash.
I saw him singing and playing at the La Tea Da Cafe
corner room up in beautiful Rutherglen,ON.
I even shook "Johnny's" hand, but mostly I heard the
Ghost of Johnny Cash.... His voice is stronger now,
it must be all that pure water they have up in heaven.
It is reassuring to know that The Man in White lets The Man in Black still perform gigs for the people.
The Man in Black and The Man in White are not alone, they have a faithful servant in the person of
Brian Mish to do most of the heavy lifting.
Brian is a small man with a big sound who seems to do the near impossible without effort.
He brings Johnny Cash back to life for two hours a night where ever called.
I'm here to tell you, I have seen the light... Cash Lives!
Last Saturday night, I met the Ghost of Johnny Cash.
I saw him singing and playing at the La Tea Da Cafe
corner room up in beautiful Rutherglen,ON.
I even shook "Johnny's" hand, but mostly I heard the
Ghost of Johnny Cash.... His voice is stronger now,
it must be all that pure water they have up in heaven.
It is reassuring to know that The Man in White lets The Man in Black still perform gigs for the people.
The Man in Black and The Man in White are not alone, they have a faithful servant in the person of
Brian Mish to do most of the heavy lifting.
Brian is a small man with a big sound who seems to do the near impossible without effort.
He brings Johnny Cash back to life for two hours a night where ever called.
I'm here to tell you, I have seen the light... Cash Lives!
April 30th 2010
Tamara
I justgot startedwith myfirst computer last week, and I found the PROJECT acouple days ago. I am absolutely astounded! I just wish THE MAN IN BLACK could see it .It is the kind of tribute that would truly touch his heart. Johnny Cash & Luther Perkins literally taught me to play the guitar bylistening to thier recordings andi can say that if it wasn't for thier genius I would'nt be playing. I have been enjoying His music since the early 60's, it's truly been one of the things I enjoy most. Kindof like the back ground music to my life if you know what Imean? the PROJECT is reallyapiece of living artistic genius,and I can't really find the words that truly express howimpressive it truly is .THANK YOU for paying tribute to the Greatest Musical Genius of our time, JOHNNY CASH, THE MAN IN BLACK. There'll never be another.
May 1st 2010
BILLYGUITAR
I love the Johnny Cash Project, it is a great tribute to a legend, some of the submissions are astounding. I have watched it over and over, and find great new things each time. Thanks for putting it to work!!!!
May 1st 2010
Joel Eagle
%20AND%201=1
August 30th 2010
anonymous
%20AND%201=2
August 30th 2010
anonymous
AND 1=1/*
August 30th 2010
anonymous
AND 1=2/*
August 30th 2010
anonymous
' AND '1'='1
August 30th 2010
anonymous
' AND '1'='2
August 30th 2010
anonymous
' AND 1=1/*
August 30th 2010
anonymous
' AND 1=2/*
August 30th 2010
anonymous
Have your say!
Some of the projects that I worked on.
Some of the HTML5 and Actionscript experiments I've done.
Is your file format written out in the same order it was drawn in - so essentially you can play back the drawing in timelapse by just drawing each block (stroke type/position/color)? Very neat.