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.

Click the bear to change its mood!

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);
    }

    //head
    fill(255);
    noStroke();
    if (headShape == 0){
    	//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() {
    headShape = int(random(3));
    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!

//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);

	//head
	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

Refik Anadol Studio

I heard of Refik Anadol when my friends coerced me into attending one of his exhibits at the Wood Street Gallery in Downtown, Pittsburgh in February 2019. That installation involved being in an infinity room with light projections bouncing around the room.

This project is slightly different. Melting Memories is a data sculpture, mostly displayed on a LED media wall. Its purpose is to enable visitors to experience aesthetic interpretations of motor movements inside a human brain in the act of remembering. Data is gathered on the neural mechanisms of cognitive control from an electroencephalogram that measures changes in brain functions over time.

I admire that the artists were able to make data beautiful, something usually represented as just charts and numbers. Art is not always just paint and colors, but it could be able to represent something about the human race, and I find that fascinating. I also really admire how they were able to make something displayed on an LED screen look incredibly 3-dimensional. It makes it emotional.

From the Refik Anadol Studio, there were seven people involved in designing and developing the piece. Then they had someone for sound design, and two for software development. They had scientific support from UCSF / Neuroscape Lab members, and Adam Gazzaley, M.D., Ph.D.

The artist needed to utilize new technology to be able to gather neural activity using an electroencephalogram, and a 32-channel Enobio for data collection. They also needed to come up with a way of transposing EEG data in to procedural noise forms, so had to develop FieldTrip, an open source GPU library.

I think the project points to the future of data-driven art, that data is able to generate visually beautiful artifacts, making one rethink how one can process data and what we can learn from that. Then we could possibly project this on the facade of a building, or CNC it to make physical artifacts that are not necessarily existing digitally.