Category: Project-02-Variable-Face

P2:Variable Faces – Erin Fuller

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project-02

// Simple beginning template for variable face.
var eyeSize = 40;
var faceWidth = 150;
var faceHeight = 150;
var skin = 80
var back = 150


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

function draw() {
    colorMode(HSB);
    var c = color(back, 26, 79);
    background(c); 

    //face
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var b = color(26.09, 52, skin);
    fill(b);



    //eye  placement
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    // eye size
    fill(0, 100, 0)  
    ellipse(eyeLX, height/2, eyeSize, eyeSize);
    ellipse(eyeRX, height/2, eyeSize, eyeSize); 
    colorMode(HSB);
    fill(0, 100, 0)
    var b = color(26.09, 52, skin);
    fill(b);
}


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(250, 350);
    faceHeight = random(300, 370);
    eyeSize = random(30, 60);
    skin = random(45, 100); //changes brightness value of skin to imitate skin tones
    back = random (0, 360); //changes background colors
}

I think this project was harder than the one from the previous week. But I think the way I used HSB colors rather than RGB was a good way to create more realistic skin tone variation.

Project 02 – Alexander Chen

sketch

//Alexander Chen
//Section A
//alchen1@andrew.cmu.edu
//Project_02


var faceWidth = 100;
var faceHeight = 150;
var eyeSize = 20;
var pupilColor = 255;
var eyeColorR = 0
var eyeColorG = 0
var eyeColorB = 0
var earWidth = 10
var earHeight = 20
var mouthSize = 20
var hairHeight = 40

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

function draw() {
    background(242, 126, 159);

   
   
    //FACE//
    noStroke();
    fill(231, 175, 132);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);


      //HAIR
    fill(0)
    var hairX = width / 2 - faceWidth / 2
    var hairY = height / 2 - faceHeight / 2
    var hairWidth = faceWidth
    rect(hairX, hairY, hairWidth, hairHeight, 20, 20, 10, 10);
   

    //EYES//
    //eyes color
    fill(pupilColor)
    
    //pupil size + location
    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);

    //iris
    fill(eyeColorR, eyeColorG, eyeColorB)
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);


    //EARS//
    fill(231, 175, 132);
    var earL = width / 2 - faceWidth / 2
    var earR = width / 2 + faceWidth / 2
    ellipse(earL, height / 2, earWidth,  earHeight);
    ellipse(earR, height / 2, earWidth,  earHeight);


    //NOSE//
    fill(100, 75, 46)
    rect(width / 2 - eyeSize / 4, height / 2, eyeSize / 2, eyeSize, 20)

    //MOUTH//
    fill(251, 62, 58)
    ellipse(width / 2, height / 2 + faceHeight / 4, mouthSize, mouthSize)



}

function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 150);
    eyeSize = random(10, 30);
    earWidth = random(5, 15);
    earHeight = random(10, 20);
    eyeColorR = random(0, 255);
    eyeColorG = random(0, 255);
    eyeColorb = random(0, 255);
    mouthSize = random(10, 20);
}

This project was definitely a bit easier to get started with the templates. However, it was still as hard as I thought it was going to be with the variables within the variables. As someone who loses track easily, I found myself being confused with which variables lined up with which.

Emily Zhou –– Variable Face

sketch

// face
var faceWidth = 225;
var faceHeight = 225;

var skin1 = 255;
var skin2 = 220;
var skin3 = 175;
// eyes
var eyeSize = 50;

var color1 = 0;
var color2 = 0;
var color3 = 0;

var pupilSize = 30;
//nose
var noseW = 30;
var noseH = 20;
// mouth (2)
// ver. semi-circle
var mouthW = 70;
var mouthH = 40;
// ver. circle
var mouth2d = 50;
// choice
var mouthChoice = 0;
// hat
var hat1 = 170;
var hat2 = 90;
var hat3 = 255;

var hatX1 = 275;
var hatY3 = 55;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(0);
    // skin
    fill(skin1, skin2, skin3)
    // face
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    // eyeballs
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    fill(255);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    // pupils
    fill(color1, color2, color3);
    ellipse(eyeLX, height / 2, pupilSize, pupilSize);
    ellipse(eyeRX, height / 2, pupilSize, pupilSize);
    // mouth (2)
    var mouthX = width / 2;
    var mouthY = height / 2 + faceHeight * 0.25;
    // ver. semi-circle
    if (mouthChoice == 0) {
        fill(250, 140, 140);
        noStroke();
        arc(mouthX, mouthY, mouthW, mouthH, TWO_PI, PI, CHORD);
    }
    // ver. circle
    else if (mouthChoice == 1) {
        fill(250, 140, 140);
        ellipse(mouthX, mouthY, mouth2d, mouth2d);
    }
    //nose
    var noseY = mouthY - mouthH / 2 - 20;
    fill(color1, color2, color3);
    ellipse(width / 2, noseY, noseW, noseH);
    // hat
    var hatX2 = width - hatX1;
    var hatX3 = (hatX1 + hatX2) / 2;
    var hatY = height / 2 - faceHeight / 2 + 15;
    fill(hat1, hat2, hat3);
    triangle(hatX1, hatY, hatX2, hatY, hatX3, hatY3);
}
 
