Category: Project-02-Variable-Face

TamiTedesco-Project-02-VariableFace

sketch

//Tami Tedesco
//Section 1 (9:30)
//ttedesco@andrew.cmu.edu
//Project-02

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthHeight = 80;
var mouthWidth = 80;
var browWidth = 25;
var browHeight = 5;
var rectCorner = 20;
 
function setup() {
    createCanvas(300, 300);
    //random color fill
    r = random(255);
    g = random(255);
    b = random(255);
}
 
function draw() {
    background('#FBFF98');
    strokeWeight(4);
    //head
    fill(r, g, b, 127);
    rect(width / 2, height / 2, faceWidth,  faceHeight, rectCorner);
    fill(51);
    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);
    //mouth
    fill('#FFFFFF')
    arc(150, 175, mouthWidth, mouthHeight, 0, PI, CHORD);
    //eyebrows
    //L
        fill('#000000')
        rectMode(CENTER);
        translate(width/2, height/2);
        rotate(HALF_PI/3.0);
        rect(-35, -10, browWidth, browHeight);
    //R
        fill('#000000')
        rectMode(CENTER);
        rotate(-PI/3.0);
        rect(35, -10, browWidth, browHeight)
}
 
function mousePressed() {
    
    r = random(255);
    g = random(255);
    b = random(255);
    faceWidth = random(70, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    mouthWidth = random(20, faceWidth);
    mouthHeight = random(20, faceHeight/2);
    browWidth = random(20, 40);
    browHeight = random(2, 15);
    rectCorner = random(0, 250)

}

So this is my variable face program! It generates a randomly colored face making different degrees of the >:D emoticon, which is one I use a lot when I text. In addition, the face shape, mouth size, eye size, and eyebrow size are all also randomly generated. The character of the >:D expression changes a bit depending on the facial structure behind it, so I wanted to explore that aspect with this program.

zhuoyinl-project02-variable-face

sketch

//Zhuoying Lin
//Section A
//zhuoyinl@andrew.cmu.edu
// Project-02-Variable-Face

//color
var colorA = 243;
var colorB = 175;
var colorC = 133;
var colorD = 75;
var colorE = 251;
var colorF = 228;
var colorG = 243;
var colorH = 275;
var colorI = 244;
var colorJ = 145;
var colorK = 5;

//position
var hairA = 290;
var eyeLX = 155
var eyeLY = 235
var eyeRX = 245
var eyeRY = 235

//size




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

function draw() {
    background(180);

    //neck
    fill(colorA, colorB, colorB);
    noStroke();
    quad(220, 350, 160, 480, 100, 480, 160, 350);

    //hair
    fill(colorC, colorD, colorE);
    noStroke();
    arc(200, hairA, 330, hairA + 150, PI, 0);

    //face
    fill(colorF, colorG, colorH);
    noStroke();
    ellipse(200, 240, 200 ,240);

    //eyebrowse
    noFill();
    strokeWeight(10);
    stroke(85, 75, 37);
    curve(120, 200, 140, 180, 160, 180, 180, 200);
    curve(210, 200, 230, 180, 250, 180, 270, 200);

    //eyes
    fill(255);
    stroke(1);
    strokeWeight(5);
    ellipse(150, 230, 30, 30);
    ellipse(240, 230, 30, 30);

    //eyeballs
    fill(1),
    noStroke();
    ellipse(eyeLX, eyeLY, 10, 10);
    ellipse(eyeRX, eyeRY, 10, 10);

    //nose
    fill(244, 145, 5);
    noStroke();
    triangle(195, 250, 215, 290, 175, 290);

    //mouse
    fill(246, 124, 150);
    noStroke();
    arc(195, 305, 40, 80, 0, PI);

    stroke(1);
    strokeWeight(5);
    line(155, 305, 235 ,305);
}

function mousePressed() {
    hairA = random(290, 350);
    colroA = random(10, 255);
    colorB = random(10, 230);
    colorC = random(0, 200);
    colorD = random(50, 100);
    colorE = random(0, 255);
    colorF = random(0, 255);
    colorG = random(0, 255);
    colorH = random(0, 255);
    colorI = random(0, 255);
    colorJ = random(0, 255);
    eyeLX = random(140, 155);
    eyeLY = random(218, 235);
    eyeRX = random(228, 245);
    eyeRY = random(218, 235);



}

For this project, I want to make different elements to change in a different way. I tried to make the distance between the end of hair end and headtop to maintain the same so I use equations to replace a single variable.

Hannah K-Project-02

sketch-114.js

// Variables Needed for Face

// Variable to create ellipse (circle) for eyes
    var eyeSize = 25;
// Variables regarding width and height of ellipse for face
    var fW = 400;
    var fH = 540;
// Variable to create ellipse (circle) for nose
    var noseSize = 6;
// Variables regarding width and height of rectangle for mouth
    var mW = 80;
    var mH = 50;

// Variables needed to change color of face features
// Left eye color
    var RleftEyeColor = 120;
    var GleftEyeColor = 100;
    var BleftEyeColor = 75;
// Right eye color
    var RrightEyeColor = 50;
    var GrightEyeColor = 75;
    var BrightEyeColor = 125;
// Nose color
    var RnoseColor = 75;
    var GnoseColor = 75;
    var BnoseColor = 75;
// Mouth color
    var RmouthColor = 50;
    var GmouthColor = 75;
    var BmouthColor = 125;
// Face color
    var RfaceColor = 50;
    var GfaceColor = 75;
    var BfaceColor = 125;
 
 function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(0,0,0);
// Drawing face outline
    fill(RfaceColor,GfaceColor,BfaceColor);
    ellipse(width/2, height/2, fW, fH);
// Drawing left eye (pupil)
    fill(RleftEyeColor,GleftEyeColor,BleftEyeColor);
    stroke(10);
    ellipse(width/2-fW*0.25, height/2, eyeSize, eyeSize);
// Drawing right eye (pupil)
    fill(RrightEyeColor,GrightEyeColor,BrightEyeColor);
    stroke(10);
    ellipse(width/2+fW*0.25, height/2, eyeSize, eyeSize);
// Drawing nose
    fill(RnoseColor,GnoseColor,BnoseColor);
    stroke(5);
    rect(width/2, height/2, noseSize, noseSize);
// Drawing mouth
    fill(255,255,255);
    rect(width/2, height/2+fH*0.25, mW, mH);
}
 
