I was fortunate enough to be among the participants at HackMTL on Saturday; an event where a large group of people came together (alone, small teams, and an ensemble cast) to build things using a collection of APIs.

I worked alone d: But I did work on a somewhat unique project!

When I read about the APIs that were going to be available during the event, the piximilar colour search was the API that looked most compelling to me. Rather, having the kind of data that the colour API provides was much more compelling than the other APIs.

The general shape of the thing I wanted to build, was something where a collection of computers would talk to each other in such a way that they could collectively show a colour gradient. My initial intention, was for a neighbouring computer to modify your own colour to be more like itself; however, I had an argument with colour theory and time; so, instead, when a neighbouring computer gives you a colour, that colour becomes the edge of the gradient on that side of your screen instead (:

Essentially, each node in the network has their colour. When you do something, like change your name or your colour, everyone in the network is notified, and has the opportunity to add you to their left, or to their right. If you have added someone to your left and/or right, when you choose a new colour, the person on your left and right will have their mosaic updated with your new colour being the new colour to the left or right.

When you’ve got one person pushing colours to you, you’ll see a colour gradient from your colour to their colour. But if you’ve got people pushing colours on both sides, you’ll see a gradient from the left colour to your colour to the right colour. If you’ve got multiple people pushing colours on one side, the most recent one wins (:

Technically, the client is HTML/javascript/jQuery + jQuery plugins for manipulating HSV colours and growl notifications. The client polls the server each second to see if there are any messages for the current user. Some messages (“Someone is here!”, “Someone is now called Something Else!”) are straight plain text; with remaining messages being delimited_strings_with_useful_information_for_the_client (Telling a client to use a new colour on the right or left; or telling them about a possible new neighbour).

The main image-display area is just a collection of div tags, with appropriate classes for accessing any given cell based on its row and column. Changing an image involved changing the background of one of these div elements.

The images, came from Piximilar, which is an image/colour based search service. I pulled together a simple proxy to route same-domain queries from AJAX requests in the client to the appropriate API calls.

The server is a sketchy-as-hell, simplest-thing-that-could-possibly-work PHP/MySQL thing. I expect that it will stop working in a useful fashion soon, since it’s currently sending around far more data than it needs to, or should (:

The code lives on at https://github.com/hristine/coalesce if you want to peer at how I spent my time, and how it looks underneath (: The client can be accessed at http://www.neato.co.nz/Coalesce/Client; with the caveat that I’m not sure how long the images will be available (and that I’m not sure if an excess of people will cause it to have a bit of a sad <: )

So that's what I spent five hours doing on Saturday. Do you want to see a movie? Of course you want to see a movie!

Coalesce from _hristine on Vimeo.