Category: Project-02-Variable-Face

Yingying Yan Project-02-Variable-Face

I was just trying things out. Every time I run the code, something funny pops up, so I decided to do weird, ugly, and funny faces. I had a lot of fun playing with this.

sketch

//variables layout
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var num = 4;
var num2 = 6;
var numNose = 8;
var mouthX = 30;
var mouthY = 50;
var Red = 100;
var earX = 10;
var earY = 20;
var color = 254

function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(223,240,230);

    //ears
    fill (6,167,181);
    var earLX = width / 2 - faceWidth / 2;
    var earRX = width / 2 + faceWidth / 2;
    ellipse(earLX, height / 2, earX, earY);
    ellipse(earRX, height / 2, earX, earY);


    //face, changes shape
    fill (color,192,79);
    
    if (faceWidth > 250) {
    	faceShape = ellipse (width / 2, height / 2, faceWidth, faceHeight);
    } else {
        faceShape = rect(width / 2 - faceWidth / 2 , height / 2 - faceHeight / 2, faceWidth,  faceHeight);
    }

    //eyes, changes size
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var eyeY = height / 2 - faceWidth * 0.12;
    ellipse(eyeLX, eyeY, eyeSize, eyeSize + num);
    ellipse(eyeRX, eyeY, eyeSize, eyeSize + num);

    //pupils, always inside the eyes
    fill(0);
    ellipse(eyeLX + num, eyeY, eyeSize / 2, eyeSize / 3+ num);
    ellipse(eyeRX + num, eyeY, eyeSize / 2, eyeSize / 3+ num);

    //mouth
    fill(233,111,41);
    var RectX = width / 2 - mouthX / 2;
    rect(RectX + num2, height/2 + 15, mouthX, mouthY);

    //tongue, changes color and move in relationship to the mouth
    fill (Red, 20, 40);
    rect(RectX + num2, height/2 + 15 + 2 * mouthY / 3, mouthX, mouthY / 3);

    //teeth changes x according to the mouth
    fill(250);
    rect(RectX + num2 +10, height/2 + 15, 5, 10);
    rect(RectX + num2 +20, height/2 + 15, 5, 10);

    //nose, changes how long the nose is
    fill (19,71,125);
    triangle(width / 2 - 4, height / 2 + 4, width / 2 + 4, height / 2 + 4, width / 2, height / 2 - numNose);


 
 }

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(100, 350);
    faceHeight = random(200, 350);
    eyeSize = random(10, 50);
    num = random(-5, 5);
    num2 = random(0,5);
    numNose = random(10, 60);
    mouthX = random(40, 60);
    mouthY = random(30, 60);
    Red = random(90, 250);
    earX = random(15, 100);
    earY = random(40, 80);
    color = random(200,250);
}

Sophie Chen – Project 02 – Variable Face

sketch

var faceSize = 210;
var eyeType = 2;
var noseShape = 1;
var earShape = 1;
var mouthType = 1;
var colorG = 103;
var colorB = 135
 
function setup() {
    createCanvas(480, 640);
    
}
 