function mousePressed() {
    // face
    faceWidth = random(150, 250);
    faceHeight = random(150, 250);
    skin1 = random(0, 255);
    skin2 = random(0, 255);
    skin3 = random(0, 255);
    // eyes
    eyeSize = random(25, 55);
    pupilSize = random(15, eyeSize - 10);
    color1 = random(0, 255);
    color2 = random(0, 255);
    color3 = random(0, 255);
    // nose
    noseW = random(30, 70);
    noseH = random(30, 70);
    // mouth (2)
    // ver. semi-circle
    mouthW = random(10, faceWidth - 80);
    mouthH = random(10, faceHeight * 1/4);
    // ver. circle
    mouth2d = random(30, faceHeight * 1/3);
    // choice
    mouthChoice = Math.floor(random(0, 1) * 2);
    // hat
    hat1 = random(0, 255);
    hat2 = random(0, 255);
    hat3 = random(0, 255);
    hatX1 = random(275, 300);
    hatY3 = random(45, 75);
}

It took me a while to figure out, but I found the way to randomize a range of colours using the 3 RGB values. I used this tactic in the skin, eyes, and hat to generate a ton of faces that all look very distinct. I added the party hat at the end because the face seemed too naked.

Eliza Pratt – Project 02

sketch

/* 
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project-02
*/


var eyeSize = 30;
var eyeWidth = 1;
var blu = 100;
var faceWidth = 250;
var faceHeight = 300;
var skin = 30;
var glasses = 20;
var cut = 120;
var brow = 0;

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

