Here are a few photos of pictures that were drawn:

Quite a few interesting aspects to it:

1. the wall goes around a corner
2. it is embedded into the logo of the conference
3. the LEDs are aligned more densely this time
4. a special version of Colorillo is being used that is capable of pixel drawing

The exhibition is worth a look, too. Lots of techniques for enabling colorful light constructions. Also check out the gallery I have attached to this post.

The wall is on display until October 31, 2010 and is turned on at dusk. The exhibition runs daily from 10am to 6pm, on Thursdays until 9pm. Come by and draw! (you can find the URL for drawing right next to the wall)

Thank you to Oliver Schürer, Wolfgang Heigerth and Manfred Wuits (and many others) who were involved in the project!

Let me show you how I deal with such people:

First, I’m just drawing along…

… then, a stupid guy comes along and overdraws me

Now I need to find out, who this was. In this demo case it’s easy, but when there are quite a few people in the room this might get difficult. Click on the pen icon of the user: the last line of this guy will be highlighted on the drawing.

Next, I rename the user, so that I can identify him or her later on. This renaming just affects how this user is displayed to me. This step is optional, of course.

Finally, I ignore the user by clicking on “ignore”. Now any future lines drawn by this user will be ignored (and just for you). Unfortunately the lines that already have been drawn, remain.

This user might continue to overdraw things, but that I don’t see anymore.

Currently, this ignore feature only applies to you. The user is not automatically ignored for other people yet. Also I am considering to remove the lines after the fact for this user, but I am not yet sure if it’s necessary. You can tell me otherwise by feedback or in the comments

Always remember that you can use the playback feature to undo the lines and then go off to a private room and invite people to come along.

Thank you for drawing! Now we aim for 20 million lines

I have also added a (what I consider pretty useful) feature for people who use the Wacom plugin:

You can now change what the pen pressure affects. Previously it automatically applied to the thickness of the pen. Now you can disable the pen pressure temporarily or change it to affect opacity. There is a keyboard shortcut for it too, just press the letter p to cycle through it. Thanks to Dionix and Anonymous for the idea!

Please tell me if it misbehaves, I’m not a great expert in drawing with a tablet, so I rely on your feedback

First of all, there is a new chat window, as you can see in the screenshot on the right. You can access it through the top right menu (see the animation). The speech bubbles remain in place, so you can choose what to use.

It’s much more comfortable typing there, because also the cursor focus remains in the text field below when you press enter.

The lack of usernames (or rather Colorillo not requiring to register) could potentially create the problem that you can’t be sure who was saying what, especially if two people come from the same city. To solve this, you can rename your chat partners (just for yourself, just like the already existing renaming function), but just clicking on a name in the chat (also demonstrated in the animation).

Last but not least: when Colorillo is in a background tab, and someone writes something in the chat, you can now see this in the title bar, like this:

Happy chatting!

I’m working on a short video, but for now here are some photos. Thanks for Georg Semanek and Chris Chiu for taking them!

Colorillo is currently powering a collaborative drawing event at the Ärzte ohne Grenzen (Doctors without borders) beach, a temporary beach created for the duration of the AIDS conference 2010 which is being held in Vienna.

At Adria Wien on the Donaukanal in Vienna, you will find an LED wall on which you can draw on using Colorillo. Take your iPhone or Android phone with you, enter the web address you can find there, and start drawing. Of course it also works on Laptops, the iPad, and iPod Touch.

It’s a neat experience to see what you draw appear on a big screen, even more so if you’re drawing with someone else. The resolution of the screen is limited, so sometimes you end up just drawing big blobs of colors, but that’s even more fun. If you happen to be in Vienna, pay a visit. It’s fun!

On Thursday, July 22, 2010, John Megill of the FM4 radio station will be DJ-ing and during that there will be a focus on drawing on the wall. Drawing will start at dusk, around 8:30 pm.

There is also a Facebook event which you can attend. During the Happy hour, a percentage of the price of each drink will be donated to Doctors without borders (MSF).

Thanks to Oliver and Eva for making this possible. Happy drawing!

