Featured illustration: Who’s there by eomsco.

The following are some selected frames I chose from the movie.

This is where you click to trace:

This is a happy cat:

However, when thinking about experience and interaction, overwhelming your subjects with too much input can become a problem, and it is especially hard to design experiences that can be interaction rich and at the same time make sense. The world and our perception are a perfectly balanced system where everything seems coherent and accessible to our senses, at least most of the times, but when it comes to manipulate tools with a specific goal in mind, narrowing interaction down to the minimum gives us the advantages of focus and control. When drawing for example, every single artist in history has used the single point touch of the charcoal, pencil, pen or brush over a flat surface, performing a slightly different gesture, but just as limited, than the one imposed by the mouse. When creating a drawing with the pencil or the mouse, the differences come from the reactions of the material (paper or similar for the pencil, and computer for the mouse), and not from the devices. A mouse can be given the shape of a pencil, and used over a pressure sensitive display, it responds to the drawing gesture just as a pencil would.

Because of this reason, and because the human drawing gesture is a perfect source for random input, we have introduced mouse input into oGFx. There are several different ways to draw in oGFx. The drawing gesture can be mapped from screen coordinates to 3D coordinates in the OpenGL context or 2D coordinates in the Quartz2D context. We started by making the raw screen coordinates available to the python interpreter, so the decision of what to do with them could be taken by the programmer of the drawing experience.

I wrote a few scripts that map the screen coordinates to Quartz2D coordinates, adding some behavior to the strokes, a simple implementation of the Bresenham line algorithm, and a low resolution canvas. I have been working with simple drawing tools for a while, and I found oGFx to be a refreshing platform to experiment with, specially because of the four following reasons: I can change the definitions in a script without having to stop the program (or even stop drawing), I can draw and navigate around a drawing in 3D at the same time, I can apply and remove CoreImage filters on the fly, and I can project the action of drawing over history. Even though all these reasons are some of the important features of oGFx that we have been using from the beginning, they were not combined with hand drawing until recently.

It reminds me of the work of my friend Andrea Di Castro, my computer hero Ken Perlin, and my screenprint mentor Jan Hendrix. Andrea made a GPS based system to record the drawings he has been making with airplanes over the surface of the world, like a trefoil shape the size of Dublin and stuff like that. Ken Perlin has an applet in his collection of online curiosities that lets you zoom as much as you want within a digital drawing and render entire landscapes inside the space between the edges of a line. Hendrix likes to look at a leave as if it was the size of a continent, and makes a map of it accordingly.

Our world feels smaller than the world of our ancestors partially because we can imagine where every single corner on Earth is just by finding it’s position in the globe. How does it feel when we are able to fly over 3 dimensional representations of it, and embed all kinds of content in this representations with any level of precision? I just wonder why there is no social component to the quikmaps application; I can easily see people sharing landmarks, trails, and routes.

Just to get a feel of how this application works I made two map drawings today. It was incredibly easy to manage my maps and embed them in this page, although drawing became a very slow after a few strokes; I’m sure the developers of quikmaps didn’t think somebody would abuse their object model as I did. (Just as a sidenote, Safari 3 doesn’t seem to like quikmaps, it dramatically displaced my drawings by thousands of miles) (As another sidenote, it seems Safari 3 likes quikmaps now).

This is an attack to Mexico City:

And this is a progression of shrinking giants that points to where I used to live in Mexico City, from the size of America to the size of one block.

Superscript from France has created a nice online wallpaper editor and repository. The tiling of the motifs is implemented in the simplest way, repeating them over a square grid. I wish they implemented something like rotations of reflections to create more complex patterns, or even symmetries that are not square, like triangular or hexagonal, but that would complicate things a lot, and sometimes it is better to have something that is somehow limited, instead not having anything at all, other than the idea of something really powerful that was never made. As limited as they might be, the expressive potential of tools like this one is nearly infinite. I also wish they rendered white as transparent so we could have different colored wallpapers just by changing the background color of the body tag, and I wish the drawing interface was more fluid, perhaps a bit more like the one we made for Tiny, that understands strokes rather than clicks.

Superscript’s wallpaper application looks like a natural sibling of the Tiny Icon Factory, and a good resource to decorate the backgrounds of your webpages. This is one of the 888 motifs already available there (you can also make your own of course, and I’m sure by the time you read this there will be at least 900):

I’ve just deployed a simple web application called tinyDoodle. It is a javascript based public canvas where people can draw at the same time from any computer in the same place. When I made it i was thinking on opening a space for people to chat with drawings, or a place when somebody else could come up from nowhere and screw up your drawing. Every stroke made in the canvas is stored as a different object in a database, along with enough information to let me playback any portion of the drawing process at a given time. This idea is half inspired by John’s own oneline, and explores how much easier and interactive can a similar project be if made with current technologies. As with other interactive drawing scripts I have made, tinyDoodle is based on the html canvas tag, and for this reason it is only supported by firefox and safari. Sorry about that.

