Computational design (also referred to as Generative Art, Algorithmic Design, Parametric Design) refers to the process of creating a visual design from a sequence of steps or rules, e.g. an algorithm....

Computational design (also referred to as Generative Art, Algorithmic Design, Parametric Design) refers to the process of creating a visual design from a sequence of steps or rules, e.g. an algorithm. In addition to visual art, this methodology can be applied to sound, writing, and other kinds of creative output. This technique predates computers, you may find inspiration through the work of artists such as Sol Lewitt, Nasreen Mohamedi, John Cage, and Jackson Mac Low.

Before You Start Coding

Take a look at the work of the following procedural/computer artists. Is there something that inspires you? That you’d like to emulate?

• Sol Lewitt’s Wall Drawings

• Vera Molnar

• Lia

Note:

Many of the examples below are demonstrated in the videos in Processing, a Java based development environment. The functions work the same way as p5.js, but the syntax is a little bit different. Each example has a p5.js version linked on the video’s page for you to work with.

If you prefer to create your assignment in a Processing sketch, you may do so. (In this case, make sure you take a screenshot of your design and include it in your forum post as well as the code.)

Required Materials

The core idea is to create a visual design based on an algorithm. Here is a curated list of videos organized by topic with corresponding readings. Pick one (just one!) of the below to dig into for your assignment.

Fractals

• Read: The Nature of Code Chapter 8

• Video tutorial: Recursion

• Video tutorial: Fractal Tree

• Video tutorial: Koch Snowflake

Polar Designs

• Read The Nature of Code Section 3.5

• Video tutorial: p5.js Polar Coordinates

• Video tutorial: Mathematical Rose Patterns

• Video tutorial: Maurer Rose

• Video tutorial: Lissajous Curve Table

Cellular Automata

• Read: The Nature of Code Chapter 7

• Video tutorial: Game of Life

Perlin Noise

• Read: The Nature of Code Introduction Section 6

• Video: What is Perlin Noise 1

• Video: What is Perlin Noise 2

• Video: Perlin Noise Flow Field

• Video: Butterfly Generator

• Video: Polar Perlin Noise

If none of the above appeal to you, you can also scroll through this full playlist of videos. Whatever you choose to build your assignment off of, you can find the corresponding p5.js and Processing code at thecodingtrain.com.

Assignment

Your assignment for the Generative Art Module is:

1. Select an algorithm to serve as the foundation of your assignment. It can be one of the four above, one featured in the algorithm playlist, or one that you find through your own research.

2. Create a sketch that performs a “literal” visualization of the algorithm. (This might be provided to you already as example code or you may need to write it yourself.)

3. Make at least 5 simple variations on the visual design. Play with color, scale, transparency, and shapes. Document each of these variations with a screenshot.

4. Pick one of the variations you like the best and expand on it.

5. Share your sketch as a new post on this week’s discussion board. Write a ~ 200 word description about what you made and your process. You can write anything, but if you’re stuck here are some guiding questions:

• What did you originally intend to create?

• Narrate the process of creating your sketch.

• What resources and examples did you draw on to create your sketch? What was most helpful / least helpful from this week’s materials.

• What problems/discoveries did you encounter along the way?

6. Paste the link to your discussion post (not just the code) as your assignment submission.