Following on from my previous experiments with generative art and processing I decided to elaborate on my code and introduce more complex shape generation. I knew I wanted to introduce 3D and alpha blending, as well as refining the curves used to generate the lines.

A Beautiful Mistake

After getting my head around the 3D space and doing some rudimentary experiments I was ready to port my existing code into this new 3D world. I started playing some more with the brilliant OCD Library and had something I was kind of happy with.

At some point in tweaking and playing with the code I must have removed the line background(0); and (naturally) the screen was never cleared. What this produced when left to run for about 2000 frames was stunning.

The Result

So here they are, my beautiful mistakes generated by taking an image, getting a random pixel, positioning it randomly in 3d space then connecting an arbitrary amount of other random points to this point with bezier curves. The frame buffer is never cleared and the image are let to build up over thousands of frames.

Simply click on a thumbnail to view the enlarged version or you can view larger images on my flickr account or my HD gallery.

Now in Moving Picture™ format!

I’ve also got a couple of videos of the images being generated. The low-res previews which vimeo outputs don’t really do it justice, but at least you can view it in HD on vimeo (which you can’t with you tube.)

Now with a Z axis!

My next step is to try and generate these images in true 3D form, with camera control and give the whole thing a sense of depth. This is my first attempt.

I first discovered Processing in the summer of 2005. I downloaded the source code, had a play around with it and decided it wasn’t going to be worth me learning it. At the time I was very much design oriented in my endeavors and although I knew vaguely what the capabilities of Processing were, it’s lack of a substantial IDE or drawing tools made it no competitor to my main focus at the time: Flash.

Rediscovery & Inspiration

Fast forward 3 years and I’m now a developer, a code junkie, a command-line ninja. Although I sometimes miss the creativity that you get with design, I still love the art of writing code. I want the excitement of motion, interaction and form but also want the challenge of writing elegant software… I’d been thinking about re-visiting processing for a long time, hopefully it would satisfy these needs. I often kept an eye on the likes of Jonathan Harris & Flight 404 to see what they were up to, and was always inspired by the cool things these guys were doing with processing + generative art in general.

It was when a guy at work, David Standen started going on about processing, and his love for it that I thought “maybe i should look at this again”. I am after all now a programmer, and Processing is a DSL around Java, so why not learn it? I downloaded the latest version and started playing around…

Enter Pixel Path

I wanted something different, I ignored “good code” and went straight for the fun and creative, something non-interactive maybe. So what to do? I’ve always been really annoyed by the fact that I can’t really draw very well and I’ve never painted a picture in my life, so I decided to try and create some software that would create gorgeous looking “things”. Generative Art.

Inspired by this post I set about creating what would later become known as “Pixel Path”. The idea was simple, to analyze a given image, pixel by pixel and map every pixel to all other pixels of the same colour. Pixels would be identified by a dot and connected by lines, hopefully creating a sense of depth, texture and form.

Version 1 – Moss

The first version is based on a macro shot of a leaf, it maps every 100th pixel to up to another 100 pixels of identical colour. (Galleries each have 5 parts, use the thumbnails to scroll through them all.)

Total Pixels: 1,296,000 | Analyzed: 12,960 | Paths: 1,296,000

p1 – Moss

• 
• 
• 
• 
• 

view larger on flickr

Version 2 – Skin

In the second version I tweaked the algorithms to introduce more depth, points are rendered at 80% opacity and paths at 20%. The amount of pixels to be analyzed was also reduced to every 3500th, but the mapping limit increased to 1000 paths. The reference image was a macro shot of a group of feathers.

Total Pixels: 1,296,000 | Analyzed: 370 | Paths: 370,000

p2 – Skin

• 
• 
• 
• 
• 

view larger on flickr

Version 3 – Paprika

The third version used bezier curves to draw the paths with control points offset against the difference between the reference and target pixel. Every 850th pixel was analyzed up to 100 paths. The reference pixels in this version were distinguished with near 100% opacity. The image used was that of a red rose petal.

Total Pixels: 1,296,000 | Analyzed: 1,524 | Paths: 152,400

p3 – Paprika

• 
• 
• 
• 
• 

view larger on flickr

Version 4 – Rose

For version 4 I abandoned the dots for marking pixels, and instead relied on just the paths. The bezier curves were tweaked slightly to create smoother lines and only every 250th pixel was analyzed, up to 100 paths. The reference image was another rose petal, in pink.

Total Pixels: 1,296,000 | Analyzed: 5,184 | Paths: 518,400

p4 – Rose

• 
• 
• 
• 
• 

view larger on flickr

Version 5 – White

Version 5 was a slight departure from the norm, I inverted the canvas colour and this time decided to map the reference pixel to it’s first match, then all other matches to the next match (creating a flowing path) This version also draws two sets of paths for every match, one straight and one curved. Opacities were also massively reduced to only 5% and analyzed pixels increased to every 900th for up to 1000 paths. The first reference image was a different set of feathers and the second a forest scene.

Total Pixels: 1,296,000 | Analyzed: 1,440 | Paths: 1,440,000

p5 – White

• 
• 
• 
• 
• 

view larger on flickr

Version 5 – Forest

p5 – Forest

• 
• 
• 
• 
• 

view larger on flickr

Next Steps

• Introduce an element of randomness.
• Experiment with noise.
• Experiment with blending.
• Introduce the z-axis.
• Try using particles to generate “ink splats”.

it relies on the requested path to work out how to split the breadcrumbs, it alsoo requires that every component of your path is accessable, should be a good starting block though.

  def breadcrumbs(sep = "»", include_home = true)
    levels = request.path.split('?')[0].split('/')
    levels.delete_at(0)

    links = "You are here: "
    links += content_tag('a', "home", :href => "/") if include_home

    levels.each_with_index do |level, index|
      links += " #{sep} #{content_tag('a', level.downcase.gsub(/_/, ' '), :href => '/'+levels[0..index].join('/'))}"
    end

    content_tag("div", content_tag("p", links ), :id => "breadcrumb")
  end