blacklog

For Safari 3, Webkit, or Firefox

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.

Safari 3, WebKit and Firefox all fully support the canvas and svg standards. because of this, you just need some javascript in your webpage to deal with state, timers and mouse events, and you will have a fully functional drawing interface living inside your browser. Brent was working with canvas a while ago, and made an interesting application called TinyCode. I think the fun part about canvas and svg is that you can make graphics based applications that offer you immediate full access to the dynamic web. With not much effort you can make every gesture captured by the event loop a form post that can generate back new interactions after being processed by the server backend, or can trace back the full history of any stroke made with an instance of your drawing application.

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:

Four years ago, when I came back from Memphis, I started meeting every other tuesday for lunch and after with mathematician Javier Bracho a.k.a. Roli, to talk about symmetry and art, and help him translate part of his talk about tilings into a script for a television capsule.

Some of those times we would just fool around with shapes to see what we could come up with, por example, using tiles that don’t fit to see what patterns we could find. Without knowing much about tilings back then, I happily rediscovered Kepler’s pentagonal tiling one day, and came back excited to the tuesday meeting with a giant hand made drawing of a massive portion of it. Roli told me about the history of this tiling, about Kelper and the archimedean tilings, and then we spend a few expressos looking for a set of rules that would procedurally generate kepler’s pentagonal non-periodic tiling. We wanted to write a set of instructions that the dumbest person, or even a machine, could follow to tile an arbitrary region of the plane this way. By the end of the evening we still didn’t know how to tell a machine how to make that tiling for us. I was astonished because I had no problem making the tiling myself based on observation and intuition, but I couldn’t figure out the rules that determined my decisions.

Then I took the Adventures in Advanced Symbolic Programming class this spring, and for the final project I considered revisiting the tiling problem. What if a program could be wrote that could figure out good enough rules (when possible) by looking at a given shape, kind of like I do when I make a tiling? Of course I am not In a position to write such a program (yet), but with the help of my super smart fellow classmates Kyle and Justin, maybe we could get something done. And we did.

Our system is a work in progress. Much still has to be done to it. For detailed information on its implementation and some background on tilings you can visit our project website here. You can also download the Scheme source code there.

The final project for the World Design class is due tomorrow. Frank asked us to create a world, make the corresponding world map, describe the cultures that inhabit our world, and choose a city to explore in more detail. I chose the sacred city of Kum from the world I created. It is located in a mysterious crater at sea level in the northwest of the island of Hurakan. A legend says that the crater was caused by the crash of a spacecraft that gave birth to the Cosmonaut civilization. It’s a long story, and here is the drawing. It is a nice Sumi ink drawing made in Arches hot press watercolor paper, 30x22in, 140gr, one of my favorite materials.

And the map:

Florian Jenett attacks again, this time augmenting the Tiny Icon Factory with an interesting way of tracing vector drawings over the collection of icons, and enabling download in SVG format. His Tiny Trace tool is a good example of how you can combine the search API developed by Brent during IAP this winter with new ways of using icon data to generate graphics.

I made an icon of Jun Sato for Jun Sato. The icon features blissful Sato and Happy Sato. There are plans for making Sato surprised and angry Sato. Jun Sato is the Visiting Scientist from the Toshiba Corporation at the PLW this year. He is responsible for integrating the Creative Commons Licensing system in OpenStudio. He is currently working on a secret project that involves secret stuff and features my icon.