teaching generative design

I gave a course on generative design at HETIC, a graduate school for the web. The first session was a broad introduction to generative design with an attempt at defining its scope, a (short) historic background and a presentation of a variety of generative design projects and tools. The second course was dedicated to generative design projects on the web and using the HTML5 canvas to create animation and interactivity in the browser. And the third and last was an introduction to the concept of agents and what I called the illusion of life^↓.

Each of these lessons was divided in two parts. The first part was focused on theory and examples of design and art projects, the second on practicing a bit of code to experiment various generative design principles. Processing was the tool of choice to discover and explore computer-generated forms, and, because of the recent release of Processing 2.0, it was possible for students to export sketches directly to an HTML5 canvas.

sources

The first lesson’s exercices were about generating moiré pattern. Moiré is interesting because it fits most of the attributes of computer-generated images particularly well: lots of precisely drawn lines create random and hard to anticipate patterns.

Hand-drawn sketch as a starting point.

The equivalent of the previous drawing in a program.

Working in a larger window, with more lines to get a better pattern.

Mapping one end of a set of lines to the mouse, to test different patterns. The following is canvas, hover with a mouse or tap with a finger to test it.

Using concentric circles instead of straight lines. Moving the mouse on the X axis moves one group of circles on top of the other.

Distributing circles next to one another on the sketch. Moving the mouse on the X axis changes the diameter of all the circles at once.

Developing the previous sketch with concentric circles. MouseX changes the number of smaller circles until the there is a sufficient number of circles to recreate a gradient from black to white.

Adding a few functions to the previous sketch: a color mode (toggle with key ‘c’), a moire mode (toggle with space bar) and a gradient mode. Add circle with key UP and remove with DOWN. Or make any of the previous functions by tapping/clicking in the sketch randomly.

A few images generated with the last example while changing variables. The tweak mode is a great way to show the variability of a program and add some unpredictability in the output.

I’ll be writing an article with examples of agents. In the meantime, the sources for these sketches can be found here: moire-examples.zip. They are GPL’ed v3.

references

↑ — A reference to a book by Ollie Johnston and Frank Thomas, two animators at Disney showing various techniques to breathe life into simple shapes. In recent years, it has become a landmark for artists, interaction designers and developers looking for ways to improve their creations with a bit of flair (see this article on Smashing Magazine).