Collaborative Drawing
with Colorillo.com

And how to use Hookbox for COMET

Alexander Kirk

Colorillo.com

Hello, I'm Alexander Kirk and I'd like to show you my project, Colorillo.com. I only have 5 minutes for this demo but still I want to not only show you the project but also give you a quick look behind the scenes.

What's Colorillo?

Colorillo is a collaborative drawing app, this means that two people who draw on the same URL on Colorillo will instantly see what the other one draws. On a world map next to the drawing you can see where the people come from and chat with them. All of this uses no Flash but HTML5 with Canvas and Javascript.

What is Hookbox?

So as a quick look behind the scenes: To quickly show the lines to all connected users, Hookbox is used: a web-enabled message queue that uses COMET to notify the users' browsers. This is either done by websockets or long polling, depending on what the browser supports. Also it's easy to integrate. Hookbox does its callbacks through HTTP, so you can use whatever language you want.

Bringing it together

  1. Line is drawn on Colorillo
  2. Line is sent to the server through the JavaScript component of Hookbox
  3. Hookbox does a callback on the server (where permission check, storing to db, etc. is done)
  4. Hookbox sends out messages to all other clients
  5. Line is received on all browsers connected and drawn to screen
So how does this play with Colorillo: So when someone draws something, the line is sent to the server through the javascript component of Hookbox, on the server side Hookbox then notifies the web app (to check permissions, store to db, etc.) and then sends out the message to all connected clients. Their browser then draws the line onto the screen.

Demo

Now let me show you this in action. So on the left I open my browser, and on the right I will open another browser representing my friend drawing with me. I'm now on the Colorillo homepage. It's a little dangerous because everyone can draw here and offensive things do happen. But you can simply draw over it. So, Colorillo follows the concept of rooms: you get a private URL that you can share with your friends so that you can draw without anyone interfering. So I create a new room on this side and send the URL to my friend, so I paste it into the other browser window. Depending on the user's internet connection, of course, the lines appear with very little latency. Colorillo supports drawing with pressure sensitivity on tables which can be used to control the line width or opacity. Another nice feature is playback where you can see how a drawing was created. You can go to the gallery to check out the drawings that have been done before. Actually So let me look at this lady. Colorillo actually is modeled along version control systems: a drawing can be forked from an existing one where actually just a pointer shows the start of the drawing, thus you can create your own version of a certain drawing. So let me click on playback. The drawing is now loaded alongside with playback data. As you can see people were actually drawing other things before that lady was created. I can now also pause the playback and create a new version of the drawing right from that spot and go on drawing from there.

Colorillo - real-time action painting

That was only a small insight into what Colorillo is about. For example it was already used for drawing onto LED walls. Here you can see some further facts about Colorillo. I'd be glad if you'd pay it a visit.