Creative

Computation
for Visual

Communication
Design

WEEK 2 DAY 1

Generative Art

Rules of Ideation

Reasons to use a computer

AUTOMATION
- Using computational power to complete tasks that are laborious for humans.
OPTIMISATION
- Seeking solutions for complex problems that are beyond human cognition.
IDEATION
- Reaching unexpected outcomes by setting into motion an autonomous process

What is generative art?

“Generative art refers to any art practice where the artist creates a process, such as a set of natural language rules, a computer program, a machine, or other procedural invention, which is then set into motion with some degree of autonomy contributing to or resulting in a completed work of art.”

Philip Galanter

Mosaic in Ulugh Beg Madrasah in Samarkand, Uzbekistan

Kente fabrics from Ghana

Traditional Peruvian textile pattern

Rules = Art

Golden ratios in Notre-Dame of Laon (1157–1205)

Planar or rotational symmetry
Platonic solids (polyhedra)
Tessellation (tiling)

Fractals (self-similarity)
Ratios (golden, plastic)
Sequences (Fibonacci etc.)

El Lissitzky: Proun 99 (1923-1925)

Piet Modrian: Composition A (1923)

Anni Albers: Black White Yellow (1926)

Rules = Truth

Bauhaus emblem by Oskar Schlemmer (1922)

Man Ray, Joan Miró, Yves Tanguy and Max Morise (1928) Exquisite Corpse

TO MAKE A DADAIST POEM

Take a newspaper.

Take some scissors.

Choose from this paper an article of
the length you want to make your poem.

Cut out the article.

Next carefully cut out each of the words that makes up this article and put them all in a bag.

Shake gently.

Next take out each cutting one after
the other.

Copy conscientiously in the order in which they left the bag.

The poem will resemble you.

And there you are — an infinitely original author of charming sensibility, even though unappreciated by the vulgar herd.

Tristan Tzara describes the cut-up technique in the Dada Manifesto (1916)

Rules = Chaos

Max Ernst making Lissajous figures with a pendulum (1942)

Man Ray (1934) Objet mathematique

Rules = Perception

Bridget Riley (1961) Movement in Squares

Alexander Calder (1960) Maripose

Victor Vasarely (1969) Vega Or

Alberto Biasi (1961) Dynamic Structure

Rules = Process

John Cage (1981) Fontana Mix

Yoko Ono (1964) Cut Piece

Ellsworth Kelly (1951)

Spectrum Colors Arranged by Chance II

Rules = Aesthetic

Georg Nees and Ludwig Rase: Kubo-Oktaeder (1971)

David Birkoff: Aesthetic Measure (1933)

M = Order/Chaos

Desmond Paul Henry (1962)

Abraham Moles: Cybernetics and the work of art (1965)

Claude Shannon: Information theory (1948)

Rules = Program

Frieder Nake: Matrizenmultiplikation serie 40 (1969)

“Each painter is a restricted picture generator. So is each picture generating computer program. At all times, artists have applied the same method most computer program employ: they tried to vary a theme as often as possible in order to attain a 'best' (in their judgment) object.”

Frieder Nake 1969

Rules = Oeuvre

Manfred Mohr (1970) P021-G

Vera Molnar (1968) Interruptions

"Many 'Op Art' are very regular and mathematical in design. The computer is very adept at constructing purely mathematical pictures and hence should be considerable value to 'Op' artists."

A. Michael Noll

A. Michael Noll (1967) Ninety Parallel Sinusoids With Linearly Increasing Period (After a painting by Bridget Riley)

Rules = Pattern Enhancement

“An armchair in the shape of an avocado” by OpenAI's DALL-E model (2021)

Neural style transfer: Mona Lisa in the style of Starry Night (2015)

Google Deep Dream (2015)

Rules = ???

Tom White: Perception Engines (2018)

Stephanie Dinkins: Conversations with Bina48 (2018)

Sougwen Chung: Drawing with D.O.U.G. (2022)

