stefanie – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 06 – Abstract Clock

I recently saw a tv show that talked about fish. It reminded me of my goldfish I used to take care of for 7 years, but died just a few months before I graduated high school. In memories of my goldfish, I wanted to create an abstract clock of a fish tank in space on an unknown planet. Each tank represents hours, minutes, and seconds as the water fills up the tank.

sketch

//Stefanie Suk
//ssuk@andrew.cmu.edu
//15-104 Section D

var fishx = 15; //width of fish
var fishy = 10; //height of fish

function setup() {
    createCanvas(600, 400);
}

function draw() {
    var h = hour();
    var m = minute();
    var s = second();

    var starx = random(0, 600);   //random x position of stars
    var stary = random(0, 250);   //randolm y position of stars

    background(50); //background color

    //moon and stars
    fill("yellow");
    ellipse(70, 70, 100, 100);  //moon at top left 
    ellipse(starx, stary, 5, 5);  //stars randomly placed

    //light brown base of planet
    fill(184, 165, 162)
    rect(0, 250, width, 200);  

    //darker brown oval holes on planet, left to right
    fill(158, 142, 140);
    strokeWeight(6);
    stroke(0);
    ellipse(30, 300, 100, 40);
    ellipse(100, 380, 100, 40);
    ellipse(300, 290, 100, 40);
    ellipse(400, 350, 100, 40);
    ellipse(600, 280, 100, 40); 

    //mapping time to fit in the fish tank
    mS = map(s, 0, 70, 0, 110);
    mM = map(m, 0, 70, 0, 110);
    mH = map(h, 0, 30, 0, 110); 
    
    //hour tank on left, dark blue
    strokeWeight(5);
    stroke(255);
    fill(31, 56, 240);
    rect(120, 150, 100, 100);  
    
    //minute tank in middle, dark blue
    stroke(255);
    fill(31, 56, 240);
    rect(260, 150, 100, 100); 
    
    //second tank on right, dark blue
    stroke(255);
    fill(31, 56, 240);
    rect(400, 150, 100, 100);  

    //three fish in each tank right to left
    strokeWeight(1);
    stroke(0);
    fill(255, 169, 157);
    ellipse(420, 230, fishx, fishy);
    triangle(427, 230, 435, 225, 435, 235);
    ellipse(320, 200, fishx, fishy);
    triangle(313, 200, 305, 195, 305, 205);
    ellipse(190, 215, fishx, fishy);
    triangle(197, 215, 205, 210, 205, 220);  

    //time rect in tank changing upwards, light blue
    noStroke();
    fill(157, 185, 255);
    rect(122.5, 152, 95, 95 - mH); //hour
    fill(157, 185, 255); 
    rect(262.5, 152, 95, 95 - mM); //minute
    fill(157, 185, 255);
    rect(402.5, 152, 95, 95 - mS); //second

}

Looking Outwards 06 – Randomness

Image of “4900 Colours: Version II” in exhibition

Gerhard Richter’s “4900 Colours: Version II” is an artwork of 196 panels that is made up of 5×5 squares. The colors used in these panels are distributed randomly by a computer, and then the panels are randomly arranged by the eyes. The 196 penales can be displayed as one whole artwork together, or it can be arranged at random in sets of four panels (which forms a 10×10 square panel). What’s amazing about this artwork is that the 4,900 colors used in each block of Richter’s artwork are fully randomized by computer, yet they still look very harmonized all together. I can see how the artist incorporates the beauty of randomness into his artwork, and how the artist uses his artistic sensibilities to arrange the panels and create a harmonious and beautiful piece of artwork. I love the fact that his artworks are not limited, and shows a variety of expressions through his artwork by randomly generating colors.

Gerhard Richter’s Website: https://www.gerhard-richter.com/en/art/paintings/abstracts/colour-charts-12

Video of “4900 Colours: Version II” in exhibition

Project 05- Wallpaper

I created a wallpaper with illustrations of birds, rainbows, and clouds. Recently, I saw two parrots outside my window (it was odd because I live in the middle of an urban city). I was worried they might not survive the cold weather, but they flew away as my family opened the window to bring them in. I wanted to create visuals of the scene I saw that day in my wallpaper.

sketch

//Stefanie Suk
//15-104 Section D

var positionbx = 10;     //starting position x for blue bird
var positionby = 10;     //starting position y for blue bird
var offsetbx = 120;      //spacing x for blue bird
var offsetby = 140;      //spacing y for blue bird

