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)
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
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
curating
generating
Further reading
Further reading
References and further reading
-
Noll, A. Michael, et al., Reichardt, Jasia, ed. (1971). Cybernetics, Art, and Ideas.
-
Melanie Lenz (2014) Cataloguing Change: Women, Art and Technology. V&A Online Journal 6/2014
-
Lindsay Caplan (2020) The Social Conscience of Generative Art. Art in America 1/2020 pp. 50-57
-
Sol Lewitt (1967) Paragraphs on Conceptual Art. Artforum June 1967.
-
Eevi Rutanen (2017) Rules of Emergence — Generating and Curating Creativity
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?
-
A
B
C
D
E
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?
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%
25%
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
}
CC_w2_d1
By eevirutanen
CC_w2_d1
- 232