I also took some time to research over the web and look for other drawing systems that use the natural resuorces on the web to engage users in drawing based social interactions. I was surprised to find a ton, some of them very similar in spirit and implementation to the tinyDoodle canvas and other ones I have been involved with. The following are the ones I chose to describe and display:

Oneline (1997-1999):
By Maeda. A pioneering Java based system, this one is sadly not online anymore, but it is the first one of this kind I’ve known of. John’s website provides detailed information on how it used to work. The illustration shows a collection of drawings displayed over the same surface.

Drawball:
This one is very fun. Drawball is a collective anonymous canvas implemented with flash. It has an interesting interface that zooms in and out the surface of the drawing, and keeps track of the portion you’re looking at by identifying it’s location with a URL. It also features an ink counter that keeps track of the ink you’ve used, and gives you ink if you keep the drawball page open in your browser. It also updates itself continually, so you can see others drawing in your spot while you draw, just like in tinyDoodle. The following illustration shows a sequence where Takashi and I were drawing our corresponding graffiti tags at the same time.

BennetonPlay Flipbook:
The online collaboration model is a total trend these days, and several corporations have started their social network based sites under creative activities like drawing. Benneton’s Flipbook is a very successful example that’s based on providing a tool for making animations, user accounts, and a rating system that lets the most popular animations emerge from the collective pool of little animations. Benneton claims they have 89,761 in there, and some of them are pretty good. Benetton also has a doodle community site, which features drawing canvases where you can chat with your friends using drawings, just like in, um, tinyDoodle. As most other social network applications supported by corporations, both of Benneton’s systems are user centric, and request visitors to create an account before they can use them.

Openstudio:
By the PLW. In Openstudio, the drawing tool and the social network are put together with a simple open economy. Unlike different social networks where you get to choose who are your friends, Openstudio keeps track of your relations with others by looking at the history of your transactions, connecting you to the people you’ve had bought from, sold to, or those that chose to show your art in their own galleries.

Sheepmarket:
This one is funny, because it turns out to be related with openstudio and with an entry I wrote in this journal some time ago about the shepherd, in which it seems I was completely clueless about where the shepherd comes from. I don’t understand exactly how it works, but I think it is hooked up to amazon.com so anyone could draw sheep and get payed for it. The collection of sheep is displayed online where you can buy prints. Of sheep.

Tiny Icon Factory:
The tiny Icon Factory is an anonymous online repository for tiny icons. 168047 so far. By Brent Fitzgerald and yours truly.

ZeWall:
Zewall emulates graffiti. It gives you pictures of walls of metro trains to paint on. It is kinda contradictory that you have to give away your email address before you can paint, becuase it takes away the whole point of graffiti and anonymous vandalism.

Modster:
Created by Javascript mastermind and browser commander Takashi, Modster is a html canvas (safari and firefox only) user based exquisite corpse web application. You start by drawing the top of the drawing and invite someone else (from within the system) to do the next part. The point of exquisite corpses is that the people in turn can’t see what people made before them, leading to a fresh result of surreal, fresh, and dislocated images.

… and tinyDoodle:
After all this, tinyDoodle doesn’t seem like much of a contribution to the world of online social drawings, except it joins Modster and Rafael Robayna’s painter example as an effort to find more natural ways to embed creative applications into the browser space, using drawing as an example to explore new ways to deal with digital interpretations of time, and how it can affect the interaction with process and data. Time and user actions make parts of the drawing disappear into the database limbo as each stroke grows older, illustrating a path to find meaningful relations between the ever changing information multiverse, and the ways we choose to represent it.

In the end, all of these tools are all nothing more than social toys and explorations. Even though I consider play as one of the most important human activities, I’d like to see the act of drawing incorporated to interactive technologies as a common place in daily life, just as typing and clicking are today.

In a very experimental mode, I started writing a drawing tool in html canvas and javascript from scratch. I hooked up the mouse events to the drawing loop and figured out how to keep track of the mouse coordinates when resizing the browser window.

The sketch is here to play with, much in the spirit of my early Processing experiments, and the following are a bunch of screenshots from when I was messing with the style parameters as I was fixing bugs in the event handler and the calls to draw.

The next are screenshots of a modification I made to Rafael Robayna’s Painter tool. He has implemented a nice Widget class for canvas that anyone could extend, and a playback control that lets you sit and see how you made your drawing. An interesting exercise in memorization that is relevant to my concerns about virtual representations of time.

The following examples are some modifications of the ones that use the canvas object in the Mozilla Documentation pages. If you experience broken things or nothing at all it might be because your browser doesn’t support canvas, sorry about that.

Clock:

Cellular Automata:

Transformation Stack: