My Generative Art Engine – A Quick Preview

An article by David Brooks on June 10, 2010


I’ve been keeping this a secret for awhile now, but I have a new project that’s shaping up pretty nicely and I wanted to finally talk about it in public.

Generative Art

First, I should probably explain Generative Art itself.

It’s not like traditional art where you have full control over the brushes or pencils, it’s about writing code that creates art for you. Often times you leave it open for a bit of randomness, which can either make or break your piece in any given rendering. Sometimes I’ll hit refresh over and over until I finally get something I like out of my code.

One of the reasons I hesitated to talk about this all before was because I wasn’t sure if I was going to be able to pull it off with my chosen technology. Typically people who do this kind of artwork write their code in Processing, Java or Actionscript. For me, I wanted to use HTML5 and Canvas, if for no other reason than to see if it could do it.

Stage 1 – One Million Boxes

As a first step I wanted to be able to draw, to scatter shapes. The first renders were basic, but they confirmed that a browser could display a million items, which is something that could easily be necessary.

1 Million boxes, rendered with HTML5s Canvas

Stage 2 – Weighted and Unweighted Shapes

Once the basic limitations were out of the way, I needed to be able to clump shapes together or throw them throughout the canvas randomly. This might seem like a strange place to start, but by solving the problem here I assumed I would gain a lot of control up front.

A set of clumped shapes rendered by HTML5s canvas

While the image above is a small clump of shapes, weighted to a point on the left, the shot below is a mix of both. Not only is there a weighted clump of shapes but also a group of larger shapes behind it that don’t have any particular bias toward a location. By size variation, color and transparency you can show a lot of depth of field.

Clumped images over scattered images, all HTML5 canvas

Stage 4 – Text

I didn’t need a lot of work with text at this point, I just wanted to prove that I could display it as randomly as the circles and at great length. I did some experiments with both random characters and some of the works of Shakespeare. I’ll likely revisit this part later, after the rest of the engine is solid.

Spattered Circles with Layered Text, HTML5 Canvas

Stage 5 – Drawing on a Path

While it’s nice to be able to scatter shapes randomly, I realized how important it was to be able to show movement in a piece of art. So I devised a way to draw shapes on a path. The next image shows nearly a million circles displaying over a number of paths.

Millions of circles, rendered on paths in HTML5 and canvas

Stage 6 – Images on a Path

I put in the ability to draw images somewhere around stage 2, but it was really after the path work was done that it made sense. The other night I sat down and worked out the code to display a series of elephants.

Elephants rendered in HTML5 canvas

Elephants tinted yellow with HTML5 canvas

Elephants with larger, orange circles. HTML5 and Canvas

Also worth noting in this series is the white “grunge” at the top. It’s somewhere in the upper hundreds of thousands of small white circles. By rendering like this, it gives a slightly tattered look, but organic and different every time.

More to Come

The biggest thing I’m working on is the ability to render these images at higher resolutions. At the moment they’re smaller, generally under 2000 pixels wide. But I have had success with rendering 11” x 13” prints from them. Even there the quality isn’t at 300 pixels per inch, which I think is the ultimate goal. Ideally I’d like to be able to render things at very large dimensions, but it doesn’t seem like canvas is the way to do that. Canvas is made for quick renders on the web, not high resolution printing.

There are a few other tweaks and ideas that I have in mind, but I don’t want to say too much yet. I’m still not certain what’s entirely possible with this stuff, but I have learned a ton about canvas and JavaScript optimization in the process.

If you have any thoughts, comments or critiques, I’d love to hear them. And I hope you all enjoyed the quick walkthrough of the progress so far. There’s definitely more to come.

Get articles from me, right in your inbox.

(I promise, no spam.)


Categorised in:

When My Daughter Met The Queen

A Photo of David Brooks
About David Brooks

David Brooks is the owner of the small creative studio, Northward Compass, based out of Orlando, Florida. He writes electronic and ambient music as Light The Deep, and fantasy stories about a place called Elerien.

© Copyright 2005 - 2018 David N Brooks. All rights reserved.