function draw() {
    noStroke();
    background(200, 222, 230);

    //hair
    fill(224, 72, 72);
    rect(width / 2 - faceWidth/2 - 20, height / 2 - 45, faceWidth + 40, cut, 0, 0, 10, 10);
    fill('rgba(0,0,0, 0.25)');
    rect(width / 2 - faceWidth/2, height / 2 - 45, faceWidth, cut);
    

    ////////HEAD/////////
    fill(242-skin, 194-skin, 131-skin);

    //ears
    ellipse(width/2 - faceWidth/2, height/2 + 10,  55, 65);
    ellipse(width/2 + faceWidth/2, height/2 + 10,  55, 65);
    fill('rgba(0,0,0, 0.25)');
    ellipse(width/2 - faceWidth/2, height/2 + 12,  35, 45);
    ellipse(width/2 + faceWidth/2, height/2 + 12,  35, 45);

    //neck
    fill(242-skin, 194-skin, 131-skin);
    rect(width/2 - 25, height/2 + faceHeight/3, faceWidth/5, faceHeight + 50);
    beginShape();
    curveVertex(width/2 - faceWidth/3, 600);
    curveVertex(width/2 - faceWidth/3, 480);
    curveVertex(width/2, height*0.8);
    curveVertex(width/2 + faceWidth/3, 480);
    curveVertex(width/2 + faceWidth/3, 600);
    endShape();

    //face
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);


    ////////NOSE////////
    noFill();
    stroke('rgba(0,0,0, 0.25)');
    var noseLine = height/2 + 40;
    
    beginShape();
    curveVertex(width/2 - 20, noseLine);
    curveVertex(width/2 - 20, noseLine);
    curveVertex(width/2, noseLine + 10);
    curveVertex(width/2 + 20, noseLine);
    curveVertex(width/2 + 20, noseLine);
    endShape();


    ////////////EYES//////////
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;

    //eyes
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize*eyeWidth, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize*eyeWidth, eyeSize);

    
    //irises
    fill(26, blu, 138);
    stroke(0);
    strokeWeight(3);
    ellipse(eyeLX, height / 2, eyeSize/2, eyeSize/2);
    ellipse(eyeRX, height / 2, eyeSize/2, eyeSize/2);
    //pupilS
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize/5, eyeSize/5);
    ellipse(eyeRX, height / 2, eyeSize/5, eyeSize/5);
    //reflection
    fill(255);
    noStroke();
    ellipse(eyeLX + 3, 1 + height / 2, eyeSize/5, eyeSize/5);
    ellipse(eyeRX + 3, 1 + height / 2, eyeSize/5, eyeSize/5);
    //eyelids
    fill(242-skin, 194-skin*1.5, 131-skin);
    stroke(0);
    strokeWeight(3);
    arc(eyeLX, height / 2, eyeSize*eyeWidth, eyeSize, PI, 0, CHORD);
    arc(eyeRX, height / 2, eyeSize*eyeWidth, eyeSize, PI, 0, CHORD);


    ////////EYEBROWS////////
    noFill();
    stroke(224, 72, 72);
    strokeWeight(brow + 3);

    if (brow < 1) {
        arc(eyeLX, height/2 - 30, eyeSize + 30, 15, PI, 0);
        arc(eyeRX, height/2 - 30, eyeSize + 30, 15, PI, 0);
    }
    else if (brow < 2) {
        arc(eyeLX, height/2 - 30, eyeSize + 30, 15, 0, PI);
        arc(eyeRX, height/2 - 30, eyeSize + 30, 15, PI, 0);
    }
    else if (brow < 3) {
        arc(eyeLX, height/2 - 30, eyeSize + 30, 15, PI, 0);
        arc(eyeRX, height/2 - 30, eyeSize + 30, 15, 0, PI);
    }
    else {
        arc(eyeLX, height/2 - 30, eyeSize + 30, 15, 0, PI);
        arc(eyeRX, height/2 - 30, eyeSize + 30, 15, 0, PI);
    }


    ///////GLASSES////////
    noFill();
    stroke(0);
    strokeWeight(3);

    rect(width/2 - 120 , height/2 - 25, 100, 60, glasses);
    rect(width/2 + 20, height/2 - 25, 100, 60, glasses);
    line(width/2 - 20, height/2 - 10, width/2 + 20, height/2 - 10);


    /////////MOUTH/////////
    noStroke();
    var lipLine = height/2 + faceHeight/4;
    //upper lip
    fill(92,13,58);
    arc(width/2 - 10, lipLine, 30, 25, PI, 0);
    arc(width/2 + 10, lipLine, 30, 25, PI, 0);
    //bottom lip
    fill(155, 0, 55);
    arc(width/2, lipLine, 50, 40, 0, PI);

    
    ///////BANGS///////////
    noStroke();
    fill(224, 72, 72);
    var hair = height/3;
    arc(width / 2, height / 2 - 45, faceWidth + 40,  faceHeight, PI, 0);


    /////SHIRT///////
    fill(40, 16, blu);
    rect(width/2 - faceWidth/3, height*0.85, 2*faceWidth/3, 100, 20);
    fill(242-skin, 194-skin, 131-skin);
    arc(width/2, height*0.85, 80, 30, 0, PI);


        
}

function mousePressed() {
    eyeSize = random(30, 40);
    eyeWidth = random(1,2);
    blu = random(0,255);
    skin = random(1, 100);
    glasses = random(1, 50);
    cut = random(90, 260);
    brow = random(4);

}

With this project, I had a lot of fun messing with the sizes, colors, and shapes of different features. In fact, I had to restrain myself from making every object changeable for the sake of time. I also spent a solid chunk of my afternoon trying to get the eyes to move with the mouse before giving up out of frustration. Maybe next time?

Rjpark – Project 02 – Variable Faces

rjpark_variablefaces

// variables for facial feature dimensions
var eyeSize = 20;
var pupilSize = 5;
var faceWidth = 100;
var faceHeight = 150;
var mouthSize = 5;
// variables for face color
var facer = 10;
var faceg = 15;
var faceb = 20;
// variables for eye color
var eyesr = 5;
var eyesg = 10;
var eyesb = 15;
// variables for pupil color
var pupilsr = 15;
var pupilsg = 20;
var pupilsb = 25;
// variables for mouth color
var mouthr = 20;
var mouthg = 25;
var mouthb = 30;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(230);
    // face
    fill(facer, faceg, faceb);
    stroke(facer, faceg, faceb);
    strokeWeight(2);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    // locations of facial features
    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;
    var mouth1 = width / 2.1
    var mouth2 = width / 1.9
    // eyes
    fill(eyesr, eyesg, eyesb);
    strokeWeight(2);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    // pupils
    fill(pupilsr, pupilsg, pupilsb);
    strokeWeight(2);    
    ellipse(pupilLX, height / 2, pupilSize, pupilSize);
    ellipse(pupilRX, height / 2, pupilSize, pupilSize);
    // mouth
    stroke(mouthr, mouthg, mouthb);
    strokeWeight(mouthSize);
    line(mouth1, height / 1.7, mouth2, height / 1.7);
}