function draw() {
    background(189, 200, 234);
    //head
    fill(255, colorG-30, colorB-40);
    ellipse(width / 2, height / 2, faceSize, faceSize);
    fill(245, 155, colorG, 80);
    arc(width / 2, height / 2, faceSize, faceSize, PI, TWO_PI);
  
    //eyes
    if (eyeType == 1){
        fill(0);
        noStroke();
        var eyeLX = width/2-faceSize*0.15;
        var eyeRX = width/2+faceSize*0.15;
        ellipse(eyeLX, height/2, 10, 10);
        ellipse(eyeRX, height/2, 10, 10);
        fill(255, 255, 255);
        ellipse(eyeLX + 3, height/2 - 1, 3, 3); 
        ellipse(eyeRX + 3, height/2 - 1, 3, 3); 
    } else if (eyeType == 2){
        fill(0);
        noStroke();
        var eyeLX = width/2-faceSize*0.15;
        var eyeRX = width/2+faceSize*0.15;
        rect(eyeLX, height/2, 12, 10);
        rect(eyeRX, height/2, 12, 10);
        strokeWeight(2);
        stroke(0);
        fill(0);
        line(eyeLX+1, height/2, eyeLX, height/2-3);
        line(eyeLX+4, height/2, eyeLX+3, height/2-3);
        line(eyeRX+1, height/2, eyeRX, height/2-3);
        line(eyeRX+4, height/2, eyeRX+3, height/2-3);

    } else if (eyeType == 3){
        fill(0);
        stroke(255, 255, 255);
        strokeWeight(2);
        var eyeLX = width/2-faceSize*0.15;
        var eyeRX = width/2+faceSize*0.15;
        ellipse(eyeLX, height/2, 20, 20);
        ellipse(eyeRX, height/2, 20, 20);
    }


    //nose
    if (noseShape == 1){
        fill(230, 223, 255);
        noStroke();
        ellipse(width / 2, height / 2 + 3, 20, 15);
    } else if (noseShape == 2){
        fill(255, 255, 184);
        noStroke();
        triangle(width / 2 - 10, height / 2 + 3, width / 2 + 10, height / 2 + 3, width / 2, height / 2 + 13);
    }
    
    //ears
    if (earShape == 1){
        strokeWeight(7);
        stroke(155, 245, 204);
        fill(155, 255, 234);
        line(240, 250, 240, 190);
        ellipse(width/2+50, 205, faceSize/2.5, faceSize/5);

    } else if (earShape == 2){
        stroke(255, colorG, colorB);
        strokeWeight(20);
        fill(250, colorG-20, colorB-10);
        ellipse(190, 205, faceSize/5, faceSize/1.7);
        ellipse(290, 205, faceSize/5, faceSize/1.7);
    }
    

    //mouth
    if (mouthType == 1){
        noFill();
        stroke(140, colorG, 230);
        strokeWeight(3);
        arc(width/2 - 6.7, height/1.9, faceSize/15, faceSize/16, TWO_PI, PI);
        arc(width/2 + 6.7, height/1.9, faceSize/15, faceSize/16, TWO_PI, PI);
    } else if (mouthType == 2){
        noFill();
        stroke(140, colorG, 230);
        strokeWeight(3);
        arc(width/2, height/1.9, faceSize/12, faceSize/12, TWO_PI, PI);
    }
    

    //cheeks
    fill(245, 245, 245);
    noStroke();
    ellipse(300, 345, faceSize / 42, faceSize / 42);
    ellipse(290, 355, faceSize / 42, faceSize / 42);
    ellipse(280, 345, faceSize / 42, faceSize / 42);
    ellipse(185, 345, faceSize / 42, faceSize / 42);
    ellipse(175, 355, faceSize / 42, faceSize / 42);
    ellipse(170, 345, faceSize / 42, faceSize / 42);

}
 
function mousePressed() {
    faceSize = random(160, 240);
    eyeType = int(random(1, 4));
    colorG = random(150, 245);
    colorB = random(150, 225);
    noseShape = int(random(1,3));
    earShape = int(random(1,3));
    mouthType = int(random(1,3));
}

I found this a lot more challenging than the last project, but I really enjoyed the process and I think I improved a lot through this assignment. The hardest part for me was the ears, and I decided to make it into a little stem so the face can into an apple/orange and a bunny which worked out well. I tried to incorporate curve vertex into this but unfortunately it didn’t work out, hopefully I will have a better grasp next week.

 

yinjiet-Project-02-Variable-Face

In this exercise, I tried to present a life cycle from  young age to old. The three aspects of variability are the color of the hair, movement of the ears, and the size of the face.

project-02

//Jacky Tian
//Section B
//yinjiet@andrew.cmu.edu
//project-01


function setup() {
    createCanvas(480, 640);
    
}
var x1 = 175;
var y1 = 320;
var x2 = 425;
var y2 = 320;
var count = 0;
var eyecolor = 0;
var facew = 250;
function draw() {
	background(220);
	strokeWeight(1);
	stroke(0, 0, 0);
	fill(236, 212, 190);
	ellipse(x2, y1, 25, 50);
	ellipse(x1, y1, 25, 50);

	strokeWeight(0);
	stroke(0, 0, 0);
	fill(236, 212, 190);
	rect(270, 460, 60, 60),
	
	strokeWeight(0);
	stroke(0, 0, 0);
	fill(236, 212, 190);
	ellipse(300, 320, facew, 300);

	fill(eyecolor)
	quad(175, 270, 280, 270, 308, 160, 210, 185);
	quad(320, 270, 425, 270, 390, 185, 292, 160);
	
	strokeWeight(4);
	stroke(212, 175, 55);
	fill(255);
	rect(200, 275, 80, 60);
	rect(320, 275, 80, 60);
	line(280, 300, 320, 300);
	line(175, 285, 200, 300);
	line(425, 285, 400, 300);

	strokeWeight(1);
	stroke(0, 0, 0);
	fill(236, 212, 190);
	triangle(300, 350, 290, 375, 310, 375);

	strokeWeight(1);
	stroke(0, 0, 0);
	noFill();
	arc(300, 415, 80, 80, 0, PI + QUARTER_PI, OPEN);

	stroke(0, 0, 0);
	fill(0, 0, 0);
	quad(200, 520, 400, 520, 500, 600, 100, 600);

	stroke(0, 0, 0);
	fill(51);
	rect(200, 580, 80, 100);
	
}
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.
	if(count % 2 == 0){
		y1 -= 10;
	}else{
		y1 += 10;
	}
	eyecolor += 15;
	eyecolor = eyecolor % 255
	count += 1;
	facew -= 5; 
    // x1 = x1 - 5;
    // x2 = x2 + 5;

}