Jean (Hans) Arp: Untitled (Squares Arranged According to the Laws of Chance) (1917)

“I use chance operations instead of operating according to my likes
and dislikes”

John Cage

John Cage: Dereau #3 (1982)

Externalising the Authorship

Chance vs. Control

Externalising the Authorship

Deterministic vs. Indeterministic

Francois Morellet: Random Distribution of 40,000 Squares using the Odd and Even Numbers of a Telephone Directory (1971)

Mandelbrot set

{\displaystyle f_{c}(z)=z^{2}+c}

Externalising the Authorship

"Computational Sublime"

Memo Akten: Learning to See: Gloomy Sunday (2017)

Zach Liebermann

Externalising the Authorship

Human / non-human interaction

Tim Knowles: Tree Drawings (2006)

Studio Moniker: For Play (2020)

Jenna Sutela: From Hierarchy to Holarchy (2015)

barbe_generative_diary: Field Recordings (2022)

Generating & Curating

DESIGNER

PROCESS

OUTCOMES

curating

generating

References and further reading

Weekly Reading II

Karl Gerstner (1964)
Designing Programmes

Study how Gerstner defines different “programmes”. Come up with another example of “Programme as …”. What do you think counts as a program?
- Post a short answer on the Week 2 forum
- Reply to someone else's post

Exercise: Rule-based pattern