// when the user clicks, these variables are reassigned
function mousePressed() {
	// variables reassigned for facial feature dimensions
    faceWidth = random(100, 300);
    faceHeight = random(100, 300);
    eyeSize = random(17, 50);
    pupilSize = random (5, 15);
    mouthSize = random (3, 13);
    // variables reassigned for eye color
    eyesr = random (0, 255);
    eyesg = random (0, 255);
    eyesb = random (0, 255);
    // variables reassigned for face color
    facer = random (0, 255);
    faceg = random (0, 255);
    faceb = random (0, 255);
    // variables reassigned for pupil color
    pupilsr = random (0, 255);
    pupilsg = random (0, 255);
    pupilsb = random (0, 255);
    // variables reassigned for mouth color
    mouthr = random (0, 255);
    mouthg = random (0, 255);
    mouthb = random (0, 255);
}

In this project, I focused on not only changing the dimensions of 3+ different facial features but also changing the color of each of of those features. I made variables for r, b, and g for each facial feature so I could randomize the colors with each click.

Vicky Zhou – Project_02 – Variable Face

sketch

/*
Vicky Zhou
Section E 
vzhou@andrew.cmu.edu
Project_02
*/ 

var eyeSize = 50;
var faceWidth = 250;
var faceHeight = 250; 
var noseWidth = 23;
var noseHeight = 40;
var noseColor = 155;
var faceColor = 320;
var lefteyeColor = 190;
var righteyeColor = 190; 
var mouthColor = 50;
var mouthWidth = 150;
var mouthHeight = 10;
var earWidth = 31;
var earHeight = 42;


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

function draw() {
	noStroke();
	background(165, 221, 208);
	//face color 
	fill(248, 206, faceColor);
	//face size
	ellipse(width / 2, height / 2, faceWidth, faceHeight);
	//variables for eye location 
	var eyeLX = width / 2 - faceWidth * 0.25; //variable for left eye location
	var eyeRX = width / 2 + faceWidth * 0.25; //variable for right eye location 
	//left eye color
	fill(55, lefteyeColor, 58);
	//left eye size
	ellipse(eyeLX, height / 2, eyeSize, eyeSize);
	//right eye color
	fill(48, 123, righteyeColor);
	//right eye size
	ellipse(eyeRX, height / 2, eyeSize, eyeSize); 
	//nose color;
	fill(216, 173, noseColor);
	//nose size
	rect(width / 2 - noseWidth / 2, height / 2, noseWidth, noseHeight);
	//variables for mouth location
	var mouthLY = height / 2 + faceHeight*0.25 //variable for keeping mouth in center
	//mouth color 
	fill(239, 136, 120);
	//mouth size
	rect(width / 2 - mouthWidth / 2, mouthLY, mouthWidth, mouthHeight);
	
	//variables for ear location
	var earLY = height / 2;
	var earRY = height /2;
	//left ear color
	fill(248, 206, faceColor)
	//right ear color
	fill(248, 206, faceColor);
	//left ear size
	ellipse(width / 2 - faceWidth*0.53, earLY, earWidth, earHeight); 
	//right ear size 
	ellipse(width / 2 + faceWidth*0.53, earRY, earWidth, earHeight);
}

function mousePressed() {
	// changes face when user clicks
	faceWidth = random(100, 200);
	faceHeight = random(100, 250);
	eyeSize = random(10, 30);
	faceColor = random(0, 320);
	lefteyeColor = random(0, 190);
	righteyeColor = random(0, 190);
	noseColor = random(0, 155);
	noseWidth = random(10, 23);
	noseHeight = random(20, 40);
	mouthWidth = random(45, 65);
	mouthHeight = random(5, 10);
	earWidth = random(30, 31);
	earHeight = random(36, 42);
}

I had a lot of fun with this project in particular because I really enjoyed how the random process generator was able to create a wide variety (or small variety, depending on the limits constructed) of faces with each click. I spent a majority of my time fluctuating between what features I wanted to have change the most (for example, face size and color), and what features I wanted to stay more static (for example, the mouth).

Elena-Deng-Variable-Faces

sketch

var eyeSize=20;
var eyeSkin=20;
var faceWidth = 120;
var faceHeight = 150;
var noseSize=20;
var noseDiff=7;
var word=0;
var wordNum=0;

var bodySize=200;



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

}