Xiaoying Meng- Project 2- Variable Faces

sketch

var earSize = 80;
var faceWidth = 300;
var faceHeight = 155;
var blushSize = 90;
var eyeSize =70;
var mouthHeight=122;
var y = 179;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(0,0,0);
var earLX = width / 2 - faceWidth /2;
var earRX = width / 2 + faceWidth /2;



//ears
fill(0,0,0);
stroke(255,255,255);
strokeWeight(6);
ellipse(earLX, 180, earSize, earSize);
ellipse(earRX, 180, earSize, earSize);

//insideear
fill(255,255,255);
noStroke();
ellipse(earLX, 180, earSize/2, earSize/2);
ellipse(earRX, 180, earSize/2, earSize/2);

//head
stroke(255,255,255);
strokeWeight(6);
fill(0,0,0);
beginShape();
  curveVertex(87, 480); // the first control point
  curveVertex(87, 480); // is also the start point of curve
  curveVertex(115, 410);
  curveVertex(earLX, 200);
  curveVertex(width/2, faceHeight);
  curveVertex(earRX, 200);  
  curveVertex(525, 410);
  curveVertex(553, 480);// the last point of curve
  curveVertex(553, 480); // is also the last control point
  endShape();
//mouth
fill(255,255,255);
noStroke();
var mouthY = height-faceHeight+faceHeight/3;
ellipse(width/2,mouthY,170,mouthHeight);


//blush
fill(228,31,41);
noStroke();
ellipse(earLX-5,mouthY-5, blushSize,blushSize);
ellipse(earRX+5, mouthY-5,blushSize,blushSize);

//eyes
fill(255,255,255);
noStroke();
ellipse(width/2-80,mouthY-100,eyeSize,eyeSize);
ellipse(width/2+80,mouthY-100,eyeSize,eyeSize);

//insideeyes
fill(0,0,0);
noStroke();
ellipse(width/2-80,mouthY-100,eyeSize/3,eyeSize/3);
ellipse(width/2+80,mouthY-100,eyeSize/3,eyeSize/3);

//nose
var noseY =mouthY-mouthHeight/2+10;
quad(width/2, noseY, width/2+20, noseY+10, width/2, noseY+30,width/2-20, noseY+10);

//mouthinside
ellipse(width/2,mouthY+25,mouthHeight/5,mouthHeight/3);

//eyebrows
stroke(255,255,255);
noFill();
strokeWeight(6);
arc(width/2-80, mouthY-y, 40, 30, PI+1/3, TWO_PI-1/3);
arc(width/2+80, mouthY-y, 40, 30, PI+1/3, TWO_PI-1/3);
}

function mousePressed(){
	faceWidth = random(280, 310);
    faceHeight = random(140, 160);
    earSize = random(50, 90);
    blushSize = random(0,110);
    eyeSize =random(60,90);
    mouthHeight = random(100,130);
    y =random(150,180);
}

I first found a picture of Kumamon online and follow the basic shapes of its features. It’s a very interesting project for me. I started by locating the head, using three points on the top as variables. And go from there to describe its other features.

Sean McGadden Project – 02

Variable Face

sketch

/*Sean McGadden
Section C @ 1:30
smcgadde@andrew.cmu.edu
project - 02 */

//Variable Face

//Simple
var width = 640
var height = 480

//Face
var faceWidth = 200;
var faceHeight = 300;
var faceR = 65
var faceG = 82
var faceB = 244 

//Eyes
var eyeSize = 20;
var eyeR = 244
var eyeG = 211
var eyeB = 65

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

function draw() {
    background(66, 244, 143);
    
    //Face
    fill(faceR, faceG, faceB)
    rect(width / 3, height / 3, faceWidth,            faceHeight);
    
    //Eyes
    fill (eyeR, eyeG, eyeB)
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
}

function mousePressed() {
    
    //clicking changes position, color and size of face and eyes. 
    faceWidth = random(150, 300);
    faceHeight = random(200, 300);
    width = random (500, 640)
    height = random (400, 480)
    eyeSize = random(10, 40);
    eyeR = random(148, 244)
    eyeG = random(65, 211)
    eyeB = random(65, 244)
    faceR = random(62, 65)
    faceG = random(65, 82)
    faceB = random(91, 244)
}

 