Before you can do so, you need to install a plugin from Wacom. As soon as this is done, Colorillo will automatically recognize your tablet and you can simply vary the pen size by pressing harder while drawing. There is also a new FAQ entry about this.

This allows to draw lines with variable width throughout the line, like in the picture in this post. If your pen has a second pressure sensitive point at the other end of the pen, this eraser works too (it erases by drawing in white).

One caveat: the plugin by Wacom doesn’t seem to work in Firefox 3.6 or Chrome, so you may need to resort to an earlier version of Firefox or Safari. Let’s hope that Wacom fixes this soon.

I am no expert with pressure-sensitive drawing on tablets, so please tell me if it all behaves as expected. Happy drawing!

Also I have created a Colorillo Facebook App, but, honestly, if you know Colorillo already, you want to stay here. The Facebook app is only a teaser of what Colorillo offers.

In this post I want to talk about something else: the help feature.

Even though I consider Colorillo relatively self-explanatory, I have added something that should help new users: Help bubbles. Think of Colorillo as a comic strip where each feature tells you what it does.

I have premiered this feature with the Facebook app and it has been quite satisfactory, so it is now also available on the real Colorillo.

All new users are presented with these bubbles straight away. If you want to take a peek, there is a new, red “help” link at the top right of the screen.

If you find that something else needs more explanation, please do tell.

It is a somewhat stripped down version of Colorillo as there are no advanced colors. The screen estate for Facebook apps is limited, so I had to do away with the world map and move the user list below the drawing.

One of the benefits of the Facebook app is that you see your friends on the drawing by name , so no more guessing if this user “from Vienna” really is your friend. For chatting while drawing I encourage you to use the built-in Facebook chat.

To invite friends to your drawing, you can post something to your wall through a link on the top right. It’s a bit clumsy compared to Colorillo because choosing specific friends to invite must be done through the lock button within the Facebook message screen. Unfortunately Facebook doesn’t provide customization in this area.

Still you can use the Facebook app to lure friends into drawing on Colorillo. For quick sketching the Facebook app is well worth checking out.

Optional User Registration

Topics come together with user registration. You will only need to register if you want to take part in drawing on topics, “normal” Colorillo remains the same: you don’t need a username for that.

I am not a big fan of having to sign up on a web page and Colorillo is very usable without it. But it happens that someone comes along and draws over the homepage where just something nice was being created. I don’t want this to happen for people who have found each other to draw something specific.

When you are registered you will show up with your username in the user list.

There are also two bonus features for registered users: statistics and view the drawings you participated in or created.

Sidebar

There are some additions to the side bar: on the top right there is a drop down that lets you switch from the user list to something called “drawing info & options”.

I have picked a screenshot that shows all available boxes on this section. Most likely you won’t encounter all of them at once.

1. When the drawing was created.
2. Statistics of the drawing. This shows the number of drawers and lines that were used to get to this drawing. This behaves a bit differently on the homepage, there it shows a live statistic of what has happened since you arrived.
3. Whether the drawing belongs to a topic (see below for more).
4. When you are the one who created the drawing, you can now lock the drawing. If you feel that the drawing is finished, you can lock it so that nobody can add any lines to it.
5. There is also a voting box so that you can vote for or against a drawing right then and there.
6. Creation history: Shows if the drawing was based on another drawing, and/or other drawings are based on this drawing.

Topics

I have to say up front that the whole section still is a little rough, but over time it will become better.

Apart from the idea that drawings can belong to a topic, each topic has something I call a drawing room. When you are registered, you can simply go to this picture and draw. Everyone else can watch.

There are already a few topics like animals, landscapes, and portraits, but you can create any topic you want.

Every drawing that is created from a drawing room or from a drawing already assigned to the topic gets assigned to the topic again. Also I can re-assign existing drawings to a topic.

So this leaves me to say: Try it out, I hope you like it and create even more amazing drawings together.

Now you can also export the playback as a video and download it to your PC. There are now several formats in which you can download picture (You can find the links as depicted on the screenshot on the left side of an image on Colorillo):