function draw() {
  background(244,187,84);

//ears
  stroke(156,171,50);
  strokeWeight(15);
  var x1=width/2-faceWidth/2-15;
  var x2=width/2+faceWidth/2+15;
  var y=height/2-noseDiff;
  line(x1,y,x2,y);

  fill(156,171,50);
  noStroke();
  triangle(x1+25,y,x1-10,y-15,x1-10,y+15);
  triangle(x2-25,y,x2+10,y+15,x2+10,y-15);

//body
  fill(220,220,200);
  ellipse(width/2,height,bodySize*1.5,bodySize*2);
  fill(68,63,52);
  rectMode(CENTER);
  rect(width/2,height,bodySize,bodySize);

//face size
  noStroke();
  fill(156,171,50);
  ellipse(width/2,height/2,faceWidth,faceHeight);
//eye
  fill(0);
  var eyeL=width/2-faceWidth/4;
  var eyeR=width/2+faceWidth/4;
  var ibagL=width/2-faceWidth/4;
  var ibagR=width/2+faceWidth/4;

  ellipse(eyeL,height/2,eyeSize+2,eyeSize);
  ellipse(eyeR,height/2,eyeSize+2,eyeSize);

  fill(156,171,50);
  ellipse(ibagL,height/2+5,eyeSize+8,eyeSize);
  ellipse(ibagR,height/2+5,eyeSize+8,eyeSize);

//nose
  fill(0);
  ellipse(width/2,height/2+noseDiff-2,noseSize,noseSize);

  fill(156,171,50);
  ellipse(width/2,height/2+noseDiff,noseSize,noseSize);

//words
var word = int(wordNum);
if (word == 1) {
    textSize(24);
    noStroke();
    fill(156,171,50);
    text("ogres are like onions", width/2, height/4);


} else if (word == 2){
    noStroke();
    textSize(24);
    fill(156,171,50);
    text("ogres are onions",width/2, height/4);

} else if (word == 3){
    noStroke();
    textSize(24);
    fill(156,171,50);
    text("ogre onions", width/2, height/4);

}
}

function mousePressed(){
  faceWidth=random(100,150);
  faceHeight=random(100,170);
  eyeSize=random(10,30);
  noseSize=random(10,25);
  bodySize=random(190,250);
  word=random(1,4);
  wordNum=random(1,4);



}

this was a fun project! I didn’t know what I was going to do when I first started but somehow I ended up with Shrek. I hope in the future I get to code more Shrek related projects.

Jenny Hu — Variable Expressions

Jenny’s Sketch

//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 02



var faceX;
var faceY;
var FOX; //face outline X and Y
var FOY;
var bunFillX;
var bunFillY = 30;
var bunOutlineX;
var bunOutlineY = 40;
var tiedBuns = 15;
var eyeX; //variable to tag the eye to the eye tops
var EBY1 = 0; //left eyebrow Y1 and Y2
var EBY2 = 0; 
var blushY= 5;
var blushRadi = 15;
var mouthNumber = 1;
var wordNumber = 0;

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

    faceX = width/2;
    faceY = height/2;
    FOX = width/2 - 15; //face outline X and Y
    FOY = height/2;
    bunFillX = width/2;
    bunFillY = 30;
    bunOutlineX = width/2;
    eyeX = FOX-270;
}

function draw() {
    background(255, 245, 240);
    angleMode(DEGREES);

    //head fill
    noStroke();
    fill(250,235,220);
    ellipse(faceX, faceY, 190, 190);


    //bun fill
    noStroke();
    fill(130);
    ellipse(bunFillX, bunFillY, 70, 70);
     //tiedBuns keep them close together
    var bunOutlineX = bunFillX + tiedBuns;
    var bunOutlineY = bunFillY + tiedBuns;


    //blush
    noStroke();
    fill(243,215,215);
    ellipse(FOX-80, (FOY+30)+blushY, blushRadi, blushRadi);
    ellipse(FOX+80, (FOY+30)+blushY, blushRadi, blushRadi);
   

    //bun outline
    strokeWeight(8);
    stroke(255, 153, 153);
    noFill();
    ellipse(bunOutlineX, bunOutlineY, 70, 70);


    //mouth 
    var mouth = int(mouthNumber);
    if (mouth == 1) {
        //draw rectangle
        noStroke();
        fill(134,94,94);
        rect(FOX-20, FOY+40, 30, 10,100);

    } else if (mouth == 2){
        //draw circle
        strokeWeight(8);
        stroke(134,94,94);
        ellipse(FOX, FOY+40 ,20,20);

    } else {
        //draw smile
        strokeWeight(8);
        stroke(134,94,94);
        arc(FOX-20, FOY+30, 40, 40, 60,120);

    }


    //eyes
    noFill();
    strokeWeight(8);
    stroke(255, 153, 153);
    //LeftEye
    ellipse(FOX-eyeX, FOY-20, 23, 23);
    //RightEye
    ellipse((FOX-eyeX)+90, FOY-20, 23, 23);

    
    //top of eyes
    stroke(80);
    //Lefteye
    arc(FOX-45, FOY-5, 70, 70, 230, 320); //x, y, w, h, start, stop
    //Righteye
    arc(FOX+45, FOY-5, 70, 70, 230, 320);


    //eyebrows
    strokeWeight(15);
    stroke(183,151,151);
    //Left eyebrow
    line(FOX-50, (FOY-70) + EBY1, FOX-20, (FOY-70) + EBY2);
    //Right eyebrow
    line(FOX+50, (FOY-70) + EBY1, FOX+20, (FOY-70) + EBY2);


    //head outline
    strokeWeight(8);
    stroke(255, 153, 153);
    noFill();
    ellipse(FOX, FOY, 190, 190);



    //words 
    var word = int(wordNumber);
    if (word == 1) {
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("hot buns.", 250, 390);


    } else if (word == 2){
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("salad.", 250, 390);

    } else if (word == 3){
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("coffee.", 250, 390);

    } else {
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("potatoes.", 250, 390);

    }


   
}

