## NatalieKS-Project-02-Variable-Face

``````//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-02

function setup() {
createCanvas(640, 480);
background(126, 204, 213);
angleMode(DEGREES);
noStroke();
}

//variables for the color of the fish
var r = 222
var g = 157
var b = 207
//variables for tail and eye size
var tail1 = 60
var tail2 = 130
var eyeB = 20 //for black part of eye
var eyeW1 = 8 //for large white part of eye
var eyeW2 = 5 //for small white part of eye

function draw() {
fill(170, 220, 234);
//bubbles
ellipse(480, 20, 40, 40);
ellipse(450, 100, 50, 50);
ellipse(480, 165, 30, 30);
ellipse(440, 200, 10, 10);
//fish body
fill(r, g ,b);
ellipse(width/2, height/2, 160, 120);
//fish black eye
fill(0);
ellipse(380, 240, eyeB, eyeB);
//fish white eye
fill(255);
ellipse(377, 235, eyeW1, eyeW1); // large
ellipse(385, 245, eyeW2, eyeW2); //small
//mouth
fill(r, g, b);
ellipse(403, 238, 12, 12); //top
ellipse(403, 249, 12, 12); //bottom
//fish tails
rotate(-45);
translate(-210, -40);
ellipse(width/3, 320, tail1, tail2); //top
rotate(90);
translate(170, -400);
ellipse(width/3, 250, tail1, tail2); //bottom
}

function mousePressed() {
//when the mouse is pressed, the color changes
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);
//when mouse is pressed, tail and eye size changes
tail1 = random(35, 125);
tail2 = random(90, 175);
eyeB = random(10, 35);
eyeW1 = random(3, 20);
eyeW2 = random(1, 15);
clear();
background(126, 204, 213);
}
``````

sketch

For this project, the first thing that came to mind was a fish. I knew I wanted the color, eyes, and tail size to change, but the difficult part was getting the right proportions and the right angles. The initial shapes were pretty simple, because I figured experimenting with curves and rotate at the same time would be a little too complicated for me right now. I didn’t do any initial sketches, since the fish was only going to be a couple of ellipses. The image of the fish kept overlapping each other instead of replacing when I clicked my mouse, so I had to use the clear function to fix the problem; however, after THAT a chunk of the background was getting cleared too, so I filled in the background again at the very end to make it the way I wanted it to appear. I’m not sure if there was any other (better?) way to fix that problem, but this way seemed to work. All in all, I’m pretty proud of the final product!

## hyt-Project-02: Minion Faces

``````// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-02-minions-variation

var eyeSize = 50;
var mouthSize = 30;
var bodyWidth = 140;
var bodyHeight = 130;
var eyeballSize = 40;
var mouthAngle = 100;
var x = 0; //rgb value randomization

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

function draw() {
angleMode(DEGREES); // angle unit change
background(x, 194, 239); // blue and pink-ish backgrounds randomizing

// body
stroke(0);
strokeWeight(4.5);
fill(255, 221, 119); // yellow
arc(width / 2, height / 2, bodyWidth, bodyHeight, 180, 360, OPEN); // bald head part
rect(width / 2 - bodyWidth / 2, height / 2, bodyWidth, bodyHeight); // actual body

//pants?
fill(68, 100, 133); // denim blue
arc(width / 2, height / 2 + bodyHeight, bodyWidth, bodyHeight - 30, 0, 180, OPEN);

// eyes
var eyeLX = width / 2 - bodyWidth * 0.23; // Left eye's x position
var eyeRX = width / 2 + bodyWidth * 0.23; // Right eye's x position
fill(256); // white
ellipse(eyeLX, height / 2, eyeSize, eyeSize); //
ellipse(eyeRX, height / 2, eyeSize, eyeSize);

// eyeballs
fill(60, 40, 40); // brown
noStroke();
ellipse(eyeLX, height / 2, eyeballSize, eyeballSize);
ellipse(eyeRX, height / 2, eyeballSize, eyeballSize);

// mouth
fill(0);
arc(width / 2, height / 2 + bodyHeight - 50, mouthSize, mouthSize, 0, mouthAngle);

// hands (referenced from p5.js angleMode)
var a = atan2(mouseY - height / 2, mouseX - width / 2);
fill(255, 221, 119); // yellow

// left hand rotate!
translate(width / 2 - bodyWidth / 2, height / 2 + bodyHeight);
push();
rotate(a);
rect(0, - bodyHeight / 12, bodyHeight / 3, bodyHeight / 6); // arms
fill(0); // black
ellipse(bodyHeight / 3, 0, bodyHeight / 5, bodyHeight / 5); // black hands
pop();

// right hand rotate!
translate(bodyWidth, 0);
push();
rotate(a);
rect(0, - bodyHeight / 12, bodyHeight / 3, bodyHeight / 6); // arms
fill(0); // black
ellipse(bodyHeight / 3, 0, bodyHeight / 5, bodyHeight / 5); // black hands
pop();

}

