For the #hackmtl hackathon, I decided to do something a bit different. To be honest, something a bit useless. I decided to create a collaborative toy: q.fuz.io. Q is a pixel-art canvas, shared by the everyone on the web.

A visitor to Q is immediately assigned a tile, a 16x16 pixel canvas, which is theirs to fill in. A color palette is available at the top, and you can do anything that you like within the tile. As you work on a tile, the work of everyone else is visible - you can watch as your neighbor tile fills in, as a user works to join his or her tile up to yours.

This was a fun project. Over the course of 24 hours, it went from concept to mostly functional implementation. My main goals for the project were to learn a bit more about raw html canvas development, improve my knowledge of socket.io and web sockets, and deliver a usable, fun little toy.

Q is based on backbone, socket.io, and jquery on the client end (using my node-backbone-socket io boilerplate code project). At the server, I use redis for persisting the canvas, and node.js/express.js as the server.

It's a relatively simple app, with complexity only in the way that it deals with the canvas element. As it turns out, canvas performance is generally awful, and individual pixel manipulation is actually very difficult. I spent easily 80% of my time working to get decent performance out of a zoomable canvas.

Obviously, given that it was a 24 hour hackathon, there are plenty of bugs to be fixed and improvements that could be made. Among them: performance is still awful; the tile selection algorithm is broken, and often selects a tile in the middle of nowhere; once a tile is assigned, it is never rreassigned, even if it never got painted. I may improve these in the next couple weeks, we'll see.

Overall, though, it was a lot of fun, and I was able to accomplish what I wanted to accomplish. I think that next time I'm at a security/chrome-extensions themed hackathon, I may try to pay more attention to the theme, but: still tons of fun.

The code for Q is available on github: github.com/astalwick/q, and the demo site itself is right here: q.fuz.io

Thanks to PasswordBox and Heri for organizing another great hackathon.