The variable face was very interesting to play around with. Although I took few risks in my sketch I feel I learned a lot more about variables and their implementation. I want to make more intricate interactive pieces in future projects. My project makes computational changes in color, size and position of the face and eyes. Using RGB and canvas coordinate randomization with a few variables, I was able to explore further how faces can be differently perceived even with only small changes.

Here is an original concept sketch that I was unsuccessful in replicating after some attempts.

September 7 2018

Joanne Lee – Project 02

Joanne Lee – Project 02

// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-02
var eyeType = 1;
var face = 250;
var eyeY = (320+(320-0.15*face))/2;
var brow = 1;
var browY1 = eyeY-0.10*face;
var browY2 = eyeY-0.10*face;
var browStroke = 8;
var stacheR = 255;
var stacheG = 255;
var stacheB = 255;

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

function draw() {
  background (254, 203, 212);
  var rightEyeX = (240+(240+0.3*face))/2;
  var leftEyeX = (240+(240-0.3*face))/2;
  var eyeColor = "rgb(0,0,0)";
  var curveAnchorY = (eyeY+0.05*face)+50;

  // ears
  var rightEarX = 240-0.33*face;
  var leftEarX = 240+0.33*face;
  var earY = 320-0.32*face;
  var earSize = 70;

  strokeWeight(5);
  stroke(0);
  fill(223,155,58);
  //right brow
  ellipse(rightEarX,earY,earSize,earSize);
  //left brow
  ellipse(leftEarX,earY,earSize,earSize);

  // face
  ellipse(240,320,face,0.85*face);

  // eyebrows
  var leftBrowX1 = leftEyeX-0.09*face;
  var leftBrowX2 = leftEyeX+0.07*face;
  var rightBrowX1 = rightEyeX-0.07*face;
  var rightBrowX2 = rightEyeX+0.09*face;

  strokeWeight(browStroke);
  //left brow
  line(leftBrowX1,browY1,leftBrowX2,browY2);
  //right brow
  line(rightBrowX1,browY2,rightBrowX2,browY1);

  // eyes
  strokeWeight(0);
  fill(eyeColor);
  if (eyeType == 1) { // circle eyes
    var eye1Size = 0.06*face;

    // right eye
    ellipse(rightEyeX,eyeY,eye1Size,eye1Size);
    // left eye
    ellipse(leftEyeX,eyeY,eye1Size,eye1Size);
  }
  else if (eyeType == 2) { // oval eyes
    var eye2SizeW = 0.06*face;
    var eye2SizeH = 0.12*face;

    // right eye
    ellipse(rightEyeX,eyeY,eye2SizeW,eye2SizeH);
    // left eye
    ellipse(leftEyeX,eyeY,eye2SizeW,eye2SizeH);
  }
  else if (eyeType == 3) { // laughing eyes
    var leftEyeX1 = leftEyeX-0.04*face;
    var leftEyeX2 = leftEyeX+0.04*face;
    var leftEyeY1 = eyeY-0.03*face;
    var leftEyeY2 = eyeY+0.03*face;
    var rightEyeX1 = rightEyeX+0.04*face;
    var rightEyeX2 = rightEyeX-0.04*face;
    var rightEyeY1 = eyeY-0.03*face;
    var rightEyeY2 = eyeY+0.03*face;

    stroke(eyeColor);
    strokeWeight(8);

    // left eye
    line(leftEyeX1,leftEyeY1,leftEyeX2,eyeY);
    line(leftEyeX2,eyeY,leftEyeX1,leftEyeY2);
    // right eye
    line(rightEyeX1,rightEyeY1,rightEyeX2,eyeY);
    line(rightEyeX2,eyeY,rightEyeX1,rightEyeY2);
  }
  else if (eyeType == 4) { // dead eyes
    var leftEyeX1 = leftEyeX-0.05*face;
    var leftEyeX2 = leftEyeX+0.05*face;
    var leftEyeY1 = eyeY-0.04*face;
    var leftEyeY2 = eyeY+0.04*face;
    var rightEyeX1 = rightEyeX-0.05*face;
    var rightEyeX2 = rightEyeX+0.05*face;
    var rightEyeY1 = eyeY-0.04*face;
    var rightEyeY2 = eyeY+0.04*face;

    stroke(eyeColor);
    strokeWeight(8);

    // left eye
    line(leftEyeX1,leftEyeY1,leftEyeX2,leftEyeY2);
    line(leftEyeX2,leftEyeY1,leftEyeX1,leftEyeY2);
    // right eye
    line(rightEyeX1,rightEyeY1,rightEyeX2,rightEyeY2);
    line(rightEyeX2,rightEyeY1,rightEyeX1,rightEyeY2);

  }

  // nose
  var noseX = 240;
  var noseY = 320+0.05*face;
  var noseSize = 0.1*face;
  ellipse(noseX,noseY,noseSize,noseSize);

  // mustache
  var leftStacheX = noseX-0.07*face;
  var rightStacheX = noseX+0.07*face;
  var stacheY = noseY+0.06*face;
  var stacheSizeW = 1.7*noseSize;
  var stacheSizeH = 1.4*noseSize;

  strokeWeight(0);
  fill(stacheR,stacheG,stacheB);
  //left stache
  ellipse(leftStacheX,stacheY,stacheSizeW,stacheSizeH);
  //right stache
  ellipse(rightStacheX,stacheY,stacheSizeW,stacheSizeH);
}