var positionyx = 75;     //starting position x for yellow bird
var positionyy = 75;     //starting position y for yellow bird
var offsetyx = 120;      //spacing x for yellow bird
var offsetyy = 140;      //spacing y for yellow bird

var positionrx = 10;     //starting position x for rainbow
var positionry = 95;     //starting position y for rainbow
var offsetrx = 120;      //spacing x for rainbow
var offsetry = 140;      //spacing y for rainbow

var positioncx = 70;     //starting position x for cloud
var positioncy = 20;     //starting position y for cloud
var offsetcx = 120;      //spacing x for cloud
var offsetcy = 140;      //spacing y for cloud

var positiondx = 0;     //starting position x for dots
var positiondy = 0;     //starting position y for dots
var offsetdx = 20;      //spacing x for dots
var offsetdy = 20;      //spacing y for dots


function setup() {
    createCanvas(500, 600);
    background(195, 213, 195);
    noLoop();
}

function draw() {

	for(var a=0; a<50; a++){                                                        //column of grid
    	for(var b = 0; b<50; b++){                                                  //row of grid                                    
    		push();
    		translate(positiondx + offsetdx*b, positiondy + offsetdy*a);                                                            //scale down 
    		dots();
    		pop();
    	}
	}

	// blue bird grid
	for(var a=0; a<5; a++){                                                        //column of grid
    	for(var b = 0; b<5; b++){                                                  //row of grid                                    
    		push();
    		translate(positionbx + offsetbx*b, positionby + offsetby*a);
    		scale(0.5);                                                            //scale down 
    		bluebird();
    		pop();
    	}
	}

	// yellow bird grid
	for(var a=0; a<5; a++){                                                        //column of grid
    	for(var b = 0; b<5; b++){                                                  //row of grid                                    
    		push();
    		translate(positionyx + offsetyx*b, positionyy + offsetyy*a);
    		scale(0.4);														       //scale down
    		yellowbird();
    		pop();
    	}
	}

	//rainbow grid
	for(var a=0; a<5; a++){                                                        //column of grid
    	for(var b = 0; b<5; b++){                                                  //row of grid                                    
    		push();
    		translate(positionrx + offsetrx*b, positionry + offsetry*a);
    		scale(0.5);                                                            //scale down
    		rainbow();
    		pop();
    	}
	}

	//cloud grid
	for(var a=0; a<5; a++){                                                        //column of grid
    	for(var b = 0; b<5; b++){                                                  //row of grid                                    
    		push();
    		translate(positioncx + offsetcx*b, positioncy + offsetcy*a);
    		cloud();
    		pop();
    	}
	}
}

function bluebird() {
	//body 
	noStroke();
	fill(178, 232, 245);
	ellipse(0, 0, 50, 50);     //head
	ellipse(0, 40, 60, 80);
	fill(178, 232, 245);       //body
	push()
	rotate(radians(30));
	ellipse(48, 30, 10, 60)    //tail

	// white section of head
	fill(250);
	rotate(radians(220));
	arc(0, 0, 45, 45, 0, QUARTER_PI);
	pop();

	//beak
	fill(187, 201, 205);
	ellipse(4, 0, 10, 10);           //right grey circle
	ellipse(-4, 0, 10, 10);          //left grey circle
	fill(157, 170, 173);
	triangle(-6, 2, 6, 2, 0, 18);    //dark grey beak

	//eye
	fill(10);
	ellipse(10, -2, 7, 7);           //right eye
	ellipse(-10, -2, 7, 7);          //left eye

	//wings
	fill(132, 163, 170);
	ellipse(20, 40, 15, 40);         //right dark blue wing
	ellipse(-20, 40, 15, 40);        //left dark blue wing
}

function yellowbird() {
	//body 
	noStroke();
	fill(245, 242, 125);
	ellipse(0, 0, 50, 50);     //head
	ellipse(0, 40, 60, 80);
	fill(245, 242, 125);       //body
	push()
	rotate(radians(30));
	ellipse(48, 30, 10, 60)    //tail

	// orange section of head
	fill(255, 176, 117);
	rotate(radians(220));
	arc(0, 0, 45, 45, 0, QUARTER_PI);
	pop();

	//beak
	fill(212, 208, 150);
	ellipse(4, 0, 10, 10);           //right greyish yellow circle
	ellipse(-4, 0, 10, 10);          //left greyish yellow circle
	fill(151, 150, 131);
	triangle(-6, 2, 6, 2, 0, 18);    //dark greyish yellow beak

	//eye
	fill(10);
	ellipse(10, -2, 7, 7);           //right eye
	ellipse(-10, -2, 7, 7);          //left eye

	//wings
	fill(160, 212, 150);
	ellipse(20, 40, 15, 40);         //right green wing
	ellipse(-20, 40, 15, 40);        //left green wing
}