// randomization when mouse clicks on the canvas
function mousePressed() {
bodyWidth = random(100, 180);
bodyHeight = random(90, 180);
eyeSize = random(30, 50);
eyeballSize = eyeSize - 12;
mouthSize = eyeSize;
mouthAngle = random(10, 220);
x = random(81, 225); // background rgb value change
}
``````

Now that we have entered week 2, there are many more functions and attributes that I have began to explore in p5.js, and based on those I decided to make a minion with animation-like facial features for my program. I didn’t particularly plan out the sketches on Illustrator, but rather drew out primitive shapes like ellipses and rectangles through trial and error. One of the more difficult process was the moving hands when the mouse hovers over, but once I figured out the coordinates and center for rotation it became much easier. Overall, I really enjoyed creating the project!

## creyes1-LookingOutwards-02

IBM’s The Cognitive Photobooth from Justin Au on Vimeo.

Back in April 2017, IBM hosted an “Art with Watson” exhibit in New York City, featuring a photobooth powered by the eponymous AI that would create a data visualization of the user’s personality in the form of a portrait. With IBM being a large company, I’m surprised that this is the first time I’m seeing this project, but there’s something charming and admirable about creating a warm, human experience with artificial intelligence.

The photobooth asks questions such as the user’s favorite artist or to tell them about their childhood friend, then using text-to-speech and tone analyzers, figures out the user’s personality traits to then be integrated into their portrait. While the personality analysis is entirely up to the AI, the portraits do bear the mark of their creators – icons representing each traits are premade, it’s the algorithm that determines where to place them, in what quantity, and at what size.

Usually personality tests feel somewhat arbitrary, requiring to choose between bubbles that say “Agree” or “Somewhat Agree,” but IBM’s Cognitive Photobooth seems to encourage its users to speak freely on topics that one wouldn’t expect a computer to understand, and it’s admirable to see that human element being worked into technology for an experience that’s not only wonderful, but welcoming.

Check out the project on Behance.

Shots of IBM’s Cognitive Photobooth

## rkondrup-project-02

``````/*Ryu Kondrup
rkondrup@andrew.cmu.edu
Section D
project-02*/
//feature variables

var eyeHeight = 30;
var eyeWidth = 15;
var noseyLiars = 50;
var mouthAgape = 30;
var hatHeight = 120;
var mouthWidth = 30;
var r, g, b;

function setup() {
createCanvas(640, 480);
r = random(150, 255);
g = random(150, 255);
b = random(150, 255);
}

function draw() {
background(26, 83, 92);
//colors
var darkDarkBlue = color(22, 74, 82);
var darkBlue = color(26, 83, 92);
var blue = color(78, 205, 196);
var white = color(248, 255, 247);
var red = color(255, 107, 107);
var yellow = color(255, 231, 109);

noStroke();

fill(darkDarkBlue);
rectMode(CENTER);

fill(darkDarkBlue);

fill(darkDarkBlue);
rectMode(CENTER);

fill(darkDarkBlue);
rectMode(CENTER);

fill(darkDarkBlue);

fill(darkDarkBlue);

fill(darkDarkBlue);
rectMode(CORNER);

//shirt
fill(yellow);
rectMode(CENTER);
rect(150, 390, 150, 200, 75);

//collar
fill(white);
ellipse(150, 320, 160, 50);

//hat top
fill(yellow);
rectMode(CENTER);
rect(150, 145, 120, hatHeight, 60);

fill(blue);
ellipse(150, 250, 150, 150);

//eyeball
fill(white);
ellipse(140, 240, eyeWidth, eyeHeight);

//brim of hat
fill(yellow);
rectMode(CENTER);
rect(150, 190, 150, 30, 15);

//hat wrap
fill(blue);
rect(150, 160, 120, 30);

//bow CENTER
fill(blue);
ellipse(160, 355, 40);
//bow right
ellipse(195, 355, 40, 60);
//bow right
ellipse(125, 355, 40, 60);

//mouth
fill(red);
rectMode(CORNER);
rect(170, 270, 30, mouthAgape, 15);

//noooose
fill(r, g, b);
rectMode(CORNER);
rect(190, 230, noseyLiars, 30, 15);

}