function mousePressed() {
// Face changes
    eyeSize = random(15, 30);
    fW = random(325, 400);
    fH = random(525, 600);
    noseSize = random(5, 30);
    mW = random(50, 75);
    mH = random(50, 75);
// Left eye color
    RleftEyeColor = random(25,150);
    GleftEyeColor = random(25,150);
    BleftEyeColor = random(25,150);
// Right eye color
    RrightEyeColor = random(25,150);
    GrightEyeColor = random(25,150);
    BrightEyeColor = random(25,150);
// Nose color
    RnoseColor = random(25,150);
    GnoseColor = random(25,150);
    BnoseColor = random(25,150);
// Mouth color
    var RmouthColor = 50;
    var GmouthColor = 75;
    var BmouthColor = 125;
// Face color
    var RfaceColor = 50;
    var GfaceColor = 75;
    var BfaceColor = 125;
}

Using variables in this project turned out to be much more challenging than I expected. Many of the variables I tried to use did not initially work as I intended, and I felt like I was doing a lot more guessing and checking (similar to figuring out the coordinates in last week’s project). I had originally made a sketch of some of the kind of faces I wanted to make, but because I struggled so much with the variables, I ended up making a very basic face.

Jinhee Lee; Project-02: Variable Faces

Biggest thing I noticed afterwards – didn’t draw any sketches. Using variables didn’t serve to just compact the code and make it easier to manipulate the visual with just a few changes, but also allowed me to make relative measurements as opposed to exact measurements for every conceivable feature.

jinheel1_project-02

//Jinhee Lee
//Section C
//jinheel1@andrew.cmu.edu
//Project-02

//beginning template for face
var eyeSize = 10;
var eyeColor = "white";
var faceWidth = 200;
var faceHeight = 300;
var faceColor = "white";
var noseColor = "white";
var smileWidth = 50;
//beginning face mostly white for a blank canvas

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