function rainbow() {
	push();
	noStroke();
	fill(255, 92, 92);
	rotate(radians(158));
	arc(0, 0, 35, 35, 0, PI+QUARTER_PI, OPEN);     //red layer
	fill(255, 156, 92);                            
	arc(0, 0, 30, 30, 0, PI+QUARTER_PI, OPEN);     //orange layer
	fill(255, 245, 92);                          
	arc(0, 0, 25, 25, 0, PI+QUARTER_PI, OPEN);     //yellow layer
	fill(160, 240, 125);                           
	arc(0, 0, 20, 20, 0, PI+QUARTER_PI, OPEN);     //green layer
	fill(125, 193, 240);                           
	arc(0, 0, 15, 15, 0, PI+QUARTER_PI, OPEN);     //blue layer
	fill(175, 125, 240);                           
	arc(0, 0, 10, 10, 0, PI+QUARTER_PI, OPEN);     //purple layer
	pop();
}

function cloud() {
	noStroke();
	fill(255);
	ellipse(0, 0, 20, 20);
	ellipse(-10, 5, 15, 15);
	ellipse(12, 4, 17, 17);
	ellipse(22, 5, 10, 10);  //white ellipses left to right
}

function dots() {
	noStroke();
	fill(255, 255, 255, 6);
	ellipse(0, 0, 5, 5);   //dots for background
}

Looking Outwards 05 – 3D Computer Graphics

Image of Lil Miquela from Lil Miquela’s Instagram

Miquela Sousa, also known as Lil Miquela, is a computer-generated imagery (CGI) instagram model created by Trevor McFedries and Sara DeCou. She is an active model marketing a variety of brands, primarily in fashion. When I first heard about Lil Miquela, I was amazed by the idea of creating a fictional instagram model out of computer graphics. In fact, it is stunning to see how much she grew up as a model, featuring in product endorsements for famous brands like Prada and Calvin Klein. Not only is she a model, but she is also a virtual musician. The quality of the computer graphics on Lil Miquela is more than shocking. She looks very similar to other instagram influencers, but just with a bit more filter. If you look closely at her photos on instagram, you can see the individual strokes of her hair, wrinkles, clothes, and eyelashes. Lil Miquela is a pre-rendered, computer-generated snapshots. In other words, she is a computer graphic created through photography and rendering, raxet codes and futuristic software. It is clear that the artists of Lil Miquela are very sensitive to details and realism. The fact that they use photography to create the CGI explains how precise they are to create the final form.

Lil Miquela’s Instagram: https://www.instagram.com/lilmiquela/?hl=en

Brud (AI and robotics company that creates Lil Miquela) Instagram: https://www.instagram.com/brud.fyi/?hl=en

Lil Miquela’s Hard Feelings Remix

Project 04 – String Art

I tried to visualize an image of eye through various shapes of string art.

sketch

//Stefanie Suk
//15-104 Section D

var ax1;
var ay1;
var ax2;
var ay2;      //variable for top left white strings 

var bx1;
var by1;
var bx2;
var by2;      //variable for top right white strings 

var cx1;
var cy1;
var cx2;
var cy2;      //variable for bottom right white strings 

var dx1;
var dy1;
var dx2;
var dy2;      //variable for bottom left white strings 

var fx1;
var fy1;
var fx2;
var fy2;      //variable for top bottom orange strings 

var gx1;
var gy1;
var gx2;
var gy2;      //variable for left right orange strings 

var numLines = 40;
var numLines2 = 50;

