Here it's a project I made over the past weekend. I warn you, it's kinda weird. (Chrome 4+, Safari 5+, Firefox 4+ only)



You'll find some more iterations on my twitpic.

Now, lets give some context...

Nerd talk

Over the past few weeks I've seen people over twitter talking about this node.js thing. Because I've been quite into Javascript this year last week Jaakko was asking if I had played with node.js yet. I still didn't know what it was but he was kind enough to explain.

So node.js is like Apache but super optimised and lightweight, the coolest part is that you code your server in Javascript. Besides a small problem I had to deal with it was really easy to compile and install on my Ubuntu system.

Then there was this other hype thing, and that's websockets which basically is an open connection between the client and the server. You can send data to the server via websocket without having to send additional headers for each request.

So Jaakko persuaded me to try doing a node.js + websockets + harmony experiment. I was going to spend the weekend doing the WebGL renderer for three.js (which I did yesterday), and my mind was in another place, but somehow he convinced me ("fucking do it now" may have been the key ;D).

Ok, there are a bunch of node.js libraries to handle websockets. At first I was using socket.io but it seemed to use a lot of cpu. After a looking at the code a bit we find out that they JSON all the data that gets sent all the time. That can be useful but in this case it was quite a bit of overhead (and I think they're working to fix that). So I ended up using miksago's node-websocket-server which broadcasts the data to all the connected users as it got sent.

At this point is when you just need to sit down and get the thing working. Once it was working locally I got a slice in slicehost and in a matter of minutes the experiment was live. Considering that it costs $20 for 150gb of BW and that I received €60 from flattr last month I though it was worth spending that money on this project. (EDIT: At this rate I suspect I'll end up spending the full €60 on this...)

The first version of the code was pretty much brute force, every user was sending their X,Y position every time they moved their mouse. Yes, that's *a lot* of data per second. There has been 50gb of data transfered in just 4 days :P However, yesterday night I finally got a bit of time and improved a bit the data that gets transferred, and not only it consumes less bandwidth, the server's CPU is much happier (btw, thanks sole for the top tip :D).

Monitoring interactions

Leaving the technicalities aside, this experiment is very different from everything I've done until now. I've never seen how the people interact with my experiments. The feedback I get from them are emails, comments on the blog or tweets. Which basically reduces to a couple of sentences defining how the experience was. Which is good, but it's impossible to get a clear impression of the experience of the user.

With this one, I can see the people interacting. I can see people experimenting and writing scripts and doing unexpected things with the system (which were fun, but please, don't). I was even able to see people trying XSS exploits in realtime.

Considering how easy it was to put this together I won't be surprised if in a year or two, most of the websites use websockets to monitor how exactly their users navigate the site and improve the UX in realtime. And this is just an exmaple, imagine the possibilities!

Human behaviour

As expected, people like to draw male reproduction organs all over the place, and an annoying one was people scribbling on top of nice drawings. It was so annoying that I even had to tweak the brush algorithm to discourage such actions. The faster you move the cursor the less opacity the pencil has. Stupid solutions for stupid problems.

However, when humans want to collaborate the experiment becomes super fun. If you manage to get in a time that there isn't much people (rooms next?) and there is a collaborative person it can be great. For instance, the screenshot at the beginning of this post, I did some of the drawings on it in collaboration with a stranger, First I did a square with eyes and mouth, then he did another one on the site as if they were two squares that were about to collide and then he started doing the animal bits on the new one which I also followed by doing a joke to a classic internet image. It's also great when 4/5 users get organised and draw something together. 3-in-a-row games are also great :D

Last but not least, it's amazing to see, not only how one user interacts with the tool, but how they interact with the other people. That creates many games, they even create their own social rules for the place. And if that wasn't enough, I find it amazing to see how the cursors behave like "humans". If you put your cursor on top of another cursor, that other cursor is likely to get away. Like when someone you don't know get too close to you. The most interesting case was "Talentina", which I suspect is a little girl. She seemed happy and was drawing cute things like a giraffes and so on, but then someone will arrive and draw a penis on it. She would move the cursor away, like looking from the distance, and move away like in a slow/sad pace...

And lets not forget the fact that the history doesn't get saved, if you refresh you'll get a blank canvas. That's also a very strange behaviour to get used to, but people seem to be turning it into a feature :D

Unexpectedly fascinating.

EDIT: Running MacOS? Need a new screensaver? Cédric Raud has done something for you.

http://hxt.fr/vrac/Multiuser%20Sketchpad.screensaver.1.1.zip

Also... from "ops" in the comments, a recording of a session at 4000x :O