function mousePressed() {

    faceX = random(275, 350);
    faceY = random(250, 200);
    FOX = random(275, 350);
    FOY = random (225, 250);
    bunFillX = random (245, 375);
    bunFillY = random (100,100);
    bunOutlineX = random (245, 375);
    bunOutlineY = random (100,100);
    tiedBuns = random (-20,20);
    eyeX = random(25,60);
    EBY1 = random(-10,15);
    EBY2 = random(-10,15);
    blushY = random(-30,20);
    blushRadi = random(20,80);
    mouth = random(1,3);
    mouthNumber = random(1,4);
    word = random(0,4);
    wordNumber = random(0,4);
   


    
 
    
}

Huzzah! Uploaded correctly this time. (Thank you Connie!)

I had a fun time making this. I think compared to last week, it was nice to work with more complicated variables and connected pieces. While I wanted to maintain elements, the trick was to maintain the right distances of elements near one another (like hair color and outline, or eyes to eyebrows), while their elements shifted around with every click.

I think the most challenging part was adding the words. Originally, I wanted to create an array, like in the Dan Shiffman array tutorial, but I couldn’t figure out the bug. So instead, I did the same thing as the mouths— using an if-else logic.

KadeStewart-Project02-VariableFaces

sketch

//Kade Stewart
//Section B 9:30
//kades@andrew.cmu.edu
//Assignment-02-B

//randomized variables
var facewidth = 10;
var faceheight = 10;
var eyex = 5;
var eyey = 5;
var eyewidth = 5;
var eyeheight = 5;
var pupilsize = 5;
var r = 0;
var g = 0;
var b = 0;
var fr = 30;
var mouthsize = 0;
var mouthx = 0;
var mouthy = 0;
var hat = -1;
var mouth = -1;
var frame = 0;

//non-randomized variables
var ang = 0;
var ang2 = 0;


function setup() {
    var height = 400;
    var width = 400;
    createCanvas(width, height);

    rectMode(CENTER);
    noStroke();
}

function mousePressed() {
	fr = 30;
	//reset the animation variables
	ang = 0;
	ang2 = 0;
}