1. PNG (Portable Network Graphics): A pixel based format that is commonly used in graphics processing.
2. SVG (Scalable Vector Graphics): In this format each line is stored separately so that you can resize the picture to any size you want.
3. MP4 (Motion Picture (Experts Group, Version) 4): This is the format of the new video feature (actually the h.264 codec is being used). While the download will start with the other formats instantly, clicking this link will open a window that will ask you a few further questions.


You can set an output format (the iPod format is a little scaled down but plays on an iPhone or iPod Touch and probably on the future iPad), and–what I find most interesting–change the duration of the video you will download. This means you can choose how fast the picture should be drawn.

Here is an example of such an exported video (the fanstastic picture by Uram and Jackie Lee):

Happy downloading

]]> http://colorillo.com/blog/2010/03/video-export/feed/ 0 http://colorillo.com/blog/2010/03/playback-refinements/ http://colorillo.com/blog/2010/03/playback-refinements/#comments Thu, 04 Mar 2010 22:01:43 +0000 alex http://colorillo.com/blog/?p=252 Today I can report about some refinements that I have made to the new playback feature. If you haven’t tried it yet, you really have to. It’s really amazing to be able to watch again how a beautiful picture came into being.

New Picture through Playback

So, for the first improvement: this can be used as an undo function!

When you click the play button, playback mode is activated (which is indicated with a special border around the image). While you are in playback mode, the “new picture” button receives another option (see the screen shot).

This can be useful in several situations:

1. When someone comes along and draws over your picture. Now not as bad anymore: just go into playback mode, go back to before the guy did what he did, and then click the new picture button. You can also invite people to come along and leave that guy behind.
2. When you encounter something nice within the playback. Sometimes it’s worth keeping a picture that has been overdrawn again. Before, it was buried in the playback, but now you can rescue it by promoting it to a new picture. Cool!
3. When you really need to undo something. Ok, Colorillo lacks an undo function, but it’s for a good reason: You can’t take back what already has been sent out to all other users of the picture. So, you liked the nose you drew before much better than the current one? Go back with playback and continue with the old one.

More information

The playback section gained a little more height: There’s now a second line being displayed when you start playback:

This now displays when the drawing was done, how many people and lines were involved and how long it took them. I think it’s pretty interesting.

Note: for older pictures there might not be all data available for this, so it might say that x-thousand lines were drawn in one second. Hard to believe and probably not true indeed, but I didn’t store that information in the beginnings of Colorillo…

Load More Playback Data

I have an algorithm in place that analyzes the picture to see at what point everything was overdrawn, so that point could be considered as a starting point for the current picture (actually that’s often the reason why creating a new picture as a “copy” of the old one takes a few seconds — actually it’s not a copy, it just references the line where the new picture was created).

This is also used for playback. It will load so much data until it arrives at a point where everything before has been overdrawn since. Now, I have lifted this frontier: With the Load more playback data link, Colorillo will load the data to the overdrawing before that. Maybe there is a great picture hidden in there which, as you now know, you can now promote to a new picture.

Keyboard Shortcuts for Playback

If you want to undo something or create a new picture just before someone came in and drew something bad, it is very important that you find exactly the right spot where to create your new picture. I have made this a lot easier with keyboard shortcuts:

← (left arrow key) to step a frame/line back and → (right arrow key) to step a frame forward. Use the Shift key to step 100 frames or lines.

Space can be used to pause or resume playing.

I think these changes greatly improve the playback functionality, and there’s more coming. I’m working on making it possible to download the playback as a video and/or export it to YouTube. There are still a few technical hurdles to take on this, but I’m optimistic.

PS: Just a few moments ago we had our 30,000th picture drawn. What a thrill!

]]> http://colorillo.com/blog/2010/03/playback-refinements/feed/ 0 http://colorillo.com/blog/2010/02/playback/ http://colorillo.com/blog/2010/02/playback/#comments Thu, 25 Feb 2010 10:31:58 +0000 alex http://colorillo.com/blog/?p=231 I am very excited about today’s new feature: Playback. This means that you can now take any picture on Colorillo and watch how it was created!