function mousePressed() {
  face = random(250,400)
  eyeType = int(random(1,5));
  browStroke = random(4,10);
  brow = int(random(1,3));
  if (brow == 1) { // concerned brows
    browY1 = eyeY-0.10*face;
    browY2 = random(250,260);
  }
  else { // angry brows
    browY2 = eyeY-0.10*face;
    browY1 = random(250,260);
  }
  stacheR = random(200,255);
  stacheG = random(100,255);
  stacheB = random(150,255);
}

At first, I planned to do variable faces regarding iPhone emojis. However, I decided to hone in more on my favorite emoji — KakaoTalk’s character, Ryan. My variable starts off as the traditional character’s face and then varies. I was curious if the character would still be noticeable with different features and emotions.

Category Project-02-Variable-Face

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//project-02-Variable-Face

var body_width = 240;
var body_height = 250;
var face_width = 190;
var face_height = 200;
var eye_w = 35;
var eye_h = 0;
var beak_w = 20;
var beak_h = 20;
var beak_dir = 2;
var brow_outer_h = 110;
var brow_inner_h = 100;
var brow_width = 5;
var flipper_right_angle = 0;
var flipper_left_angle = (10/9);
var button_unit = 20;

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

function draw() {
  background(61, 247, 247);
  noStroke();

  //black parts of body
  fill(0, 0, 0);
  ellipse(320, 270, body_width, body_height);
  ellipse(320, 150, face_width, face_height);

  //flippers
  fill(0, 0, 0);
  if(flipper_right_angle < 0){
    flipper_right_angle = (2+flipper_right_angle);
  }
  arc(350, 270, 350, 350, flipper_right_angle*PI, (flipper_right_angle*PI)+(PI/16));
  arc(290, 270, 350, 350, flipper_left_angle*PI, (flipper_left_angle*PI)+(PI/16));


  //white parts of body
  fill(255, 255, 255);
  ellipse(320, 270, body_width-60, body_height-50);
  ellipse(320-(face_width/6), 150, face_width/3, face_height*3/5);
  ellipse(320+(face_width/6), 150, face_width/3, face_height*3/5);
  rect(300, 150, 60, 40);

  //feet
  fill(255, 181, 102);
  ellipse(320-(body_width/5), 270+body_height/2, 60, 30);
  ellipse(320+(body_width/5), 270+body_height/2, 60, 30);

  //eyes
  fill(0, 0, 0);
  ellipse(320-(face_width/6), 140, 30, 30);
  ellipse(320+(face_width/6), 140, 30, 30);
  fill(255, 255, 255);
  ellipse(320-(face_width/6), 150, 40, 20)
  ellipse(320-(face_width/6), 140, eye_w, eye_h)
  ellipse(320+(face_width/6), 150, 40, 20)
  ellipse(320+(face_width/6), 140, eye_w, eye_h)

  //blush
  fill(255, 170, 170);
  ellipse(320-(face_width/6), 150, 20, 15);
  ellipse(320+(face_width/6), 150, 20, 15); 

  //beak
  fill(255, 181, 102);
  if(beak_dir <= 1){
    beak_dir = 2;
    beak_w = -beak_w;
  }
  triangle(320, 150, 320, 150+beak_h, 320+beak_w, 150+(beak_h/2))

  //eyebrows 
  fill(0, 0, 0);
  quad(320-(face_width/6)-15, brow_outer_h, 320-(face_width/6)+15, brow_inner_h, 320-(face_width/6)+15, brow_inner_h+brow_width,
       320-(face_width/6)-15, brow_outer_h+brow_width);
  quad(320+(face_width/6)-15, brow_inner_h, 320+(face_width/6)+15, brow_outer_h, 320+(face_width/6)+15, brow_outer_h+brow_width,
       320+(face_width/6)-15, brow_inner_h+brow_width);
  
  //buttons
  fill(0, 0, 0);
  ellipse(320, 230, button_unit, button_unit);
  ellipse(320, 270, button_unit, button_unit);
  ellipse(320, 310, button_unit, button_unit);

  //whites inside the buttons
  fill(255, 255, 255);
  ellipse(320-(button_unit/8), 230-(button_unit/8), button_unit/4, button_unit/4);
  ellipse(320+(button_unit/8), 230+(button_unit/8), button_unit/4, button_unit/4);
  ellipse(320-(button_unit/8), 270-(button_unit/8), button_unit/4, button_unit/4);
  ellipse(320+(button_unit/8), 270+(button_unit/8), button_unit/4, button_unit/4);
  ellipse(320-(button_unit/8), 310-(button_unit/8), button_unit/4, button_unit/4);
  ellipse(320+(button_unit/8), 310+(button_unit/8), button_unit/4, button_unit/4);
}

