The Joy of Poetic Computation

The team over at Improvised Life highlighted a terrifically interesting talk by Zach Liberman. Zach walked us through his discovery of using code to generate art, or as he calls it, Poetic Computation.

He did an on the fly demo, which I started off less than impressed with. OK, he convinced the computer to draw a circle. Then copied that circle. Feh, this is CS 101 stuff. Then he animated it by cleverly using the current time and a trigonometric function. And just like that, I was hooked. He'd used just a splash of code to make something visually quite interesting; now that's impressive.

He then went on to explain that his daily practice is to experiment with these animations, which you can find published on Instagram. I would have thought this process might have gotten old, but his image feed proves me otherwise: the creative possibilities are endless.

Another practice he describes is having his students examine and reverse-engineer famous artists' work. In that spirit, I thought I would rig up my own Poetic Computation playground. I expected mine to be far more primitive than what Zach works with daily, but I hoped no less fun and inspirational.

My sketching environment offers two types of objects to work with: Lines and Drawings. A Drawing, can contain both Lines and other Drawings. Lines and Drawings contain the same set of operations, mainly: scale, translate, rotate and copy. A Line, by default, is one unit in length and goes from (0,0) to (0,1). A Drawing, when created, is empty. As you can see, I've strived to make the core operations as bland as possible. However, my hope was that by combining basic operations in interesting ways, you'd end up with, well, art.

My drawing framework was definitely inspired by SICP's picture language, even though it's been years since I've reviewed that code.

Here was my first picture, aptly called Hello World:

var helloworld = function() {
  var d = new Drawing();
  for(var i = 0; i < 360; i += 45) {
    var l = new Line();
    l.scale(i + 1).rotate(i + 1);
    d.add(l);
  }
  return d;
};

Painter.draw(helloworld);

And here's how it's rendered:

Taking a page out of Zach's book, I quickly started fiddling around with trigonometric functions. Also, I added basic support for animation. This allowed me to code this guy:

function sparky() {
  var pic = new Drawing();
  var d = new Drawing();
  for(var i = 0; i < 4; i++) {
    var l = new Line();
    l.scale(10).rotate(90 * i);
    d.add(l);
  }
  var fudge = (Math.cos(now())) * 10;
  for(var j = 0; j < 360; j += 5) {
    d.translate({x: Math.sin(j) * 100 + fudge, y: Math.cos(j) * 100 + fudge}).rotate(fudge);
    pic.add(d.copy());
  }

  return pic;
}

Painter.animate(sparky);

While it's far from a polished finished product, this animation does clearly demonstrate that even with my primitive setup I can make fun creations.

I've now been a Poetic Computationalist for about 15 minutes, and I have to say, this is really unlike any other code I've written. When you're coding to implement an algorithm you have a fixed point you're moving towards. But with my toy animation above, I had no such goal. I just wanted to make something interesting. Instead of being the professional chemist carefully measuring and adding ingredients, I was the 8 year old in the kitchen flinging whatever I wanted into the pot. I have to say, it was a lot of fun!

You can find the source code for all of this here and see all my creations here.