function mousePressed() {
eyeHeight = random(30, 70);
eyeWidth = random(15, 30);
noseyLiars = random(50, 500);
mouthAgape = random(30,90);
hatHeight = random(120, 300);
r = random(200, 255);
g = random(100, 255);
b = random(100, 255);

}
``````

Creating this interactive image was lots of fun.  I wanted to have a concept that made sense with the aim of the assignment, so I settled on a wooden boy as a subject. I also wanted to explore how facial expressions change with different sized facial features. I would like to further explore how features can be changed in ways other than through clicking that can add more depth and complexity to the image.

## aboyle-Sect D-Project 2-Variable Face

``````//Anna Boyle
//aboyle@andrew.cmu.edu
//Section D
//Project 2

//variables
var eyeWidth =20
var eyeHeight=20
var faceWidth=100
var faceHeight=100
var pupil=170
var noseWidth=5
var noseHeight=130
var nosePosition=80
var browthickness=2
var brow=80
var hairLength=150
var mouth;

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

function draw() {
background(157,242,171);
strokeWeight(0);
//hair
fill(71,44,21);
ellipse(195,80,faceWidth+20,faceHeight-20);
rect(115,110,160,hairLength);
//black rectangle gives hair more depth
fill(0);
rect(130,110,130,hairLength);
//shirt
fill(0,204,204);
ellipse(195,230,150,50);
rect(120,230,140,190);
fill(6,142,142);
rect(145,270,7,150);
//pants
fill(19,38,112);
rect(140,420,120,220);
fill(0)
rect(195,450,7,220)
//neck
fill(142,88,51);
rect(175,150,40,70);
//button
fill(114,4,4);
ellipse(400,330,100);
fill(255,0,0);
//gives the effect of button being pushed
if (mouseIsPressed)
ellipse(400,330,100);
else
ellipse(400,320,100);
fill(198,147,111);
ellipse(195, 120,faceWidth,faceHeight);
//hands
rect(120,420,35,40);
//slight change makes button movement look more natural
if (mouseIsPressed)
rect(385,304,33,38);
else
rect(385,304,35,40);
//ears
strokeWeight(0);
ellipse(190-faceWidth/2,120,30);
ellipse(200+faceWidth/2, 120, 30);
//nose
fill(142,88,51);
triangle(190,nosePosition,190-noseWidth,noseHeight,190+noseWidth,noseHeight);
//eyes
strokeWeight(2);
fill(256);
ellipse(210,95,eyeWidth,eyeHeight);
ellipse(170,95,eyeWidth,eyeHeight);
//pupils
fill(0);
ellipse(pupil,95, eyeWidth/2, eyeHeight/2);
ellipse(pupil+40, 95, eyeWidth/2, eyeHeight/2);
//mouth
noFill()
//switches the mouth between smile and straight
if (mouth<=0.5)
curve(200,50,170,160,215,160,200,50);
else
line(170,160,215,160);
//earrings
fill(236,200,21);
strokeWeight(0);
rect(183-faceWidth/2, 127, 10,10);
rect(197+faceWidth/2,127,10,10);
//eyebrows
strokeWeight(browthickness);
line(155, 75, 185, brow);
line(195,brow,225,75);
//arm
fill(0,204,204);
strokeWeight(0);
rect(300,310,85,30);
translate(width/5, height/5);
rotate(PI/3.0);
rect(165,-100,120,30);
}

function mousePressed(){
faceWidth=random(130,170);
faceHeight=random(150,190);
eyeWidth=random(10,37);
eyeHeight=random(15,35);
pupil=random(165,175);
noseWidth=random(5,10);
noseHeight=random(130,150);
nosePosition=random(95,120);
browthickness=random(2,9);
brow=random(60,92);
hairLength=random(75,230);
mouth=random(0,1)
}
``````

I thought this was a cool assignment! I had a lot of fun playing with the variables, even though I couldn’t add as many details as last time. For some reason when I refresh the page the face looks pretty weird, but once I start clicking the mouse it looks like how I want it to.

I also decided to give my subject apparent agency over her own face changes by making it look like she’s pressing a button. Though rather simple, I hope it’ll help me remember the difference between mousePressed and mouseIsPressed in the future.

In retrospect, I wish I had done more with curves and more complicated shapes, but overall I’m okay with how it turned out.

## daphnel-Looking Outwards-03