function draw() {
    background('purple');

    fill(faceColor); //changing face/skin color
    ellipse(width/2,height/2,faceWidth,faceHeight); //changing face size

    var eyeLX = width/2 - faceWidth/4; //varying eyes' position
    var eyeRX = width/2 + faceWidth/4;

    fill(255); //white color for eyeball
    ellipse(eyeLX,height/2,3*eyeSize,2*eyeSize); //drawing eyeballs
    ellipse(eyeRX,height/2,3*eyeSize,2*eyeSize);
    strokeWeight(5); //drawing iris
    stroke(eyeColor); //changing iris color
    fill(0); //making the black pupil
    ellipse(eyeLX,height/2,eyeSize,eyeSize); //varying eye size for pupil and iris
    ellipse(eyeRX,height/2,eyeSize,eyeSize);
    strokeWeight(1);
    stroke(0); 
    //above two functions reset to default

    var noseTY = height/2 - faceWidth/8; //varying nose length
    var noseBY = height/2 + faceWidth/5;

    fill(noseColor); //changing nose color
    triangle(width/2,noseTY,width/2 - faceWidth/10,noseBY,width/2 + faceWidth/10,noseBY);

    fill(135,45,45); //default color for mouth
    arc(width/2,height/2 + faceHeight/3,smileWidth,faceWidth/6,0,PI,CHORD); //draws mouth with varied width
}

function mousePressed() {

	faceWidth = random(150,300);
	faceHeight = random(200,400);

	eyeSize = random(10,20);
	eyeColor = random(["#00CED1","#20B2AA","#CD853F","#8B4513","#C0C0C0","#FF0000"]);

	faceColor = random(["#FFE4C4","#DEB887","#DAA520","#FFDAB9","#8B4513",]);

	noseColor = random(["orange","yellow","green","blue","purple"]);
    //meanwhile, in a parallel universe where people's noses are a random color from OY G. BIV
    //and Rudolph, the only red-nose is their ruler
}

Disregard those two last comments in the code.

ShanWang-Project02-VariableFaces

Besides the shape and size of the elements in the face, I also explored the variations of gradient and the effect it has on the visual appeal.
sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Project-02


var bgColor = 20
var faceEdge = 0
var eyeSize = 5;
var faceWidth = 100;
var faceHeight = 150;
var faceColor = 130;
var eyeColor = 225;
var eyeLidSize = 25;

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

function draw() {
    background(bgColor);
    //draw face contour 
    fill(faceColor-20);
    stroke(faceColor-20);
    ellipse(width / 2, height / 2, faceWidth+10,  faceHeight+10);
    //draw face
    fill(faceColor);
    stroke(faceColor);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //draw eyes
    fill(eyeColor);
    stroke(eyeColor);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var eyeY = height / 2;
    ellipse(eyeLX, eyeY, eyeSize, eyeSize);
    ellipse(eyeRX, eyeY, eyeSize, eyeSize);

    //draw eyelid
    stroke(bgColor+40);
    strokeWeight(eyeLidSize/10);
    line(eyeLX-eyeLidSize/2,eyeY-eyeSize/2,eyeLX+eyeLidSize/2,eyeY-eyeSize/2);
    line(eyeRX-eyeLidSize/2,eyeY-eyeSize/2,eyeRX+eyeLidSize/2,eyeY-eyeSize/2);

}

function mousePressed() {
    bgColor = random(0,100);
    eyeSize = random(5,20);
    eyeLidSize = random(faceWidth/5,faceWidth/4);
    faceColor = random(120,170);
    eyeColor = random(225,255);
    faceWidth = random(120, 240);
    faceHeight = random(140,200);

}

Project-02-Variable Face – Sara Lyons

saral-variableface 

//variables for face
var eyeSize = 35;
var pupilSize = 10;
var hairLength = 250;
var hairWidth = 100;
var browY = 120
var browLength = 25;
var browWidth = 50;

    //create the canvas
function setup() {
    createCanvas(640, 480);
}
	//build the basic face
