## Looking Outwards 2 – Generative Art

Drawing Water
By David Wicks, 2011

http://sansumbrella.com/works/2011/drawing-water/

“Drawing Water is a constructed landscape shaped by the relationship between where water falls and where it is consumed within the United States.” It is an interactive, animated map that uses data to map the amount of rainfall and where it fell to where it is consumed. So the more water a city uses, the stronger its pull.

What I admire about this project is how it is not only informative, but also beautiful to look at. It uses data collected to tell a story of the urban pull in the United States, and how much water travels from where it is fallen to where it is consumed, especially in the West Coast. I have always admired data visualization.

As for how the algorithm is generated, it reminds me of a code I used on an architecture project called a flow script, which uses length and frequency of lines to map the flow of a surface, using longer lines to indicate steeper topography. However, it is different in this sense, it takes the data of each location point and it moves towards where it is consumed, and the length is based on the amount of rainfall. Then as rainfall moves further, it becomes desaturated, turning from blue to black.

I think the creator’s artistic sensibilities are manifested in the algorithm based on the colors they used, line thicknesses, and shapes. There are variables in how many lines, and how thin the lines are. Wicks was able to use many thin lines that were of soft colors to make it almost seem like a watercolor painting. The artist makes it feel very sensible and soft.

## Project 2 – Variable Faces

Click the bear to change its mood!

sketch_rachell
``````var headShape = 0;
var eyeShape = 0;
var noseShape = 0;
var mouthShape = 0;
var cheekColor = 0;

function setup() {
createCanvas(640, 480);
}

function draw() {
//background fit mouth mood
if (mouthShape == 0){ //happy
background(227, 212, 95);
} else if (mouthShape == 1){ //gasp
background(191, 153, 209);
} else if (mouthShape == 2){ //unamused
background(153, 175, 209);
} else { //slanted
background(153, 209, 173);
}

fill(255);
noStroke();
//ears
ellipse((width/2)-125, 80, 50, 50);
ellipse((width/2)+125, 80, 50, 50);
//face
ellipse(width/2, height/2, 400, 400);
} else if (headShape == 1){
//ears
ellipse((width/2)-125, 100, 50, 50);
ellipse((width/2)+125, 100, 50, 50);
//face
ellipse(width/2, height/2, 400, 350);
} else {
//ears
ellipse((width/2)-125, 100, 50, 50);
ellipse((width/2)+125, 100, 50, 50);
//face
rect(120, 90, 400, 300, 130);
}

//eyes
var eyeLX = width/2 - 100;
var eyeRX = width/2 + 100;
var eyeSize = 20;

if (eyeShape == 0){ //eyes open
fill(0);
ellipse(eyeLX, height/2, eyeSize);
ellipse(eyeRX, height/2, eyeSize);
} else if (eyeShape == 1){ //eyes closed straight
stroke(0);
strokeWeight(7);
line(eyeLX-(eyeSize/2), height/2, eyeLX+(eyeSize/2), height/2);
line(eyeRX-(eyeSize/2), height/2, eyeRX+(eyeSize/2), height/2);
} else if (eyeShape == 2){ //eyes closed arc
stroke(0);
strokeWeight(7);
arc(eyeLX, height/2, eyeSize, eyeSize, PI, TWO_PI);
arc(eyeRX, height/2, eyeSize, eyeSize, PI, TWO_PI);
}else { //eyes closed arc 180
stroke(0);
strokeWeight(7);
arc(eyeLX, height/2, eyeSize, eyeSize, TWO_PI, PI);
arc(eyeRX, height/2, eyeSize, eyeSize, TWO_PI, PI);
}

//nose
if (noseShape == 0){
fill(0);
noStroke();
ellipse(width/2, (height/2)+ 10, 30, 15);
} else {
fill(0);
noStroke();
triangle((width/2)-15, (height/2)+10, (width/2)+15, (height/2)+10, width/2, (height/2)+15);
}