Jewelry can be created through several different forms of arts and devices; however, these pieces of jewelry seen in the photo above were made through 3D printing! I find this incredibly fascinating because I’ve seen many designers and inventors create things such as the Voxel Chair, but I’ve never seen 3D printing used in such a way for fashion. These pieces of jewelry were made by Theresa Burger from Morpheus. There is no specific date or title for these pieces of rings and earrings since Morpheus custom manufactures jewelry based on their client’s needs and wants. These small seashell design based earrings show only a small glimpse what Morpheus’s designers can create. I admire the fact that these designers are learning how to incorporate new machines and tools such as the 3D printers to generate new and different types of fashion into the industry.

## creyes1-Project-02-Variable-Face

``````//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-02 Variable Faces

var backgroundR = 255;
var backgroundG = 250;
var backgroundB = 221;
var modelNo = "24601";
var antennaHeight = 50;
var antennaWidth = 10;
var antennaColorR = 204;
var antennaColorG = 86;
var antennaColorB = 34;
var bodyWidth = 100;
var earWidth = 30
var earHeight = 50
var eyeWidth = 30;
var eyeHeight = 30;

function setup() {

createCanvas(480, 640);
rectMode(CENTER);
noStroke();

}

function draw() {

background(backgroundR, backgroundG, backgroundB);

//Creates a line of text with a randomized model number
fill(119, 124, 130);
textFont("Courier New", 16);
textStyle(BOLD);
text("Model No. " + modelNo, 25, 31);

fill(220);

//Antenna - draws a rectangle relative to head at a random length
var antennaTop = height/2 - headHeight;
push();
rectMode(CORNER);
rect(width/2 - antennaWidth/2, height/2 - headHeight,
antennaWidth, antennaHeight);

//Antenna Light - draws a circle on top of the antenna,
//                with a randomly selected fill color
fill(antennaColorR, antennaColorG, antennaColorB);
ellipse(width/2, height/2 - headHeight, 50, 50);
pop();

fill(100, 104, 109); //Darker gray

//Body - draws two overlapping rounded rectangles
//       at a random size relative to the head
push();
rectMode(CORNER);
rect(width/2 - bodyWidth/2, height/2 + headHeight*.75,
bodyWidth, height/2, 20, 20, 20, 20);

fill(119, 124, 130); //Lighter gray
rect(width/2 - bodyWidth/2, height/2 + headHeight*.75,
bodyWidth*.9, height/2, 20, 20, 20, 20);
pop();

//Head - draws two overlapping rounded rectangles at a random size
fill(100, 104, 109);

push();
rectMode(CORNER);
fill(119, 124, 130);
pop();

//Ears - draws two rounded rectangles at a random size,
var earLX = width/2 - headWidth*.65;
var earRX = width/2 + headWidth*.65;
fill(119, 124, 130);
rect(earLX, height/2, earWidth, earHeight, 10, 10, 10, 10);
fill(100, 104, 109);
rect(earRX, height/2, earWidth, earHeight, 10, 10, 10, 10);

//Eyes - draws two ellipses at a random size, position relative to head
var eyeLX = width/2 - headWidth/4;
var eyeRX = width/2 + headWidth/4;
var eyeY = height/2 - headHeight/4;
fill(240);
ellipse(eyeLX, eyeY, eyeWidth, eyeHeight);
ellipse(eyeRX, eyeY, eyeWidth, eyeHeight);

//Mouth - draws a rounded rectangle at a random size,
var mouthY = height/2 + headHeight/4;
rect(width/2, mouthY, mouthWidth, mouthHeight, 20, 20, 20, 20);

}

//Generates a random string of 6 numbers to create a model number for each robot
function makeid() {

var modelNo = "";
var possible = "0123456789";

for (var i = 0; i < 5; i++)
modelNo += possible.charAt(Math.floor(Math.random() * possible.length));

return modelNo;
//Credit: https://stackoverflow.com/a/1349426 - user csharptest.net

}

function mousePressed() {

//Selects a random background color within certain parameters on mouse-click
backgroundR = random(221, 255);
backgroundG = random(221, 255);
backgroundB = random(221, 255);

modelNo = makeid(); //Creates a new model number

//Antenna Light Colors, generates a random color on mouse-click
antennaColorR = random(0, 256);
antennaColorG = random(0, 256);
antennaColorB = random(0, 256);

eyeWidth = random(25, 60);
eyeHeight = random(25, 60);

}
``````

My previous project involved a lot of pixel-perfect arc alignments, so I wanted to just work with simple shapes this time around to really focus on the code. A lot of the process was trial-and-error, basing the rest of the body around the robot’s head. Additionally, most of the randomization is set to be a certain proportion relative to the head so that the randomized elements don’t get too out of control and start forming a gray blob instead of communicating a robot.

