## Victoria Reiter Project-02-Variable-Face

/*Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-02-Variable-Face
*/

// defines coordinate position of freckle
var freckleX = 285;
var freckleY = 335;
// defines an increment value to be used under function mouseClicked()
var increment = 5;
// defines dimensions of pupils
var pupilWidth = 30;
var pupilHeight = 30;
// defines dimensions of the whites of the eyes
var whiteEyeWidth = 80;
var whiteEyeHeight = 80;
// defines dimensions of the irises of the eyes
var irisWidth = 55;
var irisHeight = 55;
// defines coordinates of the "point" of the nose
var pointyNoseX = 220;
var pointyNoseY = 325;
// defines y coordinates of the ears and inner ears
var earY = 260;
var innerEarY = earY + 5;
// defines dimensions of the mouth
var mouthWidth = 110;
var mouthHeight = 70;
// declares RGB values for hair
var hairColorR = 255;
var hairColorG = 255;
var hairColorB = 0;
// declares RGB values for irises of eyes
var irisColorR = 0;
var irisColorG = 102;
var irisColorB = 102;
// declares RGB values for hat
var hatColorR = 0;
var hatColorG = 76;
var hatColorB = 153;
// declares RGB values for hat band
var hatBandColorR = 0;
var hatBandColorG = 0;
var hatBandColorB = 51;

function setup() {
// establishes canvas
createCanvas(640, 480);
background(220);
// establishes background color
background('rgb(153, 255, 204)');
// writes a short message
text("~V's Self-Portrait~", 10, 15);
}
function draw() {
// reestablishes background now in dunction (draw)
background(220);
background('rgb(153, 255, 204)');
noStroke();
// Skin color
fill('rgb(255,204,153)');
ellipse(250, 285, 270, 290);
//ears
ellipse(385,earY,50,70);
ellipse(115,earY,50,70);
noStroke();
// inner ear color
fill('rgb(255, 153, 153)');
//inner ears
ellipse(390,earY,30,50);
ellipse(110,earY,30,50);
//nose
triangle(255,331,240,350,pointyNoseX,pointyNoseY);
noStroke();
// cheek blush color
fill(255,204,204);
// cheek blush
ellipse(185,335,60,25);
ellipse(315,335,60,25);
noStroke();
// hairColor
fill(hairColorR,hairColorG,hairColorB);
// hair
noStroke();
// hat color
fill(hatColorR,hatColorG,hatColorB);
//hat
ellipse(250, 190, 300, 75);
ellipse(210,140,110,150);
ellipse(292,140,110,150);
noStroke();
// hat band color
fill(hatBandColorR,hatBandColorG,hatBandColorB);
// hat band
rect(155,152.5,192,30);
// eye outline color
stroke('rgb(0,158,255)');
// white of eyes color
fill('rgb(255, 255, 255)');
// white of eyes
ellipse(200,285,whiteEyeWidth,whiteEyeHeight);
ellipse(305,285,whiteEyeWidth,whiteEyeHeight);
// outline of mouth color
stroke('rgb(102,0,51)');
// mouth
arc(250,360,mouthWidth,mouthHeight,0,PI,CHORD);
noStroke();
// irises
fill(irisColorR,irisColorG,irisColorB);
ellipse(200,272,irisWidth,irisHeight);
ellipse(305,272,irisWidth,irisHeight);
noStroke();
// pupils
fill('rgb(0,0,0)');
ellipse(200,260,pupilWidth,pupilHeight);
ellipse(305,260,pupilWidth,pupilHeight);
noStroke();
// freckle color
fill('rgb(153,76,0)');
// freckle
ellipse(freckleX,freckleY,10,10);
}
function mouseClicked() {
// makes random variations occur in the portrait
// moves freckle randomly about the face
freckleX = random(150,350);
freckleY = random(325,375);
// changes size of the whites of eyes, pupils, and irises
whiteEyeWidth = random(80,110);
whiteEyeHeight = random(80,110);
irisWidth = random(60,75);
irisHeight = random(60,75);
pupilWidth = random(25,55);
pupilHeight = random(25,55);
// changes nose shape or "pointiness"
pointNoseX = random(185,245);
pointyNoseY = random(305,345);
// moves the ears up and down
earY = random(250,270);
// changes size of the mouth
mouthWidth = random(40,150);
mouthHeight = random(25,95);
// changes color of the hair (warm colors)
hairColorR = random(155,255);
hairColorG = random(155,255);
// changes color of the irises (cool colors)
irisColorR = random(0,155);
irisColorG = random(155,200);
irisColorB = random(155,255);
// changes color of the hat (completely random)
hatColorR = random(0,255);
hatColorG = random(0,255);
hatColorB = random(0,255);
// changes color of the hat band (grey scale)
hatBandColorR = random(0,255);
hatBandColorG = hatBandColorR;
hatBandColorB = hatBandColorG;
}

In this project, I adapted my face from the week 1 project, and selected several variables to change randomly/within constraints. With a click of the mouse, my freckle moves across the screen, the sizes of the whites of my eyes, irises, and pupils change, the pointiness of my nose changes, my ears move up and down, my mouth changes size, my hair changes color (but sticks to warm colors), my irises change color (but stick to cool colors), my hat changes color randomly, and the band of my hat changes color along a grey scale.

I decided to use the basis of my face from the first project because I knew I would already have a LOT of difficulty figuring out the mechanics of this week’s task. And I did !!! I had no idea what was going on !!!!!!! So an immense enormous thank you to help from TAs Rain and Simin, who helped explain to me some concepts of how variables work and how declaring them and assigning them can be util for this and future tasks.

