My Generative Art Engine – A Quick Preview
An article by June 10, 2010on
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.
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.
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.
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.
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.
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.
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.
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.
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.
Tags: generative art
Categorised in: Articles