function setup() {
    createCanvas(400, 300);
    background(25, 44, 108);

    //base lines for top left white strings
    line(0, 300, 0, 0);
    line(0, 0, 400, 0);
    ax1 = (0-0)/numLines;
    ay1 = (0-300)/numLines;
    ax2 = (400-0)/numLines;
    ay2 = (0-0)/numLines;

    //base lines for top right white strings
    line(0, 0, 400, 0);
    line(400, 0, 400, 300);
    bx1 = (400-0)/numLines;
    by1 = (0-0)/numLines;
    bx2 = (400-400)/numLines;
    by2 = (300-0)/numLines;

    //base lines for bottom right white strings
    line(400, 0, 400, 300);
    line(400, 300, 0, 300);
    cx1 = (400-400)/numLines;
    cy1 = (300-0)/numLines;
    cx2 = (0-400)/numLines;
    cy2 = (300-300)/numLines;

    //base lines for bottom left white strings
    line(400, 300, 0, 300);
    line(0, 300, 0, 0);
    dx1 = (0-400)/numLines;
    dy1 = (300-300)/numLines;
    dx2 = (0-0)/numLines;
    dy2 = (0-300)/numLines;

    //base lines for top bottom orange strings
    line(200, 0, 400, 0);
    line(200, 300, 0, 300);
    fx1 = (400-200)/numLines2;
    fy1 = (0-0)/numLines2;
    fx2 = (0-200)/numLines2;
    fy2 = (300-300)/numLines2;

    //base lines for left right orange strings
    line (0, 0, 0, 150);
    line(400, 300, 400, 150);
    gx1 = (0-0)/numLines2;
    gy1 = (150-0)/numLines2;
    gx2 = (400-400)/numLines2;
    gy2 = (150-300)/numLines2;
}

function draw() {

	//center pink strings
	for (var i = 0; i < 300; i += 8) {
		stroke(255, 161, 231); //pink
		strokeWeight(1);
		line (width/2, i + 0, i + width/2, height/2); //top right
		line(width/2, height - i, i + width/2, height/2); //bottom right
        line(width/2, i + 0, width/2 - i, height/2); //top left
        line(width/2, height - i, width/2 - i, height/2); //bottom left
	}

	//top left white strings
	var x1a = 0;
	var y1a = 300;
	var x2a = 0;
	var y2a = 0;
	for (var i = 0; i <= numLines; i +=1) {
		stroke(255);
		strokeWeight(1);
		line(x1a, y1a, x2a, y2a);
		x1a += ax1;
		y1a += ay1;
		x2a += ax2;
		y2a += ay2;
	}

	//top right white strings
	var x1b = 0;
	var y1b = 0;
	var x2b = 400;
	var y2b = 0;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1b, y1b, x2b, y2b);
		x1b += bx1;
		y1b += by1;
		x2b += bx2;
		y2b += by2;
	}

	//bottom right white strings
	var x1c = 400;
	var y1c = 0;
	var x2c = 400;
	var y2c = 300;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1c, y1c, x2c, y2c);
		x1c += cx1;
		y1c += cy1;
		x2c += cx2;
		y2c += cy2;
	}

	//bottom left white strings
	var x1d = 400;
	var y1d = 300;
	var x2d = 0;
	var y2d = 300;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1d, y1d, x2d, y2d);
		x1d += dx1;
		y1d += dy1;
		x2d += dx2;
		y2d += dy2;
	}

	//center circle yellow strings
	for (var e = 120; e <= 240; e++) {
		stroke(247, 241, 117);
		strokeWeight(1.5);
		noFill();
		ellipse(width/2, height/2, e, e);
		e += 4; //spacing
	}

	//top bottom orange strings
	var x1f = 200;
	var y1f = 0;
	var x2f = 200;
	var y2f = 300;
	for (var i = 0; i <= numLines2; i +=1) {
		stroke(255, 134, 4, 70);
		line(x1f, y1f, x2f, y2f);
		x1f += fx1;
		y1f += fy1;
		x2f += fx2;
		y2f += fy2;
	}

	//left right orange strings
	var x1g = 0;
	var y1g = 0;
	var x2g = 400;
	var y2g = 300;
	for (var i = 0; i <= numLines2; i +=1) {
		line(x1g, y1g, x2g, y2g);
		x1g += gx1;
		y1g += gy1;
		x2g += gx2;
		y2g += gy2;
	}

	noLoop();
}

Looking Outwards 04 – Sound Art

Image of people with Urban Lights Contacts by Scenocosme

Urban Lights Contacts is an interactive sound and light installation by Scenocosme (Grégory Lasserre & Anaïs met den Ancxt). The installation is composed of a small interactive sphere. When a person puts his or her hand on the sphere, the body turns reactive and sensitive to other living bodies. When the person touching the sphere has a physical contact with another person, the installation starts emitting sounds. Each contact of each person generates varieties of different sounds. What this installation is doing is sensing the body’s electrostatic energy and emitting them as sounds. What’s interesting and unique about this installation is that it creates a sensory interactive experience with what we cannot detect in the eye. Encouraging people to have interactive contacts with other people they don’t know also gives a total unique experience. The interactive device generates a very sensitive approach of the body, recognizing different degrees of electrostatic contacts according to the proximates of living bodies. What I find interesting is that different people produce different electrostatic energy, which also makes the installation emit different sounds as well. The artists of this installation really focus on the interactive experience, an experience people cannot see but can hear and feel through the installation.