function draw() {
    background(200, 50, 50);
    //hair
    rectMode(CORNER);
    noStroke();
    fill(240);
    rect(width / 4, height / 5, hairWidth,  hairLength);
    fill(5);
    rect(width / 4, height / 5, hairWidth / 2, hairLength);
    //mouth
    fill(10);
    strokeWeight(5);
    rectMode(CENTER);
    rect(width / 2, 275, 150, 35);
    //eyes
    var eyeLX = (width / 4) + hairWidth
    var eyeRX = eyeLX + hairWidth
    fill(5);
    ellipse(eyeLX, height / 3, eyeSize, eyeSize);
    ellipse(eyeRX, height / 3, eyeSize, eyeSize);
    //pupils
    fill(255);
    ellipse(eyeLX, height / 3, pupilSize, pupilSize);
    ellipse(eyeRX, height / 3, pupilSize, pupilSize);
    //brows
    stroke(5)
    strokeWeight(15)
    line(240, browY, 280, browY);
  	line(340, browY, 380, browY); 
  	}

    //create mouse functions: when the mouse is clicked, 
    //the size or position of these elements change value.
function mousePressed() {
     eyeSize = random(20, 70);
     browY = random(140, 90);
     pupilSize = random(3, 30);
}

I created a number of variables as I built this face, inspired by modular 1960s design styles. After building the face, I spent a while experimenting with randomizing the size and position of all the elements and chose the three (eye size, pupil size, and eyebrow position) that I found most strongly affected the expressive qualities of the face.

Brandon Darreff – Project-02-Variable-Face

bdarreff_project02

//Brandon Darreff

//Section A

//bdarreff@andrew.cmu.edu

//Project-02-Variable-Face



//left figure hair color
var r1 = 199;
var g1 = 161;
var b1 = 87;

//right figure hair color
var r2 = 152;
var g2 = 136;
var b2 = 215;

//left eye size
var eyeWidth1 = 12;
var eyeHeight1 = 10;

//right eye size
var eyeWidth2 = 10;
var eyeHeight2 = 12;

//left mouth size
var mouthWidth1 = 20;
var mouthHeight1 = 10;

//right mouth size
var mouthWidth2 = 15
var mouthHeight2 = 8

//setup canvas size
function setup() {
    createCanvas(640, 480);
}

