Generative Design!
"Red Ambush" by Eno Henze – http://enohenze.de/ambush/

Generative Design!

Generative Design is the process whereby an artist or designer can create form using algorithms instead of having to draw shapes by hand. The designer writes code that sets up initial conditions and then creates forms from the instructions in the code. It could be something very mechanical – such as drawing a thousand small rectangles on a page – or something much more nuanced – like the artwork above from Eno Henze.

Freeing the designer from having to manually create each shape allows the designer to explore spaces that would otherwise be prohibitively time-consuming and exacting to create.

The most popular program that designers use is called Processing. I came across Processing several years ago and remembered it when I was the creative director at PROS – a big data software company. PROS makes software that mines a company's financial transaction data and serves up actionable intelligence using data science. I was exploring generative design as a way to come up with a visual language that used the beauty of patterns to allude to the intelligent complexity of the underlying data science.

I created this image with Processing. This is the bulk of the code:

It looks complicated at first, but not once you delve into it:

  • All the first two lines do is create a random number multiplier between 1 and 1.6. This determines how far each colored line extends out into space.
  • The next four lines set up the starting and ending points for the colored lines.
  • The fifth line sets the stroke color to a random one from an array of colors that I set up earlier in the code.
  • The sixth line actually draws the line.
  • The seventh line sets the stroke color to black for the little circles at the end of the colored lines.
  • The next line draws the little circle and the last line increases the angle so that the loop can repeat and draw the next line until a circle forms.

You can try it yourself here. Just reload the page to see how the random color and radius-extension values change the artwork.

It would have taken me quite a long time to draw all of these lines and set their colors and widths. And then, if I wanted to change anything, I would have had to adjust every single line or redraw all of the lines. With a generative approach, I can just change the parameters and reload the page. For instance, starting with this original image on the left, I can reduce the variation in how far the lines extend outward just by changing the upper limit on the multiplier. The first image was the result of a random multiplier between 1.1 and 1.9. The second image reduces that to 1.1 to 1.6. For the third image, I deleted some colors in the array of possible colors and increased the offset by which the angle increases when it figures out the coordinates for the next line – thereby reducing the number of lines.

Generative design is going to be seen more and more in advertising and in art. It just makes sense that designers should harness algorithms – mirroring the same phenomenon that we are seeing in artificial intelligence, deep learning and automation. Generative design allows for a more organic and rich expression of complexity and lends itself to artistic design, sound design, unusual product design, beautiful data visualization and even a great Radiohead video.

To view or add a comment, sign in

More articles by Chris Cambron

  • A JavaScript Particle-System Animation to Illustrate Fractional Distillation

    Intrigued by my foray into the world of generative design using p5.js, I decided to convert a Flash animation that I…

    1 Comment
  • Rear Projection!

    If you are looking for a unique and visually-stunning video display idea for events, corporate lobbies, meeting rooms…

  • Microlearning and PowerPoint

    I have been thinking about this for quite awhile now, but this article stoked my imagination. I think microlearning is…

Others also viewed

Explore content categories