function mousePressed() {
  //changes emotions every time mouse is clicked
  body_width = random(220, 260); 
  body_height = random(230, 270); 
  face_width = random(170, 210); 
  face_height = random(180, 220); 
  eye_w = random(30, 40); 
  eye_h = random(12, 25); 
  beak_w = random(5, 20); 
  beak_h = random(10, 20); 
  beak_dir = random(0, 2); 
  brow_outer_h = random(100, 120); 
  brow_inner_h = random(100, 120); 
  brow_width = random(2,7); 
  flipper_right_angle = random(-(1/4), 0);
  flipper_left_angle = random(1, 5/4);
  button_unit = random(15, 30); 
}

I had a lot of fun making this project. Penguins are definitely my favorite kind of animal, so I thought I would make faces for these adorable, flightless birds. Because I couldn’t add mouths to penguins (which play a huge part for  expressions), I had to make up for it by changing their eyebrows and eyes. Enjoy!

Nina Yoo- Project 02- Variable- Face Section E

sketch

/*Nina Yoo
Section E
nyoo@andrew.cmu.edu
Project-02
*/ 

var eyeSizeW = 44;
var eyeSizeH = 27;
var colorEye = 0;
var faceWidth = 192;
var faceHeight = 192;
var eyeBruiseWidth = 76;
var eyeBruiseHeight = 63;
var earH = 54;
var earW = 23;


function setup() {
    createCanvas(480, 650);
    noStroke();
    
    
}

function draw() {
	background(167,217,201);

	//head
	fill(229,222,167);
	ellipse(240, 350, faceWidth, faceHeight);
	fill(229,222,167);
	ellipse(143, 350, earW, earH);
	fill(229,222,167);
	ellipse(336,350, earW, earH);

	//hair
	fill(0);
	triangle(215,228, 211, 257,239,261);
	triangle(239,261,222,221,278,163);

	//left eye
	fill(255);
	arc(195,346, 44, 44, 0, PI);
	fill(colorEye);
	arc(195,346,24,15,0,PI);


	//bruise
	fill(175,127,183);
	ellipse(286,350, eyeBruiseWidth,eyeBruiseHeight);

	//right eye
	fill(255);
	ellipse(286,351,eyeSizeW,eyeSizeH);
	fill(colorEye);
	ellipse(286,350,24,15);

}

function mousePressed(){
	faceWidth = random(192, 240);
	faceHeight = random(192, 250);
	colorEye = random (0, 200);
	eyeSizeW = random (44, 85);
	eyeSizeH = random (27, 50);
	earW = random (23, 76);
	earH = random (54, 100);
	eyeBruiseWidth = random (76, 100);
	eyeBruiseHeight = random (63, 90);


}

The assignment required a lot of going back and forth with the variables because there were values I wanted to change, but having the variables also helped in the case that I didn’t have to go through the whole code and change every number. Another important factor I realized was that I needed to close the function draw in order for the function mousePressed to work. The mousePressed function was surprisingly easier than expected and having the variables also as a little cheat sheet for measurements was helpful.

Jaclyn’s Variable Face

jsaik

/* Jaclyn Saik 
Project-02 
Section E 
*/


//face and hair variables 
var eyeSize = 20;
var pupilSize = 10
var faceWidth = 150;
var faceHeight = 170;
var bunWidth = 100
var bunHeight = 100
var armLW = 160
var armRW = 480
var toungeL = 40
var toothL = 10
var eyebrowH = 155
var bluehair = 50
var redskin = 238




    

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

