*blog... kind of... *rss 



Multiuser Sketchpad
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

91 comments

Can you add a penis stamp tool? Would save me a lot of time.
This is an awesome little toy - I'd love to work with these tools myself, I just need to find the time between Mario Galaxy playing!

It was good to see you on there too... though I noticed a few people changed their cursor name to Mr. doob after you did as well ;-)
Oh man. That's some great fun! Excellent work as always. :)
Phillip: Haha, yeah, it's now hard to prove it's me :D Ah... Mario Galaxy, I wish I had time... :(
Thanks for the (lengthy) post. Lots of great information. I need to start playing with these socket things soon!

I've experimented with multi-user interactive pieces before too (I have a webcam experiment where people can record a 3 second clip of themselves onto a wall of videos) and people unfortunately end up recording videos of their genitals and wobbly bits and generally being obnoxious and rude. It's a difficult, almost impossible thing to moderate. In your sketchpad you could try to track if people draw a rude shape (two bulges and a long bulge!) but people are nothing if tenacious and will try to find ways round these restrictions. I've yet to see a clever way of getting around these problems - allowing people to freely interact but stopping them from being utter idiots. And all it takes is one or two to spoilt it for the rest of us!

We need color's ;) I can't color in my FF logo ;(
Like you said, Socket.IO will soon drop the dependency on JSON encoder and decoder =]
"It's a difficult, almost impossible thing to moderate."

One possible solution is to allow users to flag other users for banning. If you get 2 or more flags you are booted. Probably not worth the effort in this case, but may help in some cases. Or pay someone minimum wage to sit and watch the app all day.
It is a really fantastic thing you have made here mr. doob

Have you thought about spinning it off into a website of it's own. I'm sure you could make a few bucks off it (if you are interested in that kind of thing). Find a pen making sponsor (Stabilo?) and you're sorted. A rival to Facebook!
mo
Firstly, superb work! So fascinating to watch the mayhem, then refresh once it gets too much.

Took some grabs of an illustrator I know sketching a gorilla, watch how it unfolds (2.9mb): http://img691.imageshack.us/img691/7766/jbsketchpad.gif

Of course, within seconds the smut was added. Interestingly people were helping him shade it. Superb.

I'll grab his next rendition later on today.
Are you planning on sharing the server side implementation of this? It would be an amazing tool to fully opensource and make it easy to re-distribute so other communities could have their own "communal whiteboards".

Amazing project doob... you did it again! :)
Thanks for the nice feedback everyone!

@paul: I'm not too concerned about the genitalia. I didn't expected people doing master pieces there. Precisely because the lack of quality it's not a problem, unless someone manages to draw a super realistic penis (unlikely...)

@xui: The server side code is pretty much this:
http://github.com/miksago/node-websocket-server/blob/master/examples/echo-server.js
Ahh I'll give it a try doob, but I still think making a really simple tutorial and even a zip file to distribute would really help out others in replicating your success... I'd be willing to help with this project as I think its a very powerful tool (multi-user whiteboard) ... it has been possible for years now however never so accessible (aka flash with FMS is a bit difficult). Could you explain your server a bit more? its just a Windows Machine running Node.js?
Its not working for me. I can only draw & see my drawings. I am using Google Chrome. What the problem is?
@Manu Gill: The server might be down (perhaps they ran out of bandwidth or something?). It worked before just fine (I'm using Chrome too). Hopefully they'll manage to fix the issue. :)
Doesn't work for me :(
Fixed. At least until the server suddenly hangs again for no apparent reason... :S
it's down again for me.
It dies from time to time. But node.js doesn't crash, somehow it just stops sending/receiving. Maybe it's node-websocket-server?
This is so like the school desks I remember from high school...only in a compressed timeframe!
You might want to check this out:

http://vimeo.com/1572082

I did it a couple of years ago, the purpose here was to turn a web collaboration tool (aka project management tool) into a stateful one by using push/fullduplex-ajax/comet/websockets/whatever to achieve exactly that. Did have a sketch tool too, but not so nice.. :P