Discuss in groups of 2-3. Select one of the patterns below and try to write down a set of rules for drawing the pattern.
Think of the following aspects of your pattern:
- What is the most simple repeating unit ("cell")? Is there a larger sequence being repeated ("row, "column")?
- What is the direction of repetition?
  - Linear: one or two dimensions?
  - Circular?
- How is each repeating unit altered from the previous?
  - Location, rotation, size, colour?

Coding Workshop 2.1

What did we learn last week?

Variables
- Declaring
- Assigning value
- Re-assigning
- Scope
  - Global
  - Local
"Animating"
- Incrementing variable value
Logic
- Boolean expressions
- Logic operators
- Conditional statements
MouseIsPressed

What is random?

UNEXPECTED THINGS?

THINGS THAT ARE HARD TO PREDICT?

THINGS WITHOUT A PATTERN?

Experiment:

Think of a random number between 1 and 10.

Statistically the most

common number is:

7

What looks random?

Throwing a 10-sided dice (0-9) ten times

0 1 2 3 4 5 6 7 8 9

6 6 6 6 6 6 6 6 6 6

3 1 4 1 5 9 2 6 5 3

THE PROBABILITY IS THE SAME IN ALL OF THESE!

Pseudorandom and true random

X1 = (aX0+b)%m

"seed"

PSEUDORANDOM

TRUE RANDOM

Complexity

Components interact in multiple ways and follow local rules
Emergence: more than the sum of its parts

Chaos

Deterministic laws that are highly sensitive to initial conditions
- "Butterfly effect"

Random number generation

random(min, max);

let ran1 = random(); //from 0 to 1
let ran2 = random(10); //from 0 to 10
let ran3 = random(-20,20); //from -20 to 20

lower limit

upper limit (not included)

Returns a decimal number

Exercise 1: Random

PROBLEM: NEW RANDOM VALUES ARE GENERATED CONSTANTLY

Exercise 2: Random variables

Exercise 3: Frame rate

VARIATION: Exercise 4:

Random Conditional

//declare global variables x,y and d
let x,y,d;

function setup(){
  createCanvas(500,500);
  background(0);
  fill(255);
  noStroke();
}
function draw(){
  //Use random() to get a random y coordinate on the canvas and assign it to variable y.
  //Use random() to get a random x coordinate on the canvas and assign it to variable x.
  //Use the dist() function to calculate the distance between the random coordinates and center of canvas,
  //and assign the calculated distance to the variable d.
  //Write a conditional statement:
  //if the distance is smaller than 200 and greater than 100, draw a 5px circle at coordinates x and y.
}

Randomness & Probability

PROBLEM: HOW TO MAKE THINGS HAPPEN WITH DIFFERENT PROBABILITIES?

Randomness & Probability

Random numbers are uniformly distributed
- random() produces all numbers between 0 and 1 with same probability
We can use random() to create probability distributions
- Doing different things with different likelihood

0

1

100%

50%

0.5

Randomness & Probability

We can use a conditional statement to perform different events with different probabilities

0

1

70%

30%

0.3

let ran = random(); //random number between 0 and 1
if(ran < 0.3) {
  //do something with 30% chance
}
else {
  //do something with 70% chance
}

Randomness & Probability

Multiple different events with different probabilities can be stacked using the else-if structure

0

1

25%

let ran = random(); // number between 0 and 1
if(ran < 0.25) { // 25% chance }
else if(ran < 0.5) { /* 25% chance */ }
else if(ran < 0.75) { /* 25% chance */ }
else { /* 25% chance */ }

25%

Exercise 5: Probability

Exercise 6: Random walk

VARIATION: Exercise 7:

Random walk with lines

Use the line() function to draw the random walker!
Pay attention how to calculate the arguments for line(). Remember to also update the new coordinates after drawing the line.

VARIATION: Exercise 8:

Diagonal random walk

Use the line() function to draw the random walker!
Move the walker also diagonally! How many possible directions you need to calculate?

VARIATION: Exercise 9:

Blended random walk

Use a different blendMode() to create interesting colour effects with overlapping steps!

To do

Attempt one of the variations or make something else interesting using random!
- Share your creation on the showcase forum
Weekly Reading II

Recap

//random decimal number between min and max (excluding the max)
random(min, max);
//random decimal number between 0 and 1 (excluding 1)
random();

//set frame rate
frameRate(value);

//change color mode from default RGB to HSB (hue, saturation, brightness)
colorMode(HSB);

//create probability distributions with random()
if(random() < 0.4) { /* execute with 40% chance */ }
else { /* execute with 60% chance */ }

//mouseClicked function is executed every time user clicks the mouse
function mouseClicked(){
  //what you put in here will be executed if mouse is clicked
}

Creative

Computation for Visual

Communication Design

Generative Art

Rules of Ideation

Reasons to use a computer

What is generative art?

Rules = Art

Rules = Truth

Rules = Chaos

Rules = Perception

Rules = Process

Rules = Aesthetic

Rules = Program

Rules = Oeuvre

Rules = Pattern Enhancement

Rules = ???

Externalising the Authorship

Chance vs. Control

Externalising the Authorship

Deterministic vs. Indeterministic

Externalising the Authorship

Externalising the Authorship

Generating & Curating

DESIGNER

PROCESS

OUTCOMES

curating

curating

generating

Further reading

Further reading

References and further reading

Weekly Reading II

Karl Gerstner (1964) Designing Programmes

Exercise: Rule-based pattern

Coding Workshop 2.1

What did we learn last week?

What is random?

Experiment:

Think of a random number between 1 and 10.

Statistically the most

common number is:

7

What looks random?

Throwing a 10-sided dice (0-9) ten times

0 1 2 3 4 5 6 7 8 9

6 6 6 6 6 6 6 6 6 6

3 1 4 1 5 9 2 6 5 3

Pseudorandom and true random

Complexity

Chaos

Random number generation

Exercise 1: Random

Exercise 2: Random variables

Exercise 3: Frame rate

VARIATION: Exercise 4:

Random Conditional

Randomness & Probability

Randomness & Probability

0

1

0.5

Randomness & Probability

0

1

0.3

Randomness & Probability

0

1

Exercise 5: Probability

Exercise 6: Random walk

VARIATION: Exercise 7:

Random walk with lines

VARIATION: Exercise 8:

Diagonal random walk

VARIATION: Exercise 9:

Blended random walk

To do

Recap

Computation
for Visual

Communication
Design

Karl Gerstner (1964)
Designing Programmes