//mouth
if (mouthShape == 0){ //happy
noFill();
stroke(10);
strokeWeight(5);
arc(width/2, (height/2)+40, 30, 20, TWO_PI, PI);
} else if (mouthShape == 1){ //gasp
noFill();
stroke(10);
strokeWeight(5);
ellipse(width/2, (height/2)+50, 30);
} else if (mouthShape == 2){ //unamused
stroke(10);
strokeWeight(5);
line((width/2)-15, (height/2)+40, (width/2)+15, (height/2)+40);
} else { //slanted
stroke(10);
strokeWeight(5);
line((width/2)-15, (height/2)+35, (width/2)+15, (height/2)+45);
}

//cheeks
if (cheekColor == 0){
noStroke();
fill(189, 138, 134);
ellipse((width/2)-125, (height/2)+20, 30, 10);
ellipse((width/2)+125, (height/2)+20, 30, 10);
} else if (cheekColor == 1){
noStroke();
fill(227, 119, 104);
ellipse((width/2)-125, (height/2)+20, 30, 10);
ellipse((width/2)+125, (height/2)+20, 30, 10);
} else{

}
}

function mousePressed() {
eyeShape = int(random(4));
noseShape = int(random(2));
mouthShape = int(random(4));
cheekColor = int(random(3));
}``````

This is programmed so that every time you click the bear, it has a different mood using a combination of different facial variables: head shape, eyes, nose, mouth, and cheeks. The background color reflects the mood based on the mouth, since the mouth shapes seemed the most emotive to me.

There are 5 variables for a face, each with 2-3 options.

There are 3 types of heads you could get: circle, oval, or rounded rectangle. Then there are 4 types of eyes, open (circles), or closed (straight, or arc up or arc down).
There are 2 types of noses, either round or triangular.
There are 4 different mouths: smiling, gasping, straight unamused, or slanted. This random variable is also linked to the background color.
There are 3 options for cheeks: rosy cheeks, bright blush, or no blush.

I hope this program makes you giggle!

## Project 1-My Self Portrait

rachell-portrait
``````//Rachel Lu
//15-104 A

function setup() {
createCanvas(600, 600);
background('#fed176');
text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

background('#fed176');

//hair back
fill(0);
rect(140, 350, 335, 127);

fill('#fcdac3');
noStroke();
ellipse(width/2, height/2, 300, 275);

//nose
fill('#f89a63');
ellipse(300, 350, 20, 10);

//nosering
stroke(150);
strokeWeight(2);
line(307, 351, 307, 354);

//cheeks
fill('#e4848c');
noStroke();
ellipse(225, 370, 30, 15);
ellipse(375, 370, 30, 15);

//glasses
noFill();
stroke(0);
strokeWeight(4);
ellipse(225, 320, 100);
ellipse(375, 320, 100);
arc(300, 320, 50, 15, PI, TWO_PI);

//eyes
arc(225, 330, 20, 10, PI, TWO_PI);
arc(375, 330, 20, 10, PI, TWO_PI);

//mouth
arc(300, 380, 20, 10, 0, PI);

//hair
strokeWeight(50);
arc(285, 460, 305, 600, PI, PI+HALF_PI);
arc(315, 460, 305, 600, PI+HALF_PI, TWO_PI);

//ears
fill('#fcdac3');
noStroke();
ellipse(160, 325, 40);
ellipse(440, 325, 40);

//earrings
stroke(150);
strokeWeight(2);
ellipse(160, 355, 3, 30);
ellipse(440, 355, 3, 30);

//glasses
noFill();
stroke(0);
strokeWeight(4);
ellipse(225, 320, 100);
ellipse(375, 320, 100);
arc(300, 320, 50, 15, PI, TWO_PI);

}
``````

This is a self portrait, roughly drawing inspiration from Animal Crossing avatars. The features I found defining of me are my glasses and piercings, so I had to include those.

Melting Memories