Video of Urban Lights Contacts

Project 02 – Dynamic Drawing

I tried to visualize the sound waves when listening to music in a minimalistic way.

sketch

//Stefanie Suk
//15104 Section D

var x = 180; //starting position of rectangle 
var y = 200; //y position of rectangle

function setup() {
    createCanvas(600, 450);
}

function draw() {
	background(0);

	//white rectangle box
	noFill()
	stroke(255);
	strokeWeight(2);
	rect(150, 160, 310, 125);
	
	// Rectangles from left to right
	noStroke();
	fill(235, 234, 232); //color of rectangle
	rect(x, map(mouseX, 0, width, y, y+8), 10, 50); //position of rectangle
	fill(172, 176, 191);
	rect(x+20, map(mouseX, 0, width, y, y-2), 10, 40);
	fill(178, 208, 235);
	rect(x+20*2, map(mouseX, 0, width, y, y+5), 10, 30);
	fill(195, 217, 240);
	rect(x+20*3, map(mouseX, 0, width, y, y-5), 10, 45);
	fill(214, 231, 243);
	rect(x+20*4, map(mouseX, 0, width, y, y-3), 10, 15);
	fill(226, 238, 249);
	rect(x+20*5, map(mouseX, 0, width, y, y+3), 10, 50);
	fill(214, 231, 243);
	rect(x+20*6, map(mouseX, 0, width, y, y+7), 10, 35);
	fill(195, 217, 240);
	rect(x+20*7, map(mouseX, 0, width, y, y-7), 10, 60);
	fill(178, 208, 235);
	rect(x+20*8, map(mouseX,0,width,y,y-2), 10, 50);
	fill(172, 176, 191);
	rect(x+20*9, map(mouseX, 0, width, y, y+2), 10, 30);
	fill(235, 234, 232);
	rect(x+20*10, map(mouseX, 0, width, y, y-6), 10, 35);
	fill(172, 176, 191);
	rect(x+20*11, map(mouseX, 0, width, y, y-4), 10, 10);
	fill(178, 208, 235);
	rect(x+20*12, map(mouseX, 0, width, y, y+5), 10, 20);


	// Top circles, left to right
    let d = map(mouseY, 0, width, 15, 30); //scale mouseY value
    fill(249, map(mouseX, 0, height, 240, 200), 225); //color of circle, change
    ellipse(width/7, height/7, d, d); //position and size of circle
    fill(254, map(mouseX, 0, height, 230, 240), 223);
    ellipse(width/7*2, height/4, d, d);
    fill(map(mouseX, 0, height, 230, 190), 186, 192);
    ellipse(width/7*3, height/7, d, d);
    fill(map(mouseX, 0, height, 190, 230), 132, 143);
    ellipse(width/7*4, height/4, d, d);
    fill(179, 203, map(mouseX, 0, height, 130, 180));
    ellipse(width/7*5, height/7, d, d);
    fill(203, 220, map(mouseX, 0, height, 180, 230));
    ellipse(width/7*6, height/4, d, d);

    // Bottom circles, left to right
    fill(203, 220, map(mouseX, 0, height, 180, 230));
    ellipse(width/7, height/8*6, d, d);
    fill(179, 203, map(mouseX, 0, height, 130, 180));
    ellipse(width/7*2, height/7*6, d, d);
    fill(map(mouseX, 0, height, 190, 230), 132, 143);
    ellipse(width/7*3, height/8*6, d, d);
    fill(map(mouseX, 0, height, 230, 190), 186, 192);
    ellipse(width/7*4, height/7*6, d, d);
    fill(254, map(mouseX, 0, height, 230, 240), 223);
    ellipse(width/7*5, height/8*6, d, d);
    fill(249, map(mouseX, 0, height, 240, 200), 225);
    ellipse(width/7*6, height/7*6, d, d);
}

Looking Outwards 03 – Computational Fabrication