//fill background with color and design
function draw () { 
	background (112, 169, 169);
	stroke(200);
	strokeWeight(2);
	noFill();
	ellipse(200, 250, 300, 300);
	ellipse(350, 175, 200, 200);
	ellipse(550, 350, 100, 100);
	noStroke();


	//head & neck left
	fill(231, 200, 163);
	beginShape();
	vertex(125, 350);
	curveVertex(115, 400);
	curveVertex(135, 310);
	curveVertex(135, 290);
	curveVertex(120, 260);
	curveVertex(115, 230);
	curveVertex(125, 200);
	curveVertex(160, 170);
	curveVertex(190, 170);
	curveVertex(230, 190);
	curveVertex(238, 210);
	curveVertex(230, 230);
	vertex(240, 270);
	vertex(230, 280);
	curveVertex(230, 310);
	curveVertex(200, 310);
	curveVertex(190, 330);
	curveVertex(180, 400);
	vertex(125, 350);
	endShape();

	//head & neck right
	beginShape();
	vertex(530, 350);
	curveVertex(540, 400);
	curveVertex(520, 310);
	curveVertex(520, 290);
	curveVertex(535, 260);
	curveVertex(540, 230);
	curveVertex(530, 200);
	curveVertex(495, 170);
	curveVertex(465, 170);
	curveVertex(425, 190);
	curveVertex(417, 210);
	curveVertex(425, 230);
	vertex(415, 270);
	vertex(425, 280);
	curveVertex(425, 310);
	curveVertex(455, 310);
	curveVertex(465, 330);
	curveVertex(475, 400);
	vertex(530, 350);
	endShape();
	
// shirt left
	fill(255);
	beginShape();
	vertex(80, 480);
	curveVertex(80, 480);
	curveVertex(78, 420)
	curveVertex(100, 360);
	curveVertex(120, 350);
	curveVertex(150, 360);
	curveVertex(190, 350);
	curveVertex(200, 370);
	curveVertex(220, 400);
	curveVertex(210, 480);
	vertex(220, 480);
	vertex(80, 480);
	endShape();

// shirt right
	fill(0);
	beginShape();
	vertex(560, 480);
	curveVertex(560, 480);
	curveVertex(562, 420)
	curveVertex(540, 360);
	curveVertex(520, 350);
	curveVertex(490, 360);
	curveVertex(450, 350);
	curveVertex(440, 370);
	curveVertex(420, 400);
	curveVertex(430, 480);
	vertex(420, 480);
	vertex(560, 480);
	endShape();

	//hair left 
	fill(r1, g1, b1);
	stroke(0);
	strokeWeight(1);
	beginShape();
	vertex(115, 260);
	curveVertex(115, 260);
	curveVertex(110, 220);
	curveVertex(115, 170);
	curveVertex(130, 160);
	curveVertex(125, 150);
	curveVertex(160, 140);
	curveVertex(220, 155);
	curveVertex(270, 150);
	curveVertex(230, 180);
	curveVertex(265, 175);
	curveVertex(220, 200);
	curveVertex(160, 180);
	curveVertex(165, 220);
	curveVertex(150, 260);
	curveVertex(115, 260);
	vertex(115, 260);
	endShape();

	//hair right
	fill(r2, g2, b2);
	stroke(0);
	strokeWeight(1);
	beginShape();
	vertex(540, 260);
	curveVertex(540, 260);
	curveVertex(555, 220);
	curveVertex(550, 170);
	curveVertex(540, 160);
	curveVertex(505, 150);
	curveVertex(460, 150);
	curveVertex(415, 180);
	curveVertex(445, 200);
	curveVertex(485, 210);
	curveVertex(500, 220);
	curveVertex(485, 260);
	curveVertex(540, 260);
	vertex(540, 260);
	endShape();

	//left eye
	fill(255);
	stroke(0);
	strokeWeight(0.5);
	//variable shape
	ellipse(220, 235, eyeWidth1, eyeHeight1);
	//pupil
	noStroke();
	fill(0);
	ellipse(224, 235, 6, 6);
	//highlight
	fill(255);
	ellipse(226, 235, 2, 2);

	//right eye
	fill(255);
	stroke(0);
	strokeWeight(0.5);
	//variable shape
	ellipse(433, 235, eyeWidth2, eyeHeight2);
	//pupil
	noStroke();
	fill(0);
	ellipse(431, 235, 6, 6);
	//highlight
	fill(255);
	ellipse(429, 235, 2, 2);

	//left mouth
	fill(172, 97, 130);
	ellipse(218, 285, mouthWidth1, mouthHeight1);

	//right mouth
	fill(211, 129, 137);
	ellipse(435, 290, mouthWidth2, mouthHeight2);


	// left sleeve
	stroke(230);
	strokeWeight(1);
	fill(248);
    ellipse(150, 480, 80, 200);

    //right sleeve
    stroke(50);
    fill(25);
    ellipse(500, 480, 80, 200);
    

}
function mousePressed() {

	//left figure hair color change
	r1 = random(75, 200);
	g1 = random(75, 200);
	b1 = random(75, 200);

	//right figure hair color change
	r2 = random(130, 250);
	g2 = random(130, 250);
	b2 = random(130, 250);

	//left eye size
	eyeWidth1 = random(10, 18);
	eyeHeight1 = random(4, 14);

	//right eye size
	eyeWidth2 = random(8, 18);
	eyeHeight2 = random(4, 14);

	//left mouth size
	mouthWidth1 = random(10, 20);
	mouthHeight1 = random(0, 15);

	//right mouth size
	mouthWidth2 = random(8, 20);
	mouthHeight2 = random(0, 10);

}

With the face variable assignment, I utilized two portraits and adjusted facial features of each figure individually to make it appear they are having a conversation.

Yugyeong Lee Project – 02

sketch

//Yugyeong Lee
//Secton A 9:00 AM
//yugyeonl@andrew.cmu.edu
//proeject-02

var faceWidth = 150;
var faceHeight = 175;
var eyeSize = 15;
var noseWidth = 15;
var noseHeight = 10;
var blushSize = 15
var mouthWidth = 60;
var mouthHeight = 40;
var color = 155;
var hairLength = 175;
var hairangle = 60;
var hairDecorationType = 'ribbon';

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