Keep up with the awesome work !! ;)
Safari broke on OS X. Chrome still works though. With safari it looks like everything is fine, but nothing is being sent. I.e. I can have both browsers open and drawing in Safari sends nothing but drawing in Chrome shows the drawing in both.
Interesting. No idea why is that... :/
colorillo.com has been up-n-running for quite a while -- it's a site based around a similar canvas collaborative drawing app. Look there to see how the site features support user self-organization, toward evading the 'antisocial' or malicious users. In a nutshell: users can login and create a new private instance (or, as a registered user, load a workpiece form a previous session and resume editing it) or simply 'draw on the public sidewalk' (my label). While drawing in the public space, any user can click to invite select other users to follow him to a new, private, instance -- forked from the current drawing, able to be rolled back prior to the malicious user's brush strokes -- leaving behind the uninvited nuisance user(s). The nuisance just sees that *poof* the other users are no longer present in the public space.

Shape detection to prevent users from drawing penises? C'mon, ATTEMPTING to build censorship into the app is a losing proposition.

So, thanks for describing your behind-the-scenes adventure in building this demo... but, so far, the result is sadly lacking in comparison with colorillo.
Hey. I just gotta say it. GREAT JOB. This thing is amazing! Of course the anti-social jerks ruin it most of the time. But when I log in with enough cooperative and constructive people it´s AMAZING.
Putting a chat box somewhere (probably the bottom, like chat roulette) would help comunication. Writing usually don'st work because people (usually the ones drawing penises) will ruin and transform letters to ruin.
It´s funny (tragic) how the internet shows how people tend to be destructive and not constructive.
Glad you like it! :) Yeah, I think I'll put a chat. Maybe on the side makes more sense (as text goes up).

And also a simple room system. But for the main room, I think we'll just need to learn how to coexist with that kind of people...

Will work on it over the weekend :)
All I see is a blank white screen that I can draw on. There's no other users drawing and seemingly no way to add them. Am I missing something?
If you are not using Chrome 4+, Safari 5+ or Firefox 4+ you missed the first paragraph of the blog post.
I don't know anything about programming but I do like to doodle and this thing is really great! thanks for putting this up for us to use. I like the idea of a simple room system and chat. When "doodlenow.com" was alive, the screen would automatically refresh every 30 minutes so everyone would be on the same page. Just a thought for you:)

I LOVE this site! Thanks!
It would be cool if you logged all drawing events and then new users could fast forward a timelapse of everything that went on since the project started.
Guess I should clarify, you specify the age of the strokes you want to see, ie, last 15-30 minutes and you can adjust it, rewind/fastforward in time etc.
I though about that, but I think it's way too much data and the server is already having some issues. I may give it a try, but I think I should focus on the interaction and performance by now :)
Would be great if this worked on iPad. I use Harmony in coffee shops often and people ask "What app is that? It's so cool!" Then they're surprised its a web app.

Definitely needs private rooms. Could become a real tool for collaboration then.

Another great MrDoob project :-)
Don't complain about penises, calling people "idiots" and "smut." If you stop people from drawing what they want, then who are you helping? If you don't like it then maybe something is wrong with you.
great plugin!
What about time filtering or user blocking?

You can add every point an user tag.
That will let users block others and make all their drawings (old and new) invisible to them. A good solution for "vandals" and Corrupters.

Adding time stamp to every points will give users the option to see only drawing that was made in a certain time range.
This will give a view of the changes made over time.
Honestly, I don't think I'll code a single line for filtering/blocking.
in youtube:
http://bit.ly/9D7XgL
Amazing! :D
Worked once and was teh best. No it won't work and I'm sad.
Can you make something like Multiuser Harmony?
awesome, I would love to see it more developed, I like this kind of collaborative drawings. Maybe taking away anonymity would help with the inherent penis problem.
Just a thought or two about moderation... I think if there has to be a mechanism, it needs to be on the user side. It doesn't have to be any more complicated than that. There are a couple of ways to achieve this I can think of:

1. You could try making each user and their strokes togglable. You can achieve this easily by rendering strokes of each user on separate layers (z-index trick) and then by manipulating their visibility status.

2. Alternatively you could try to come up with concept of rooms (see colorillo above for details).

3. Add reputation (positive/negative votes per user) and filter shown strokes based on that (the user should be able to define the limit).
so aweseom!

http://flic.kr/p/8iCcsu
highly addictive, this one..
just wondering (well, repeating my realtime question) if there is a possibility of having a sort of gallery of results. some things here were pretty darn nice, and the collaborative part made it all the more fun..
a new session recorded:
http://bit.ly/9q2RqD
check it out
Ricardo -

perhaps someone has already turned you on to this, but you should know someone has made an iphone app and is selling it for $.99 based on your Harmony experiment.

Shouldn't YOU be getting that money!?! I think the app's called Harmonious or something - just fyi.

btw - you kick ass.
Yeah :S
http://mrdoob.com/blog/post/696
hello, very funny, but i tryed to save 2 times the sketches, i failed twice, but i enjoyed to draw with the other one
Thanks for brining it back mr.doob!!!!!!

Your js skills are super pro!

Have you considered websense?
the scroll function lets me move but i can only draw on the original patch of screen.

otherwise i love it. amazing site doob

It would be great if the cursor changes appearance when [space] is down, to prevent moving error (when the SpaceKeyDown is not considered, eg : lag).
This is a great project, that can be wonderfull when spoilers are off !
I made a small adjustment to the Sketchpad.

Now you can have HUGE brush strokes for your drawings...

This adjustment enables users to see BIGGER Line strokes on the sketchpad. Link:

bit.ly/9JdIvf
This is awesome. <3
Not at all dubious, quite sketchy version of the electronic interactive epistolary novel. Totally charmed by it all. Spondulaks headed your way. Mil grazie
/m
mr.doob,
I really like your harmony R6 tool and find it helpful but i'm having problems. it seems that whenever I go to the url given to me when i save my work, I can't access it anymore.
help..
thankss
great fun, thanks
this could also be a much more immersive way to chat.
Hello there Mr.Doob.

So I've become quite fascinated with the sketchpad's chat feature, and have constructed quite a decent new chat off of you socket. Along with this, a few more commands, and some... scripts of interest... stop by sometime, I'm on quite a bit working on some random shit. Just ask for dev, I'll be there I'm sure ;)

Best Regards,
Ðëvëløpër
Hi, I´m doing something similar (very basic stuff) just for experimenting with multiuser binary server and Android. I would like to know how do you handle data (x,y) on mouse move. I mean, "when" or how do you send data to server. The easy way I´m trying here is sending data whenever mouse move events get fired. But like you say in this post, that´s a lot of data. I was thinking about checking distance between to points before sending data, for example: only send if distance between last and current coordinate is > minimun distance. But i´m afraid of user experience getting worse. What do you think about it? Any other techniques?

Btw, this app is amazing, not just ´cause of the drawing stuff but multi-user´s.
Ah I like it!
I'm making a similar project, a collaborative drawing page. There you can set colors and I will add other pencils/brushes: http://jazzjackrabbit.net/DJ/Collabdraw/
Here is an image I drew there: http://oi52.tinypic.com/ir03gx.jpg
Happy coding!
djazz
xleon: Feel free to take a look at the source code (right click -> view source). All the tricks I'm using are right there.

djazz: Nice! I was also thinking of implementing a picture navigator too :D
mrdoob: ok, correct me if i´m wrong. You send a command stack to server everty 100 miliseconds. The amount of data is bigger on each message, but less messages in total. Does it improve the network trafic? I mean: more data vs more messages with less data
To be honest, I don't remember exactly the reasoning behind it. But I think it helped to avoid getting the server hammered.
Hey, I injected a function into your sketchpad that did away with the brush opacity on my browser, and it revealed an interesting problem... open the url for your sketchpad: http://mrdoob.com/projects/multiuserpad/ and copy/paste this into the address bar to see what I mean:

Javascript: function draw(x1, y1, x2, y2, color) {var dx = x2 - x1, dy = y2 - y1;context.strokeStyle = (color == 0) ? 'rgba(0, 0, 0, 1)' : 'rgba(255, 255, 255, 1)'; context.beginPath(); context.moveTo(x1, y1); context.lineTo(x2, y2); context.closePath(); context.stroke();}

Any idea why those stray lines appear? Your brush opacity mod solves it, but I'd still like to know why it happens.
Do you have a screenshot of that?
Yeah, here: http://mlmhitlist.com/download.png

I saved it using the .png function of the sketchpad
Mr.Doob, I'd like to request you reset the number of visitors on the Multiuser Sketchpad. It's begining to lag due to the size of the html document (from the users). Besides this, the user id's have reached 18k... Would be just great and really cut down the lag of the chat. Thanks.
Totally! I do that from time to time, at least until I find the time to re-code the whole thing properly.

I'll do it in a few hours as soon as I get back home.
Thanks, I must admit that at least 11k of the visitor count was my fault, me and my forges ;)
Also, I've completely re-coded the sketchpad myself, I don't dare use your site's version (no offense, mine's just more efficient ^_^).
Take a look: http://i55.tinypic.com/13zbiic.png. Interested in helping me out a bit on this?
Sketching and playing around together on a sketch is fantastic. The collaborative ability too, is amazing.
I'm just wondering why all this talent doesn't go towards making sites that people can use beyond the doodling.
Example: Combination of doodling, scrapbooking and actually putting something into production.
Think sketch pad, on top of Polyvore, to design a garment for yourself and see if it can be made by a garment maker.
People like me, can sketch, and make garments. You guys know how to connect with your programming.
hey, mr.doob. does not work multiuser. not seen by other artists
Fixed! :)
http://tinypic.com/r/xl9gft/7

:)
:O
http://mrdoob.com/projects/multiuserpad/ this doesn't works for me in Ubuntu 10.10.
I can only chat and can't draw anything.
btw browser is: Chromium 11.0.681.0 (75700)
http://mrdoob.com/projects/multiuserpad/ this doesn't works for me in Ubuntu 10.10.
I can only chat and can't draw anything.
btw browser is: Chromium 11.0.681.0 (75700)
this is awesome thing ive ever seen. is it possible to share the source for us on github?
Hi, Mr. Doob. I like this project.
Sorry for bad English.

Big difference in Safari and Chrome!
Safari generating about 30-40 "mousemove" events in 1/10 sec.
Chrome.. up to 150 in 1/10 sec!!
In Chrome we see more smooth lines when drawing, but Safari generating much less commands to send to SketchpadServer.

And i think your websocket server limitting count of command. That's mean, when we drawing fast in Chrome, other users dont see half or more our lines...
Oh... i made a mistake.. both browsers firing up to 500 "mousemove" events... but Safari drawing ( "context.stroke()" ) on canvas more slowly than Chrome.

This true on Windows.
can some people just spoiling the art by drawing meaningless strokes across the board
Hi, I have this project:

http://galeriavirtual.org/mus/mus_kybernetes_En.pdf

...but I am not a programmer.

Please, Mr. Doob, can we talk?

Thank you and congratulations for your exciting work!

roc.pares[no spam]upf.edu

Regarding your comment:
"However, yesterday night I finally got a
bit of time and improved a bit the data
that gets transferred".

What did you changed to limit the data transfered ?
Can you refer me to the technique you used ?

Regards.
again not work multiuser? :)
can someone explain how to chat on the sketchpad thing???
Sooooooooooooo, the multi-use part of it is over, I assume.

as in, you have to go solo.
unless I am missing something?
it doesnt work for me. i get a "Disconnected :/" error. I can draw by myself however - 5/11/11
Hey, so, I was having loads of fun drawing over genitals with cool things like dragons, Homer Simpson, elephants and the such, ya know making the interwebz safe for the little kiddies again, when all of a sudden i was disconnected!! Yes, disconnected. So...yeah now all there is is a blank page with no people. I can draw by myself, but that's no fun!! any one have any idea whats wrong?
awesomee