Liquid Speed is a 3d printed energy-return running shoe designed by Reebok and BASF. Printed with a special high-rebound liquid material, the outsole has wings that stretches and wraps around the side of the shoe. This gives a perfect customized fit when the shoe is laced up. What I really admire about this product is that it utilizes 3d printed material in an effective way to give the most personalized experience with the shoe. Having stretchable wings on each side of the shoe to tighten up and mold any desired foot to the shoe impresses me as a design major. The liquid factory uses state of the art machinery and software to build a system that draws the outsole of the shoe with a urethane-based liquid developed by BASF. The important part of this project is that the shoe does not need molds to be created. Molds are expensive, which is the reason why shoes are expensive in price. Developing a technology that eliminates the process of using molds is an innovative application in the shoe industry. I can see that the curvy shape of the outsole and wings give a smooth yet unique design to the shoe, while the reflective red color gives a powerful and strong emphasis to the overall design.

Video of Liquid Speed from Reebok Liquid Factory

Project-02-Variable Face

For this project, I tried to create variations of sizes, colors, and positions utilizing the original self portrait I created for our last deliverable. Different sizes, colors, shapes, and positions make changes to the mood of the portrait that was originally adorable.

sketch

// Stefanie Suk
// 15-104 Section D


var bgColorR = 208;
var bgColorG = 233;
var tiecolorR = 0;
var tiecolorG = 0;
var tiecolorB = 0;
var buttonD= 259;
var hatColorR = 32;
var hatColorG = 69;
var mouthposition = 345;
var eyeSize = 17;
var blushW = 30;
var blushH = 30;

function setup() {
    createCanvas(480, 640);
    // text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

	background(bgColorR, bgColorG, 255);
	noFill();

	// head and body
	noStroke();
	fill(255);
	ellipse(240, 680, 400, 600);     //body
	fill(240);
	ellipse(245, 332, 305, 250);     //shadow on face
	fill(255);
	ellipse(240, 300, 300, 300);     //main face ellipse
	ellipse(285, 350, 250, 200);     //cheek
	ellipse(140, 200, 120, 120);     //left ear
	ellipse(340, 205, 120, 120);     //right ear

	// eyes
	stroke(0);
	strokeWeight(eyeSize);
	point(205, 320);                 //left eye
	point(310, 320);                 //right eye

	// mouth
	strokeWeight(5);
	fill(255, 0, 0);
	arc(260, 345, 50, 50, 0, PI, CHORD);

	// necktie and button
	fill(tiecolorR, tiecolorG, tiecolorB);
	triangle(216, 465, 216, 503, 259, 484.5);   //left part of tie
	triangle(301, 465, 301, 503, 259, 484.5);   //right part of tie 
	fill(0);
	ellipse(buttonD, 510, 5, 5);                //top button
	ellipse(buttonD, 525, 5, 5);                //middle button
	ellipse(buttonD, 540, 5, 5);                //bottom button

	// blush
	noStroke();
	fill(249, 203, 203);
	ellipse(140, 350, blushW, blushH);          //left blush
	ellipse(360, 350, blushW, blushH);          //right blush

	// hat
	fill(hatColorR, hatColorG, 140);
	quad(204, 173, 220, 130, 264, 130, 283, 173);

}

function mousePressed() {
	// changes color of background
	bgColorR = random(50, 200);
	bgColorG = random(50, 200);
	// changes position of button
	buttonD = random(240, 280);
	// changes color of necktie
	tiecolorR = random(0, 255);
	tiecolorG = random(0, 255);
	tiecolorB = random(0, 255);
	// changes color of hat
	hatColorR = random(20, 230);
	hatColorG = random(20, 230);
	// changes eye size
	eyeSize = random(10, 30);
	// changes shape of blush on cheek
	blushW = random(30, 45);
	blushH = random(30, 45);
}

Looking Outwards 02 – Generative Art

Drawing Water, designed by David Wicks, is a piece of generative art shaped by the relationship between where rainfalls are and water consumption in the United States. What I really admire about this work is that not only is it aesthetically pleasing, but people can also have interactive experiences with the installation. I love how little lines flow together in different colors on the screen, and it amazes me how all these lines correspond to the daily rainfall measurement in the United States. Each line is driven by water consumption and rainfall data, where David Wicks utilizes these datas to program his installation. The length of each line is determined by the amount of rainfall measured, and the initial placement of the lines are determined by where the rainfall fell. The final placement of the lines and the colors are based on urban water consumption in the States. I can clearly see and appreciate David Wicks’ delicate and artistic sensibility through the soft but dynamic movements of each line in his installation.