jiaxinw-Project02-Variable Faces

sketch

//body
var bodyWidth = 350;
var bodyHieght = 400;
var bodyColor = 170;

//face
var faceWidth = 250;
var faceHeight = 300;

//ear
var eyeSize = 30;
var earWidth = 50;
var earHeight = 70;

//the two middle points of eyebrows
var eyebrowPoint1 = 180;
var eyebrowPoint2 = 180;

//mouth left side
var mouthCornerL = 300;

//mouth right side
var mouthCornerR= 340;

var mouthHeight = 350;

//skin color
var skinR = 250;
var skinG = 230;
var skinB = 220;

//background begin color
var BackLR = 255;
var BackLG = 249;
var BackLB = 223;

//background end color 
var BackRR = 211;
var BackRG = 248;
var BackRB = 238;


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

}

function draw() {
	//background colors
	noStroke();
    from = color(BackLR, BackLG, BackLB);
    to = color (BackRR, BackRG, BackRB);
    colorMode(RGB);
    interA = lerpColor(from, to, .25);
	interB = lerpColor(from, to, .65);
	fill(from);
	rect(0, 0, 160, 480);
	fill(interA);
	rect(160, 0, 160, 480);
	fill(interB);
	rect(320, 0, 160, 480);
	fill(to);
	rect(480, 0, 160, 480);

    //body
    fill(bodyColor);
    rect(width/2 - bodyWidth/2, height/2 + bodyHieght*0.25 , bodyWidth, bodyHieght, 100);

	//face
	fill(skinR, skinG, skinB);
	ellipse(width/2, height/2, faceWidth, faceHeight);

    //ears
    fill(skinR, skinG, skinB);
    ellipse(width/2 - faceWidth/2, height/2, earWidth, earHeight);
    ellipse(width/2 + faceWidth/2, height/2, earWidth, earHeight)

	//eyes
	fill(31, 28, 27);
	var eyeLX = width/2 - faceWidth*0.25;
	var eyeRX = width/2 + faceWidth*0.25;
	var eyeHeight = height/2
	ellipse(eyeLX, eyeHeight, eyeSize, eyeSize);
	ellipse(eyeRX, eyeHeight, eyeSize, eyeSize);

    //left eyebrow
    noFill();
    stroke(70);
    strokeWeight(2);
    beginShape();
    curveVertex(width/2 - faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 - faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 - faceWidth*0.3, eyebrowPoint1);
    curveVertex(width/2 - faceWidth*0.2, eyebrowPoint2);
    curveVertex(width/2 - faceWidth*0.125,  height/2 - faceHeight*0.125);
    curveVertex(width/2 - faceWidth*0.125,  height/2 - faceHeight*0.125);
    endShape();

    //right eyebrow
    noFill();
    stroke(70);
    strokeWeight(2);
    beginShape();
    curveVertex(width/2 + faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 + faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 + faceWidth*0.3,  eyebrowPoint1);
    curveVertex(width/2 + faceWidth*0.2,  eyebrowPoint2);
    curveVertex(width/2 + faceWidth*0.125,  height/2 - faceHeight*0.125);
    curveVertex(width/2 + faceWidth*0.125,  height/2 - faceHeight*0.125);
    endShape();

    //mouth   
    fill(236, 39, 70);
    noStroke();
    beginShape();
    curveVertex(mouthCornerL, height/2 +70);
    curveVertex(mouthCornerL, height/2 +70);
    curveVertex(width/2 - 10, mouthHeight);
    curveVertex(width/2 + 10, mouthHeight);
    curveVertex(mouthCornerR, height/2 +70);
    curveVertex(mouthCornerR, height/2 +70);
    endShape();
    

}

    //when the user clicks, variables are assigned to random values within specifid ranges
function mousePressed(){

    //face size change
    faceWidth = random(150, 300);
    faceHeight = random(200, 350);
    
    //eye size change
    eyeSize = random (10, 50);
    
    //ear size change
    earHeight = random(60, 80);
    earWidth = random(40, 60);
    
    //eyebrow change
    eyebrowPoint1 = random(200, 220);
    eyebrowPoint2 = random(180, 220);

    //mouth change
    mouthCornerL = random(280, 300);
    mouthCornerR = random(340, 360);
    mouthHeight = random(300, 350);

    //skin color change
    skinR = random(240, 260);
    skinG = random(220, 240);
    skinB = random(210, 230);

    //background color change
    BackLR = random(220, 256);
    BackLG = random(180, 280);
    backLB = random(200, 250);
    BackRR = random(210, 256);
    BackRG = random(170, 248);
    BackRB = random(50, 238);

    //body change
    bodyWidth = random(350, 400);
    bodyHieght = random(400, 450);
    bodyColor = random(70, 170)
}

To start this project, I thought about what parts of a face can affect the appearance of it obviously. I came up with the size of the face, size of eyes, shapes of eyebrows and the shape of the mouth. Therefore, I set up different variables for these different part to be changed. Later, I realized the color of skin is also a good point, and I also made it changeable. For the background, I wanted to do something different, I wanted to make it changeable too. I found the function of lerpcolor() in reference, and I thought it would be a fun to make a background that generates gradual colors randomly.