Archive for September, 2006

Obey the Tiny Giant

Saturday, September 16th, 2006

I love street art.


I love the posters and the stickers and the graffitis, and I specially love the black and white. I usually scan the streets looking for the surprising, rebellious kinematic images, and I don’t really care much if some of them actually are dummies of profitable merchandising or disguised alternative advertisement. Even after all this years, I still smile when I find a new manifestation of the OBEY propaganda campaign. I wonder if the internet could allow some of that, if there was a way of sneaking artwork in the space between transitions or somewhere else. If there was a way to scratch on advertisement banners or draw a mustache on the pictures of the celebrities. If there could be a layer of persistent user expression on top of everything else. I guess community generated websites can be understood to play that role a bit. They allow for free space of expression that can eventually lead to surprising mutations of street art. For example, the last time I saw the OBEY trademark was not on a street corner, it was not on a mailbox and it was not on a street sign. In fact, it could never be found anywhere in the street world at all. It was created within the web by some anonymous contributor to the Tiny Icon Factory that miraculously managed to translate the curvy shapes of Andre the Giant’s graphic portrait into a 13 by 13 square black and white little grid. I’m sure it must be hard to find such a virtuoso creator of icons. As Brent already pointed it out, there is a potential for making 2^169 different Tiny Icons, and we humans are only around 7 billion, leaving each one of us with as much as 1.0690e+41 possible icons to create. Finding the right combination of black and white squares that looks like Andre the Giant is an impressive achievement that would have never happened if it was not because of an interesting chain of events that started last thursday and fueled the Tiny Icon Factory with unprecedented mouse clicking human power. Brent told John about our Tiny toy project, John blogged it, a few people bookmarked it in, some other people digged it, and by the next morning the Tiny Icon Factory was producing more than 200 ipr (Icons Per Hour) by the creative few out of around 10000 visitors. 6999 Tiny Icons are sitting in the PLW database right now, although the Icon birth rate has already slowed down to a couple of tens per hour. All kinds of stuff, some of them silly, some of them dull, some of them clever, some of them pretty, some of them obscene, some of them brilliant, and all of them equally Tiny. One particular Icon called my attention out of the multitude, a tiny tribute to a giant man.


The Discrete Line

Monday, September 11th, 2006


This is an applet I made to illustrate Jack E. Bresenham’s line algorithm. And here is the pseudocode, as extracted from Wikipedia:

function line(x0, x1, y0, y1)
  boolean steep := abs(y1 - y0) > abs(x1 - x0)
  if steep then
    swap(x0, y0)
    swap(x1, y1)
  if x0 > x1 then
    swap(x0, x1)
    swap(y0, y1)
  int deltax := x1 - x0
  int deltay := abs(y1 - y0)
  int error := 0
  int ystep
  int y := y0
  if y0 < y1 then ystep := 1 else ystep := -1
  for x from x0 to x1
    if steep then plot(y,x) else plot(x,y)
    error := error + deltay
    if 2*error >= deltax
      y := y + ystep
      error := error - deltax

Bresenham later modified his algorithm to produce circles.

Tiny.magnify(11,7) + Line

Sunday, September 10th, 2006

You don’t move your mouse across the screen even if it feels like you do. You move your mouse across the table, or your desk, or something equally flat. The computer translates the mouse positions into integer coordinates that best fit the screen. Some positions might not be read, and gaps will manifest as the computer screen renders the path you scribbled. What your perception feels like the continuous motion of your hand will be translated into a scattered rain of tiny squares. I have recently been working on a prototype application for making short animations spawned by the Tiny icon drawing application. It immediately became evident that a 13×13 pixel canvas will never give me enough of a surface to reach the basic functionality I am looking for. I want my animation application to be as limited as possible, but I must deliver enough flexibility to let an experienced animator illustrate the basic principles of animation with ease. 13×13 pixels are just not enough. Something like 143×91 would be fine, if Tiny’s rudimentary drawing tool was to survive the resolution increase. But it didn’t. It felt like a pen that was running out of ink. As much as I dragged my mouse all over the canvas, it would spit a sequence of dashes instead of a line. I would have to squiggle really slow to get a continuos flow of pixels. An easy solution to the problem would be to catch all pairs of consecutive mouse positions, and device a procedure to approximate the line between them with new pixels. A couple of years ago John recommended me an excellent technical book written by dutch professor Leen Ammeraal entitled Computer Graphics for Java Programmers, and I remember the description of a pixel line algorithm at the end of chapter two. I told Brent about it and we engaged in the task of recreating it from scratch. It was a perfect activity for what we call PLW Basic Research, an initiative that aims at discovering (or rediscovering) basic non trivial things. An important constraint we forced on our design was to solve it with integer arithmetics. Some interesting ideas were found in the process. One of them is here. It features our working algorithm, scalable pixel resolution on the fly, and a random color switcher. The principal obstruction of this experiment is the lack of control, because it is impossible to guess what color to expect next. Our algorithm was very close in spirit to the classic Bresenham’s Line Algorithm from 1962, one of the first computer graphics algorithms of history, and the main difference between them is that our version doesn’t work as well as Bresenham’s.