Underneath a picture there are now playback controls (see the screenshot). You can click the play button and after the playback data has been loaded from the server you will see how the picture came to life.

The icon depicting the tortoise allows you to change the speed of the playback. You can use the slider to move within the time, e.g. to watch a specific section of the drawing again. When you want to continue to draw (given you are not in read only mode, click the X to close the playback).

When you are in the gallery you need to click the picture again in the preview mode to look at the picture under its own URL in readonly mode. Then the controls will appear underneath.

Here are some very nice pictures to try out:

I can’t stop watching the playbacks of the greatest pictures on Colorillo. I hope it will be similar for you

]]> http://colorillo.com/blog/2010/02/playback/feed/ 0 http://colorillo.com/blog/2010/02/rename-other-users-and-more/ http://colorillo.com/blog/2010/02/rename-other-users-and-more/#comments Thu, 11 Feb 2010 09:27:29 +0000 alex http://colorillo.com/blog/?p=199 In what has almost become a regular weekly update I can present you more cool new features for Colorillo.

If you are a regular user on Colorillo, you might have found people that you liked drawing with. Unfortunately, this was often just a one-time experience. Next time you would not know if someone’s there that you had drawn with before.

Maybe you have exchanged information about yourselves through the chat feature, but this was rather unpractical, even more so as there are no private messages on Colorillo. I have tackled this problem in two steps:

Rename other people

This could be a first step for finding people you like drawing with.

When you identify the drawers (remember the last line feature) you would like to draw with again, just give them a name. Next time you arrive at Colorillo, you can find them again in the user list.

Mind you that the name you give other people will only be visible for yourself. Also you can’t see if other people have given you a name.

Take people with you to a new picture

Most likely you will discover new people on the Colorillo homepage where everyone can draw. Then it might happen that someone comes along and destroys the drawing that you have been creating. Bummer!

But now, you can just pick the people you enjoyed drawing with, and just invite them to come along to a new picture. How this can be done I will show you in the next section.

New process for starting a new drawing

I have revamped the process for creating a new picture. Just as before there are two variants of this:

1. Create a new and empty picture
2. Start a new picture based on the current one

(Actually I frequently use the second option to “store” great pictures for the gallery: I create a new picture based on the current one and then just leave it alone)

There used to be two buttons beside the picture for this: Now I have reduced it to one. When you click it, a window appears with the selection between the two options. And here comes the new and interesting part:

Furthermore you can choose if you would like to invite someone on the current page to come with you. There is a list of people who are currently on this page, alongside with a checkbox beside each one. Use this to select the people you want to invite (now it comes in handy if you have renamed them before)).

Custom brush sizes

There are 4 brush sizes that I have chosen in the beginning to suit your drawing needs. But some people wanted more fine-grained control:

When you are on the advanced colors panel, above the brush sizes there is a new sliding bar. You can use that to modify the size of the pen pixel by pixel. If the mouse is too clumsy for you, you can also use the keyboard shortcuts [ and ] (any people with different keyboards than US have problems with that?).

The slider above the line is used for opacity. I have switched to jQuery UI for the slider and removed the caption showing the percentage of the opacity. For one you can see what it looks like in the color panel just above. Otherwise you can use the keyboard shortcuts 1, … 9, 0 for changing the opacity to a certain level.

I hope you enjoy these new features as much as I do. If you have further ideas for Colorillo, just keep them coming. Thanks!

]]> http://colorillo.com/blog/2010/02/rename-other-users-and-more/feed/ 0 http://colorillo.com/blog/2010/02/picture-gallery/ http://colorillo.com/blog/2010/02/picture-gallery/#comments Tue, 02 Feb 2010 14:59:14 +0000 alex http://colorillo.com/blog/?p=173 There are treasures lying around at Colorillo. They have been created (in part) in cooperation by talented drawers. I don’t want to hide these treasures away but show them to you. I have therefore created a picture gallery where you can look at all pictures that have been created at Colorillo.