function draw() {
	//Background
	noStroke();
	fill(249, color, 138);
    rect(0, 0 , width, height / 4);
    rect(0, 320 , width, height / 4);
    fill(249, color, 18);
    rect(0, 160 , width, height / 4);
    rect(0, 480 , width, height / 4);
    fill(255);
    ellipse(width / 2, height / 2 - 15, 300, 300);
    
    //Hair
    noStroke();
    fill(109, 93, 74);
    ellipseMode(CENTER);
    ellipse(240, 285, 200, 200);
    rect(140.5, 215, 199, hairLength, hairangle);

    //Face
    noStroke();
    fill(242, 214, 180);
    ellipseMode(CENTER);
    ellipse(width / 2, height / 2 - 10, faceWidth, faceHeight);

    //Blush
    var blushLX = width / 2 - faceWidth * 0.35
    var blushRX = width / 2 + faceWidth * 0.35
    fill(247, 186, 215);
    ellipse(blushLX, height / 2 + faceHeight * 0.15, blushSize * 1.15, blushSize); 
    ellipse(blushRX, height / 2 + faceHeight * 0.15, blushSize * 1.15, blushSize);

	//Hair (bangs)
	fill(109, 93, 74);
    rect(160, 220, 160, 85, 30);
    fill(242, 214, 180); //Part of Face
    triangle(195, 310, 210, 270, 215, 310);

    //Eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(68, 45, 18);
	ellipse(eyeLX, height / 2 + faceHeight * 0.05,  eyeSize, eyeSize * 1.15);
    ellipse(eyeRX, height / 2 + faceHeight * 0.05,  eyeSize, eyeSize * 1.15);

    //Nose
    var noseX = width / 2
    var noseY = height / 2 + faceHeight * 0.125
    stroke(153, 116, 81);
    strokeWeight(4);
    noFill();
    arc(noseX, noseY, noseWidth, noseHeight, PI, TWO_PI);

	//Mouth
	fill (222, 86, 88);
	noStroke();
	arc(width / 2, height / 2 + faceHeight * .2, mouthWidth, mouthHeight, TWO_PI, PI);

	//Hair Decoration
	hairDecoration();
}

function hairDecoration() {
    if (hairDecorationType == 'ribbon') {
        ribbon();
    }
    else if (hairDecorationType == 'hairBand') {
        hairBand();
    }
}

function ribbon() {
	//Ribbon
	fill(236, 39, 86);
	triangle(290, 255, 260, 240, 260, 270);
	triangle(290, 255, 320, 240, 320, 270);
}

