13 generative art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...generative art 5...

13
Generative Art Generative Art 1 Generative Art 2

Upload: tranhanh

Post on 09-Mar-2018

240 views

Category:

Documents


7 download

TRANSCRIPT

Page 1: 13 Generative Art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...Generative Art 5 Generative Art Generative artrefers to art that in whole or in part has been created with

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

Page 2: 13 Generative Art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...Generative Art 5 Generative Art Generative artrefers to art that in whole or in part has been created with

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

Page 3: 13 Generative Art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...Generative Art 5 Generative Art Generative artrefers to art that in whole or in part has been created with

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

Page 4: 13 Generative Art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...Generative Art 5 Generative Art Generative artrefers to art that in whole or in part has been created with

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

Page 5: 13 Generative Art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...Generative Art 5 Generative Art Generative artrefers to art that in whole or in part has been created with

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

Page 6: 13 Generative Art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...Generative Art 5 Generative Art Generative artrefers to art that in whole or in part has been created with

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

Page 7: 13 Generative Art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...Generative Art 5 Generative Art Generative artrefers to art that in whole or in part has been created with

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

Page 8: 13 Generative Art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...Generative Art 5 Generative Art Generative artrefers to art that in whole or in part has been created with

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

Page 9: 13 Generative Art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...Generative Art 5 Generative Art Generative artrefers to art that in whole or in part has been created with

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

Page 10: 13 Generative Art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...Generative Art 5 Generative Art Generative artrefers to art that in whole or in part has been created with

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

Page 11: 13 Generative Art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...Generative Art 5 Generative Art Generative artrefers to art that in whole or in part has been created with

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

Page 12: 13 Generative Art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...Generative Art 5 Generative Art Generative artrefers to art that in whole or in part has been created with

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

Page 13: 13 Generative Art - cs.uwaterloo.cadvogel/cs105f16/materials/lectures/13...Generative Art 5 Generative Art Generative artrefers to art that in whole or in part has been created with

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