function draw() {
	//reduces the frames to slowly stop "loading screen"
	if (fr > 0) {
		fr--;
		frameRate(fr);
		hat = -1;
		mouth = -1;
	}

	//only redraw new face if the mouse has been clicked recently
	if (fr > 0) {
		//"reset" the page
		noStroke();
		fill(170,180,210);
    	rect(width/2, height/2, width, height, 20);

		//randomize face, eyes, mouth
	    facewidth = random(150,250);
	    faceheight = random(150,250);
	    r = random(200, 225);
	    g = random(200, 225);
	    b = random(200, 225);

	    eyewidth = random(25, 35);
	    eyeheight = random(25, 35);
	    eyex = random(5, 35);
	    eyey = random(-35, 35);
	    pupilsize = random(10, 12);

	    
	    if (mouth < 1) {
	    	mouthsize = random(10, 20);
	    	mouthx = random(width/2 - facewidth/4, width/2);
	    	mouthy = random(height/2 + eyeheight/2 + eyey + 5, height/2 + faceheight/4);
	    }
	    if (mouth >= 1) {
	    	mouthsize = random(10, 20);
	    	mouthx = random(width/2, width/2 + facewidth/4);
	    	mouthy = random(height/2 + eyeheight/2 + eyey + 5, height/2 + faceheight/4);
	    }


	    //draw head
	    fill(r, g, b);
	    rect(width/2, height/2, facewidth, faceheight, faceheight/5);

	    //eyes
	    fill(255);
	    rect(width/2 - 15 - eyex, height/2 - 20 + eyey, eyewidth, eyeheight, 15);
	    rect(width/2 + 15 + eyex, height/2 - 20 + eyey, eyewidth, eyeheight, 15);
	    fill(0);
	    rect(width/2 - 15 - eyex, height/2 - 20 + eyey, pupilsize, pupilsize, 5);
	    rect(width/2 + 15 + eyex, height/2 - 20 + eyey, pupilsize, pupilsize, 5);

	}



	//ending animation
	if (fr == 0) {
		//restore the frame rate
		frameRate(30);
		frame++;

		//create the yellow lines
		noFill();
		stroke(253, 253, 150);
		strokeWeight(4);
		for (i = 1; i <= 16; i++) {
			line(width/2 + (ang * cos(2 * PI * (i/16))), 
				 height/2 + (ang * sin(2 * PI * (i/16))),
				 width/2, height/2);
		}
		
		//speed for the lines in the animation
		if (ang > -width) {
			ang -= 12;
		}

		noStroke();
		fill(170,180,210);
		rect(width/2, height/2 + faceheight/2 + 30, 250, 40, 10);
		if (frame >= 10) {
			fill(255);
			textAlign(CENTER);
			textStyle(BOLD);
			textSize(32);
			text("It's party time!!", width/2, height/2 + faceheight/2 + 40);
		}
		if (frame == 18) {
			frame = 0;
		}

		//start to delete the lines when the lines are drawn
		if (ang <= -width) {
			//circle that covers/"deletes" the lines
			noStroke();
			fill(170,180,210);
    		ellipse(width/2, height/2, 2*ang2, 2*ang2);

    		//deletion speed
			if (ang2 > -width*(2/3)) {
				ang2 -= 8;
			}
		}

		noStroke();

		//make the background nice after the animation
		if (ang2 <= -width * (2/3)){
			background(255);
			fill(170,180,210);
    		rect(width/2, height/2, width, height, 20);
		}

		//draw head
	    fill(r, g, b);
	    rect(width/2, height/2, facewidth, faceheight, faceheight/5);

	    //eyes
	    fill(255);
	    rect(width/2 - 15 - eyex, height/2 - 20 + eyey, eyewidth, eyeheight, 15);
	    rect(width/2 + 15 + eyex, height/2 - 20 + eyey, eyewidth, eyeheight, 15);
	    fill(0);
	    rect(width/2 - 15 - eyex, height/2 - 20 + eyey, pupilsize, pupilsize, 5);
	    rect(width/2 + 15 + eyex, height/2 - 20 + eyey, pupilsize, pupilsize, 5);

	    if (ang2 <= -width/2) {
	    	//randomizes the side the hat & mouth are on
	    	if (hat == -1) {
	    		hat = random(0, 2);
	    	}
	    	if (mouth == -1) {
	    		mouth = random(0,2);
	    	}

	    	//makes sure the mouth isn't too far down
	    	if (mouthy + mouthsize/2 > height/2 + faceheight/2) {
		    		mouthy = height/2 + faceheight/2 - mouthsize/2 - 5;
		    }

		    //draw party hat
	    	if (hat >= 1) {
	    		fill("red");
	    		triangle(width/2 + facewidth/2 - faceheight/5, height/2 - faceheight/2,
		    		 width/2 + facewidth/2, height/2 - faceheight/2 + faceheight/5,
		    		 width/2 + facewidth/2 + 20, height/2 - faceheight/2 - 20);
	    		fill("yellow");
		    	ellipse(width/2 + facewidth/2 + 20, height/2 - faceheight/2 - 20, 25);

	    	} else {
	    		fill("red");
	    		triangle(width/2 - facewidth/2 + faceheight/5, height/2 - faceheight/2,
		    		 width/2 - facewidth/2, height/2 - faceheight/2 + faceheight/5,
		    		 width/2 - facewidth/2 - 20, height/2 - faceheight/2 - 20);
	    		fill("yellow");
		    	ellipse(width/2 - facewidth/2 - 20, height/2 - faceheight/2 - 20, 25);

	    	}

	    	//draw mouth on left side of face
	    	if (mouth < 1) {
	    		fill(25);
		    	rect(mouthx, mouthy, mouthsize, mouthsize, 
		    		 mouthsize/5, mouthsize/5, mouthsize/2, mouthsize/5);

	    	} else {
	    		//draw mouth on right side of face
				fill(25);
		    	rect(mouthx, mouthy, mouthsize, mouthsize, 
		    		 mouthsize/5, mouthsize/5, mouthsize/5, mouthsize/2);
	    	}

	    }
	    
	}
	

    
}