function draw() {
    background(140, 120, 170);
    noStroke();

    //colors
    s = color(redskin, 216, 193) //skin
    r = color(206, 20, 110)
    b = color(223, 140, bluehair)

    //body
    fill(s)
    //arms
    
    triangle(245, (height / 2) + 20, 240, 380, armLW, 600);
    triangle(235 + (width / 4), (height / 2) + 20, 235 + (width / 4), 380, armRW, 600);
    fill(r)
    rect(240, height / 2, width / 4, height*(2/3), 20)

    //hair
    fill(b)
    ellipse(width / 2, height / 3 + 5, faceWidth + 20, faceHeight + 40)
    ellipse(width / 2 - faceWidth * .6, height / 3 + 50, bunWidth, bunHeight)
    ellipse(width / 2 + faceWidth * .6, height / 3 + 50, bunWidth, bunHeight)


    //face
    fill(s)
    ellipse(width / 2, height / 3 + 25, faceWidth,  faceHeight);
    //eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var pupilLX = width / 2 - faceWidth * 0.25;
    var pupilRX = width / 2 + faceWidth * 0.25;
    fill(255);
    ellipse(eyeLX, height / 3 + 15, eyeSize, eyeSize); 
    ellipse(eyeRX, height / 3 + 15, eyeSize, eyeSize);
    fill(0)
    //pupils
    ellipse(eyeLX, height / 3 + 15, pupilSize, pupilSize); 
    ellipse(eyeRX, height / 3 + 15, pupilSize, pupilSize);
    
    
    //tounge
    fill(237, 106, 169)
    ellipse(width / 2, height / 3 + 65, 30, toungeL)
    //teeth
    fill(255)
    rect(width / 2 - 5, height / 3 + 60, 15, toothL)
    //mouth
    fill(s)
    rect(width / 2 - 25, height / 3 + 50, 50, 10)

    //nose
    var noseWL = 300
    var noseWR = 340
    fill(247, 208, 95)
    triangle(width / 2, height / 3 + 10, noseWL, height / 3 + 50, noseWR, height / 3 + 50);

    //eyebrows
    noFill();
    strokeWeight(3)
    stroke(218, 130, 55)
    arc(eyeLX, eyebrowH, 40, 25, PI*1.2, 0, OPEN)
    arc(eyeRX, eyebrowH, 40, 25, PI, TWO_PI*.9, OPEN)


    

}

function mousePressed() {
    
    faceWidth = random(125, 150);
    eyeSize = random(20, 50);
    pupilSize = random(10, 15)
    bunHeight = random(60, 120);
    bunWidth = random(60, 120);
    armLW = random(120, 200);
    armRW = random(440, 520);
    toungeL = random(30, 90);
    toothL = random(10, 17)
    eyebrowH = random(160, 145)
    bluehair = random(20, 200)
    redskin = random(100, 255)


 
}

This was an interesting task, and definitely very fun to research. I especially liked looking into how artists like Moka create algoritm-generated faces, and how the randomization tools of computers really highlight the odd ways our brains look and recognize facial expressions. Instead of working in a sketchbook, my main method of “sketching” for this project was first creating the static elements of my figure, so originally the arms and torso, and then playing with different features layered on top of each other to see what type of expressions come out. I found it especially interesting how much power the pupils and eyebrows have over a person’s expression.

Project – 02 Min Lee

sketch

/* 
Min Lee
Section A
mslee@andrew.cmu.edu
Project-02
*/

//face
var faceWidth = 150
var faceHeight = 150

//use for nose and mouth color 
var faceColorR = 255 
var faceColorG = 216
var faceColorB = 209

//eyes
var eyeWidth = 25
var eyeHeight = 15
var eyeColor = 255

//eye positioning
var eyeX = 20
var eyeY = 15

//nose positioning
var noseY = 5
var noseHeight = 60

//mouth shape
var mouthWidth = 25
var mouthHeight = 15
var distance = 30

//font
var textPlacement = 0

//stars
var a = 50


function setup() {
    createCanvas(640, 480);
    background(141,189,193);
}


