13 generative art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...generative art 5...
TRANSCRIPT
Generative Art
Generative Art 1
How many Ms are printed to the console?
Generative Art 2
for (int a = 0; a < 1; a++) {println("M");
}
A. 0
B. 1
C. 2
D. 3
E. Syntax Error
What is printed to the console on the 10th frame?
Generative Art 3
class Agent {int x;
Agent() {x = 0;
}
void update() {x = x + 1;
}}
Agent a = new Agent();
void draw() {a.update();println(f.a);
}
A. 0
B. 1
C. 9
D. 10
E. 11
Jackson Pollock
Generative Art 4
Generative Art 5
Generative Art
Generative art refers to art that in whole or in part has been created with the use of an autonomous system. An autonomous system in this context is generally one that is non-human and can independently determine features of an artwork that would otherwise require decisions made directly by the artist.
https://en.wikipedia.org/wiki/Generative_art
Generative Art 6
Generative Art 7
How To Draw With Code: Casey Reashttps://youtu.be/_8DMEHxOLQE
Generative Rules
1. start at random position with random N, S, E, or W direction
2. each frame, decide if the line should turn 90° clockwise
3. draw a line of random length in current direction
4. if the line leaves the canvas, kill it and start a new one
Generative Art 8
1
2
3 4 5 6
7
8
9 10 11
1213
14
15
die
bornborn
Example of Generated Lines
Generative Art 9
frame numbers
line left canvas
new line is “born” here heading E
line is “born” here heading N
Lines are Drawn by an “Agent”
Generative Art 10
class Agent {float x;float y;// 0 is N, 1 is E, 2 is S, 3 is Wint direction;boolean dead;
Agent() {...
}
void update() {...
}}
way to keep track of
direction
Lines are Drawn by an “Agent”
Generative Art 11
Agent a;
void setup() {...
// create agenta = new Agent();
}
void draw() {// update the agenta.update();
...}
Generative Art 12
1. start at random position with random N, S, E, or W direction
Agent() {x = random(width);y = random(height);direction = int(random(0, 5));dead = false;
}
0, 1, 2, or 3
probability of changing direction
Generative Art 13
2. each frame, decide if the line should turn 90° clockwise
void update() {...
// decide if it changes direction if (random(100) < probTurn) { direction = (direction + 1) % 4;
}
...modulo 4
wraps direction back to 0
Generative Art 14
3. draw a line of random length in current direction
void update() { // save current positionint px = x;int py = y;
float step = random(1, maxStep);// step in the current directionif (direction == 0) {
y -= step;} else if (direction == 1) {
x += step;} else if (direction == 2) {
y += step;} else if (direction == 3) {
x -= step;}line(px, py, x, y);
change x or y depending on
current direction
Generative Art 15
4. if the line leaves the canvas, kill it …
void update() {...// kill if it leaves the canvasif (x < 0 || x > width || y < 0 || y > height) {
dead = true;}
… and start a new one
void draw() {...// create a new agent if this one diedif (a.dead) {
a = new Agent(); }
generative1
Generative Art 16
start at random position with random N, S, E, or W direction
each frame, decide if the line should turn 90° clockwise
draw a line of random length in current direction
if the line leaves the canvas, kill it and start a new one
generative2
Generative Art 17
array of line "agents"each agent has a different shade
// update the agent
for (int i = 0; i < a.length; i++) {
a[i].update();
// create a new agent if died
if (a[i].dead) {
a[i] = new Agent();
}
}
generative3
Generative Art 18
if ends of two lines touch, give weight of thinnest line to the other and kill the thin line
add colour using shifts from a base hue
fullScreen mode
generative3
Generative Art 19
if ends of two lines touch, give weight of thinnest line to the other and kill the thin line
// if two agents touch
for (int i = 0; i < a.length; i++) {
for (int j = i + 1; j < a.length; j++) {;
float d = dist(a[i].x, a[i].y, a[j].x, a[j].y);
if (d < threshold) {
// kill smaller one and
// give weight to other
...
}
}
}
Generative Art 20
generative4
Generative Art 21
trigonometry for curvy agents
float px = x;
float py = y;
l += random(-maxStep, maxStep);
x = x + l * cos(t);
y = y + l * sin(t);
line(px, py, x, y);
t += probTurn;
Glen Marshal, Metamorphosishttps://vimeo.com/1747316
Generative Art 22
Quayola, Iconographies #81 Adoration after Botticelli- http://www.quayola.com/iconographies-81/
Generative Art 23
John Maeda, " The 10 Morisawa Posters"- http://tdctokyo.org/eng/?award=96-97_john_maeda#
Generative Art 24
Generative Design: MIT Media Lab Identity - https://vimeo.com/20250134
Generative Art 25
More Generative Art
Generative Art 26
Bohnacker, H., Gross, B., & Laub, J. (2012). Generative Design: Visualize, Program, and Create with Processing. http://www.generative-gestaltung.de/code
Pearson, M. (2011). Generative Art (1 edition). Shelter Island, NY : London: Manning Publications.https://www.manning.com/books/generative-art