In the beginning, I knew that I wanted to add an interesting transition because randomization makes transitions look cool. After I finished the transition, I realized that my project had an overall happy feel. I added a party hat and text to make sure that the user knew that they were supposed to be having a fun time with all the faces they generated.

Justin Yook – Project 02 – Variable Faces

jyook_VariableFaces

//Justin Yook
//Section C
//jyook@andrew.cmu.edu
//Project-02

//aspects of variability
var faceWidth = 150;
var faceHeight = 150;

var faceColorR = 255;
var faceColorG = 255;
var faceColorB = 255;

var topHeadWidth = 150;
var topHeadHeight = 150; 

var eyeWidth = 15;
var eyeHeight = 15;

var eyeColorR = 0;
var eyeColorG = 0;
var eyeColorB = 0; 

var pupilWidth = 5;
var pupilHeight = 5;

var pupilColorR = 0;
var pupilColorG = 0;
var pupilColorB = 0; 

var eyebrowThick = 3;

var noseWidth = 8; 
var noseHeight = 8;

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

function draw() {
    background(faceColorR * (1/6), faceColorG * (1/6), faceColorB * (1/6));

    //draw general face
    noStroke();
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width/2, height/2, faceWidth, faceHeight);

    //draw top of head
    noStroke();
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width/2, height/2.5, topHeadWidth, topHeadHeight);

    //draw eyes and eye color
    noStroke();
    var eyeLx = width / 2 - faceWidth * 0.25;
    var eyeRx = width / 2 + faceWidth * 0.25;
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeLx, height / 2, eyeWidth, eyeHeight);
    ellipse(eyeRx, height / 2, eyeWidth, eyeHeight);

    //draw eyebrow and its thickness
    noStroke();
    var browLx = eyeLx - 13;
    var browRx = eyeRx - 13;
    fill(faceColorR * (1/2), faceColorG * (1/2), faceColorB * (1/2));
    rect(browLx, height / 2.2, 25, eyebrowThick);
    rect(browRx, height / 2.2, 25, eyebrowThick);

    //draw pupils
    noStroke();
    fill(eyeColorR * 2, eyeColorG * 2, eyeColorB * 2);
    ellipse(eyeLx, height / 2, pupilWidth, pupilHeight);
    ellipse(eyeRx, height / 2, pupilWidth, pupilHeight);

    //draw nose
    noStroke();
    fill(faceColorR * (1/2), faceColorG * (1/2), faceColorB * (1/2));
    ellipse(width / 2, height / 1.85, noseWidth, noseHeight);

    //draw mouth
    noFill();
    stroke(faceColorR * (1/2), faceColorG * (1/2), faceColorB * (1/2));
    strokeWeight(2);
    arc(width/2, height/1.85 + 13, 30, 5, 0, PI, OPEN);

}

function mousePressed() {
    //randomize dimensions of face
    faceWidth = random(70, 200);
    faceHeight = random(80, 200);

    //randomize color of face
    faceColorR = random(0, 255);
    faceColorG = random(0, 255);
    faceColorB = random(0, 255);

    //randomize dimensions of eyes
    eyeWidth = random(10, 30);
    eyeHeight = random(10, 30);

    //randomize dimensions of third eye
    thirdEyeSize = random(0, 30)

    //randomize color of eyes
    eyeColorR = random(0, 255);
    eyeColorG = random(0, 255);
    eyeColorB = random(0, 255);

    //randomize eyebrow thickness
    eyebrowThick = random(1, 8);

    //randomize dimensions of nose
    noseWidth = random(5, 30);
    noseHeight = random(10, 30);

    //randomize dimensions of pupils
    pupilWidth = random(5, 10);
    pupilHeight = random(5, 10);

    //randomize dimensions of top head
    topHeadWidth = random(90, 180);
    topHeadHeight = random(90, 180);

}

When I was starting out with the project, I didn’t know what features to add to the faces other than the basic eyes, head, nose, and mouth. After some time playing around with primitive shapes, I placed a new ellipse that overlapped with the original face ellipse, which made it look like a weird species. So I decided that the second head’s size would be fun to manipulate. In the end, the theme of my project was about showing the many ways an alien can look like in our imagination.