Furthermore, I adapted my code by adding in comments which I did not include in week one, cleaning up indentations and semicolons, and switching from hsl to rgb because I think it is a little easier to use and helpful for this project.

(((Again, THANK YOU TAs, I AM LESS HOPELESS WITH YOUR HELP)))

## Victoria Reiter-Looking Outwards-02

“Galapagos” by Karl Sims, 1997

A project I find extremely interesting is one titles “Galápagos” by Karl Sims, produced in 1997. Sims attended MIT and earned a degree in life sciences, then continued on to earn a graduate degree in visual studies from MIT’s Media Lab. He combines these areas of study very gracefully in his installation.

Sims’ installation “Galapagos” seeks to mimic the process of evolution through natural selection through a combination of computer-generated code and human interaction. Twelve monitors are set up, each with a foot pad in front. Each screen displays a very simple “creature” generated by code. The exhibition viewers are invited to step on the foot pad of whichever creature they find the most visually appealing, and the creatures not “selected” by the viewers disappear, and from the remaining creatures a new generation is produced using code to create random variations in such aspects as size, movement, color, number of arms, etc. As the process continues on, the creatures “evolve” to be more and more complex.

I would assume that this code contains many variables which are randomly assigned values in response to the weight of a person standing on the foot pad (much like how a code can respond to such things as a mouse click or a key being pressed on the keyboard). This concept clearly reflects Sims’ background, as he studied biological development, and integrated this into his master in visual studies, thus turning a scientific concept into interactive art.

This work inspires me, because it seems as though oftentimes there is a stark distinction between nature and computer science. Sims was able to bridge this gap by writing code which behaves the way nature behaves, in a way making empirical a concept that seems so vast and out of the hands of human control.

Link to further reading about the project as reviewed by Art New England and Wired also included.

## Victoria Reiter Project-01-Face

function setup() {
createCanvas(500, 500);
background(220);
background('hsl(155, 84%, 86%)');
text("~V's Self-Portrait~", 10, 15);
var a;
noStroke();
a = color('hsl(25, 100%, 86%)');
fill(a);
ellipse(250, 285, 270, 290);
ellipse(385,260,50,70);
ellipse(115,260,50,70);
var b;
noStroke();
b = color('hsl(14, 78%, 76%)');
fill(b);
ellipse(390,265,30,50);
ellipse(110,265,30,50);
triangle(255,331,240,350,220,325);
var c;
noStroke();
c = color('hsl(14, 78%, 85%)');
fill(c);
ellipse(185,335,60,25);
ellipse(315,335,60,25);
var d;
noStroke();
d = color('hsl(62, 100%, 76%)');
fill(d);
var e;
noStroke();
e = color('hsl(232, 27%, 43%)');
fill(e);
ellipse(250, 190, 300, 75);
ellipse(210,140,110,150);
ellipse(292,140,110,150);
var f;
noStroke();
f = color('hsl(232, 27%, 27%)');
fill(f);
rect(155,152.5,192,30);
var g;
stroke('hsl(223, 60%, 50%)');
g = color('hsl(0, 100%, 100%)');
fill(g);
ellipse(200,285,80,80);
ellipse(305,285,80,80);
stroke('hsl(0, 0%, 0%)');
arc(250,360,110,70,0,PI,CHORD);
var h;
noStroke();
h = color('hsl(166, 41%, 40%)');
fill(h);
ellipse(200,272,55,55);
ellipse(305,272,55,55);
var i;
noStroke();
i = color('hsl(1, 0%, 0%)');
fill(i);
ellipse(200,260,30,30);
ellipse(305,260,30,30);
var j;
noStroke();
j = color('hsl(29, 51%, 40%)');
fill(j);
ellipse(283,335,10,10);
}

Well, perhaps this is not the most technically-stunning or impressive thing in the universe, but I have to say throughout this project I kept audibly gasping at myself over the very fact that I was actually producing…anything. Literally four days ago I could not even fathom how it was physically possible to make numbers into pretty shapes, so the basic-ness of this project aside /I/ at least am thoroughly impressed with it! It is cute and allowed me to play around with various tools, such as figuring out a good way to choose colors! (I found a website you can kind of test colors out with then take the ‘coordinates'[?] for them and put them into your code here.) I started by drawing a very geometric picture, and writing a quick step-by-step of how I would order and overlap the shapes to get the end product. And I kind of just played around while I was at it!

## Victoria Reiter-Looking Outwards-01

Meandering River

Snapshot of image generated by the “Meandering River” project

Meandering River is an audio- visual installation put on display at the Funkhaus Berlin Sound Chamber between July 28 and July 30. Its designer is the Berlin-based studio for art and design onformative, which markets itself as existing at the boundary of art, design, and technology.

Meandering River features a visual presentation across multiple suspended screens, which is created in real-time as a reaction to an AI-generated audio soundscape. Berlin music group kling klang klong is credited with the initial inspiration of the music, by recording their interpretation of a soundscape inspired by the natural flow of a river. However, the soundscape utilized in the installation is actually composed by a computer, which used machine learning algorithms to “‘look’ not at the visuals but the raw data behind the visualization.” The main goal of onformative’s installation is to “create a ‘unique awareness of time,’ drawing us into what the studio describes as an ‘intense emotional journey’ that reminds us of nature’s beauty, its complexity, and capacity for slow, but dramatic change.”

What I find interesting about this project is how it seems to use technology to subvert the traditional understanding of what technology itself is. Technology is often seen as cold, unfeeling, artificial, and fast-paced, so to use it for the purpose of reflecting something emotional, natural, and slow, makes viewers rethink how technology can be purposed.

AI-generated soundscape for Meandering River

Link to a full description of the project and omformative’s website embedded above. Link to the Facebook event page here.

.