function draw() {
	background(141,189,193);
	noStroke();
	//face shape
	fill(faceColorR, faceColorG, faceColorB);
	ellipse(width/2 ,height/2 , faceWidth, faceHeight);
	rect(width/2 - faceWidth/2, height/2, faceWidth, height);
	//eyebrows
	fill(faceColorR/2, faceColorG/2, faceColorB/2);
	ellipse(width/2 - eyeX, height/2 - eyeY, eyeWidth, eyeHeight);
	ellipse(width/2 + eyeX, height/2 - eyeY, eyeWidth, eyeHeight);
	//eyes
	fill(0);
	ellipse(width/2 - eyeX, height/2 - eyeY + 20, 10, 8);
	ellipse(width/2 + eyeX, height/2 - eyeY + 20, 10, 8);
	//nose
	fill(faceColorR/4*3, faceColorG/4*3, faceColorB/4*3);
	ellipse(width/2 - 7.5, height/2 + noseY/3*2, 10, 10);
	ellipse(width/2 + 7.5, height/2 + noseY/3*2, 10, 10);
	arc(width/2, height/2 + noseY, 15, noseHeight, PI, TWO_PI);
	arc(width/2, height/2 + noseY - 1, 15, 10, 0, PI);
	//mouth
	fill(faceColorR/4*3, faceColorG/4*3, faceColorB/4*3);
	arc(width/2, height/2 + noseY + distance, mouthWidth, mouthHeight, 0, PI);
	fill(faceColorR/2, faceColorG/2, faceColorB/2);
	arc(width/2 - mouthWidth/4, height/2 + noseY + distance, mouthWidth/2 + 5, mouthHeight, PI, TWO_PI);
	arc(width/2 + mouthWidth/4, height/2 + noseY + distance, mouthWidth/2 + 5, mouthHeight, PI, TWO_PI);
	//ears
	fill(faceColorR, faceColorG, faceColorB);
	arc(width/2 - faceWidth/2 + 1, height/2 + noseY/3* 4 + 5, 30, 40, HALF_PI, PI + HALF_PI);
	arc(width/2 + faceWidth/2 - 1, height/2 + noseY/3* 4 + 5, 30, 40, PI + HALF_PI, HALF_PI);
	fill(faceColorR/4*3, faceColorG/4*3, faceColorB/4*3);
	arc(width/2 - faceWidth/2 + 1, height/2 + noseY/3* 4 + 5, 15, 20, HALF_PI, PI + HALF_PI);
	arc(width/2 + faceWidth/2 - 1, height/2 + noseY/3* 4 + 5, 15, 20, PI + HALF_PI, HALF_PI);
	//chin
	stroke(faceColorR/4*3, faceColorG/4*3, faceColorB/4*3);
	strokeWeight(2);
	noFill();
	beginShape();
	curveVertex(width/2 - 10, height/2 + 50 + noseY + distance);
	curveVertex(width/2 - 10, height/2 + 50 + noseY + distance);
	curveVertex(width/2 - 5, height/2 + 55 + noseY + distance);
	curveVertex(width/2 + 5, height/2 + 55 + noseY + distance);
	curveVertex(width/2 + 10, height/2 + 50 + noseY + distance);
	curveVertex(width/2 + 10, height/2 + 50 + noseY + distance);
	endShape();
	//shirt
	fill(0);
	strokeWeight(1);
	rect(width/2-faceWidth/2, height - 60, faceWidth, 60);
	fill(faceColorR, faceColorG, faceColorB);
	arc(width/2, height - 60, faceWidth, 40, 0, PI);
	//moving text 
	noStroke();
	fill('DarkCyan');
	textSize(50);
	textFont('Helvetica');
	text('bald is beautiful.', textPlacement, 100);
	textPlacement = textPlacement + 2
	if (textPlacement > 640) {
	textPlacement = -350
	};
	//stars
	fill(255,215,0);
	rect(width/4, height/4 * 3, 50, 50);
	rect(width/2 + 100, height/4 + 20, 50, 50);
	fill(141,189,193);
		//bottom left star
	arc(width/4, height/4 * 3, a, a, 0, HALF_PI);
	arc(width/4 + 50, height/4 * 3, a, a, HALF_PI, PI);
	arc(width/4, height/4 * 3 + 50, a, a, PI + HALF_PI, TWO_PI);
	arc(width/4 + 50, height/4 * 3 + 50, a, a, PI, PI + HALF_PI);
		//top right star
	arc(width/2 + 100, height/4 + 20, a + 2.5, a + 2.5, 0, HALF_PI);
	arc(width/2 + 150, height/4 + 20, a + 2.5, a + 2.5, HALF_PI, PI);
	arc(width/2 + 100, height/4 + 70, a + 2.5, a + 2.5, PI + HALF_PI, TWO_PI);
	arc(width/2 + 150, height/4 + 70, a + 2.5, a + 2.5, PI, PI + HALF_PI);

}

function mousePressed() {
	faceWidth = random(130,170);
	faceHeight = random(110,190);
	faceColorR = random(141,255);
	faceColorG = random(80,255);
	faceColorB = random(36,170);
	eyeX = random(20,30);
	eyeY = random(20,30);
	eyeWidth = random(15,25);
	eyeHeight = random(10,15);
	noseY = random(0, 20);
	mouthWidth = random(20, 25);
	mouthHeight = random(15,20);
	distance = random(20,35);
	a = random(50,60);

}

preliminary sketch

For my project, I wanted to create a message that resonates in my heart. While the variability in the faces that I created is not significant, I went for this effect to show that being a bald, green-skinned person does not make one any different than being a bald, orange-skinned person. Bald is beautiful, folks.