## Chickoff-Project-02-Section D

``````//Cora Hickoff
//Section D 9:30AM-10:20AM
//chickoff@andrew.cmu.edu
//Project-02

var faceWidth = 350;
var faceHeight = 300;
var eyeSize = 20;
var pupilSize = 9;
var beakSize = 50;
var x = 170;

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

function draw() {
background(130,180,200);

//face
strokeWeight(0);
fill(235,235,235);
ellipse(width / 2, height / 2, faceWidth,  faceHeight);

//body
strokeWeight(0);
fill(235,235,235);
ellipse(340,430,270,250);

//beak
strokeWeight(0);
fill(255,220,25);
rect(width / 10, height / 2, x, beakSize);

//feather 1
strokeWeight(0);
fill(220,220,220);
ellipse(370,440,20,100);

//feather 2
strokeWeight(0);
fill(200,200,200);
ellipse(380,440,20,120);

//feather 3
strokeWeight(0);
fill(180,180,180);
ellipse(390,440,20,100);

//feather 4
strokeWeight(0)
fill(200,200,200);
ellipse(400,440,20,90);

//eyes
strokeWeight(2);
fill(250,250,210);
var eyeLX = width / 3 - faceWidth * 0.12;
var eyeRX = width / 2 + faceWidth * 0.25;
ellipse(eyeLX, height / 2, eyeSize, eyeSize);
ellipse(eyeRX, height / 2, eyeSize, eyeSize);

//pupils
strokeWeight(2);
fill(0,0,0);
var pupilLX = width / 3 - faceHeight * 0.12;
var pupilRX = width / 2 + faceWidth * 0.25;
ellipse(pupilLX, height / 2, pupilSize, pupilSize);
ellipse(pupilRX, height / 2, pupilSize, pupilSize);

}

function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges. For example,
// 'faceWidth' gets a random value between 75 and 150.

faceWidth = random(200, 350);
faceHeight = random(200, 300);
eyeSize = random(20, 30);
pupilSize = random(7,11);
beakSize = random(30,50);
beakWidth = random(10,50);

}``````

When creating this project, I was originally hoping to make a dog of some sort. I made a lot of sketches for this, trying to simplify the shapes. However I ended up changing my direction after a happy accident. When I wrote the code to create a rectangle, it turned out to be yellow because of the color variables I had randomly set. I immediately thought it looked like a seagull’s beak and so I went with it!

## danakim-Section D-Looking Outwards-02

Ian Cheng’s Emissary Sunsets The Self (2017) is the last work in his Emissaries trilogy (2015-2017). Emissary Sunsets The Self is an open ended live digital simulation that explores the complex themes of evolution, human behavior, and the history of consciousness. These themes were derived from Cheng’s background in cognitive science. Cheng utilizes a video game engine to create unpredictable animated worlds. He employs computer generated simulations, similar to those used in predictive technologies, to create these complex settings. Each character in this simulated world is equipped with custom AI that reacts to the surrounding environment as well as other characters within the simulated world.

The idea that a computer generated simulation could basically react to itself is very compelling yet a bit disturbing. The artist himself does not even know what outcomes would be produced from this simulation. Being able to learn more about the human condition through this technology is ironic. This irony gives the simulation an even more mysterious personality.

iancheng.com

## jennyzha – project 02 – variable faces

``````var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var r = 100;
var b = 100;
var g = 100;
var e1 = 100;
var e2 = 100;
var e3 = 100;
var mouthSizeW = 5;
var mouthSizeH = 10;

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

function draw() {
background(180);
fill(r, b, g);
ellipse(width/2, height/2, faceWidth, faceHeight);
var eyeLX = width/2 - faceWidth*0.25;
var eyeRX = width/2 + faceWidth * 0.25;
fill(e1, e2, e3);
ellipse(eyeLX, height/2, eyeSize, eyeSize);
ellipse(eyeRX, height/2, eyeSize, eyeSize);
var mouth = width/2
ellipse(mouth, height/2+30, mouthSizeW, mouthSizeH)
}

function mousePressed() {
faceWidth = random(75,150);
faceHeight = random(100,200);
eyeSize = random(10,30);
r = random(0, 255);
b = random(0, 255);
g = random(0, 255);
e1 = random(0, 255);
e2 = random(0, 255);
e3 = random(0, 255);
mouthSizeW = random(5, 50);
mouthSizeH = random(10, 55);
}
``````

While making this project I decided to play with color so I assigned random variables for the eyes and mouth and the face.