On the front page there is a new button on the left side that will lead you to the gallery.

I have integrated voting into the gallery, so that the most beautiful pictures can move to the top, and offensive images (sad for humanity that some people don’t have anything better to do than draw stupid stuff on web pages) can be downvoted in an instance.

You can change the number of images displayed on a page as well as the sort order (top right). When you click an image, you see something like this on the right.

Additional information is being displayed for each image, for example the number of drawers and lines that make up the picture.

For your convenience there are also keyboard shortcuts, such as left and right to walk through the pictures (it will also automatically go to the next page in the background if you have arrived at the last picture). Use up or down to vote.

So when you are not that good at drawing, or the mouse is preventing you from drawing the most beautiful picture, why not just enjoy the gallery? And if you come across a cool picture, please vote it up. Or down, should it be offensive. Thanks!

]]> http://colorillo.com/blog/2010/02/picture-gallery/feed/ 0 http://colorillo.com/blog/2010/01/invite-friends/ http://colorillo.com/blog/2010/01/invite-friends/#comments Mon, 25 Jan 2010 08:39:00 +0000 alex http://colorillo.com/blog/?p=155 Drawing at Colorillo makes more fun when you draw together with other people. And most probably it’s even more fun if those people are your friends! So here comes a new feature that allows you to easily notify your friends to have them draw with you.

I have cleaned up the user interface a little: below the color and brush selector you can now find the new “Invite your friends” button. Click on it, and the dialog on the right will appear.

Currently, only with Twitter and Facebook you can automatically invite your friends. To notify them on other media you need to copy the URL which can be see on the bottom part of the screen.

I have integrated three buttons into the invitation screen which let you choose where you actually want to draw with your friends. This also makes it more explicit that there are private pictures on Colorillo which sometimes gets misunderstood.

Happy drawing with your friends!

]]> http://colorillo.com/blog/2010/01/invite-friends/feed/ 0 http://colorillo.com/blog/2010/01/straight-line-drawing/ http://colorillo.com/blog/2010/01/straight-line-drawing/#comments Tue, 19 Jan 2010 16:14:47 +0000 alex http://colorillo.com/blog/?p=119 Today I’m able to announce a new feature once again. This one isn’t visible from the user interface, though.

Continuing to resemble the most commonly used features of desktop drawing apps, I have added a straight line drawing mode, and it works like this:

Use the Shift key.

That’s it. Actually it’s a little more complex. There are basically two modes operated by the shift key:

1. Hold shift and draw a line: the resulting line will be either vertical or horizontal, depending on the direction you started drawing, and stay in a straight line.
2. Hold shift and just click: this will draw straight lines between your clicks.

I actually like the latter mode better, because it feels more natural to me, but try it out yourself!

]]> http://colorillo.com/blog/2010/01/straight-line-drawing/feed/ 0 http://colorillo.com/blog/2010/01/chat/ http://colorillo.com/blog/2010/01/chat/#comments Sat, 16 Jan 2010 18:43:13 +0000 alex http://colorillo.com/blog/?p=61
Obviously the focus on Colorillo is to enable collaborative drawing. And drawing is what it all is about. So I hesitated to implement this feature, but in the mean while I figure it is well worth it and doesn’t distract from the drawing all too much (maybe also because of the implementation I chose).

So now you can chat on Colorillo. This is not meant to be for telling the story of your life, but for short messages, for example to take people with you to a private room by sharing the address.

The implementation is unlike other chats in that there is no list of recent messages (and therefore no history, though this might change), but rather bubbles appear above the user who said something. That way you don’t need to pick a username just to chat.

So you start a chat by clicking on the little “chat” link right of your user line (in bold type) in the online list. A popup will ask you for your message, then just press enter and done. Everyone else on the same page will see what you wrote.

There are two keyboard shortcuts associated with the chat function: Enter and Esc. Use the Enter key to start a message or to reply to a message, use Escape to hide the message currently being displayed.

]]> http://colorillo.com/blog/2010/01/chat/feed/ 0