function hairBand() {
	//Hair Band
	stroke(254, color, 22);
	strokeWeight(8)
	noFill();
	arc(width / 2, height / 2, 200, 200, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
}

function mousePressed() {
    color = random(0, 255);
    eyeSize = random(15, 25);
    noseWidth = random(10, 17);
    noseHeight = random(5, 10);
    blushSize = random(10, 20);
    mouthWidth = random(20, 60);
    mouthHeight = random(40, 50);
    hairLength = random(175, 225);
    hairangle = random(50, 100);
    hairDecorationType = random(['ribbon', 'hairBand']);
}

For this project, I focused on creating a bright, colorful mood playing around with different facial expression as well as warmed-toned colors.

Project-02: Variable Faces

sketch

//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//Project-02: Variable Faces

var head = 100
var eye = 50
var brow = 40
function setup() {
    createCanvas(640,480);  
}
function draw() {
    background(0,171,255);
    //create conditional head
    if (mouseIsPressed) {
    	fill(115,252,19);
    	ellipse(320,240,head+100,head/2);
    } else {
        fill(255,207,153);
        ellipse(320,240,head,head);
    }
    //create conditional eyes
    if (mouseIsPressed) {
    	//creates whites of eyes
    	fill(255);
    	ellipse(300,200,eye,eye);
    	ellipse(340,200,eye,eye);
    	//creates pupils
    	fill(0);
    	ellipse(300,200,eye/2,eye/2);
    	ellipse(340,200,eye/2,eye/2);
    } else {
    	//creates whites of eyes
    	fill(255);
    	ellipse(300,220,eye/2,eye/2);
    	ellipse(340,220,eye/2,eye/2);
    	//creates pupils
    	fill(0);
    	ellipse(300,220,eye/4,eye/4);
    	ellipse(340,220,eye/4,eye/4);
    }
    //creates condidtional mouth
    if (mouseIsPressed) {
    	//creates tounge
    	fill(255,104,153);
    	arc(320,240,25,100,TWO_PI,PI);
    } else { 
        //creates open mouth
        fill(0);
        arc(320,250,40,75,TWO_PI,PI);
    }
    //creates conditional features
    if (mouseIsPressed) {
    	//creates eyebrows
    	fill(0);
    	rect(320,150,brow,brow/2);
    	rect(270,150,brow,brow/2);
    } else {
    	//creates crown
    	fill(255,255,0);
    	rect(300,180,brow,brow/2);
    }
}

This project was a lot of fun, I really like learning about how to make things interactive. It was tricky at first, but it became easier as I worked on it.

Liu Xiangqi Project-02-Variable-Face

sketch


// Liu Xiangqi xiangqil@andrew.cmu.edu Section-A Project-02
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var eyeR = 0;
var eyeG = 0;
var eyeB = 0;
var faceR = 255;
var faceG = 230;
var faceB = 230;
var noseX1 = 320;
var noseY1 = 240;
var noseX2 = 310;
var noseY2 = 260;
var noseX3 = 330;
var noseY3 = 260;
var mouthAlpha = 0.5;
var mouthX1 = 310;
var mouthY1 = 280;
var mouthX2 = 315;
var mouthY2 = 275;
var mouthX3 = 320;
var mouthY3 = 280;
var mouthX4 = 325;
var mouthY4 = 275;
var mouthX5 = 330;
var mouthY5 = 280;
var mouthX6 = 325;
var mouthY6 = 290;
var mouthX7 = 315;
var mouthY7 = 290;
var mouthX8 = mouthX1;
var mouthY8 = mouthY1;


function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    colorMode(RGB,255,255,255,1);
    background(255, 204, 204);
    //draw face
    noStroke();
    fill(faceR, faceG, faceB, 0.3);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
   
    //contour of the eye
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize+10, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize+10, eyeSize);
    

    //change eye color
    fill(eyeR, eyeG, eyeB);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    
    //contour of the nose
    noFill();
    stroke(255);
    strokeWeight(3.0);
    strokeJoin(ROUND);
    beginShape();
    vertex(noseX1, noseY1);
    vertex(noseX2, noseY2);
    vertex(noseX3, noseY3);
    endShape();
    
    //draw the mouth
    fill(255,0,0,mouthAlpha);
    noStroke();
    beginShape();
    curveVertex(mouthX1,  mouthY1);
    curveVertex(mouthX1,  mouthY1);
    curveVertex(mouthX2, mouthY2);
    curveVertex(mouthX3,  mouthY3);
    curveVertex(mouthX4,  mouthY4);
    curveVertex(mouthX5,  mouthY5);
    curveVertex(mouthX6,  mouthY6);
    curveVertex(mouthX7,  mouthY7);
    curveVertex(mouthX8,  mouthY8);
    curveVertex(mouthX8,  mouthY8);
    endShape();
    
}    
 
function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(130, 200);
    eyeSize = random(10, 20);
    //randomize eye color;
    eyeR = random(0, 250);
    eyeG = random(0, 250);
    eyeB = random(0, 250);
    //random face color according to a research of human skin color
    faceR = 168.8 + 38.5*random(-3,3);
    faceG = 122.5 + 3.1*random(-3,3);
    faceB = 96.7 + 6.3*random(-3,3);
    //randomize nose size;
    noseX1 = random(317, 323);
    noseY1 = random(235, 245);
    noseX2 = random(305, 315);
    noseY2 = random(255, 265);
    noseX3 = random(325, 335);
    noseY3 = noseY2;
    //randomize mouth color and shape
    mouthAlpha = random(0.1, 1);
    mouthX1 = random(307, 313);
    mouthX2 = random(314, 316);
    mouthX3 = random(318, 322);
    mouthX4 = random(324, 326);
    mouthX5 = random(327, 333);
    mouthX6 = random(323, 327);
    mouthX7 = random(313, 317);
    mouthY1 = random(275, 285);
    mouthY2 = random(273, 277);
    mouthY3 = mouthY1;
    mouthY4 = mouthY2;
    mouthY5 = mouthY1;
    mouthY6 = random(287, 293);
    mouthY7 = mouthY6;
    
    
    
}

I found some problem when I tried to modify the size of the canvas.