Project 02 – Yugyeong Lee

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project-02

var colorR = 100;
var colorG = 150;
var faceWidth = 200;
var faceHeight = 200;
var eyeSize = 20;
var blushSize = 35;
var noseWidth = 10;
var noseHeight = 10;
var mouthWidth = 70;
var mouthHeight = 45;
var colorR2 = 100;
var hairDecorationType = 1;

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

function draw() {
	//Background 
    background(colorR, colorG, 200);
	noStroke();
    fill(255);
    ellipse(width/2, height/2, 300, 350);

    //Face
    fill(242, 214, 180);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    ellipse(width/2+100, height/2, 40, 40);
    ellipse(width/2-100, height/2, 40, 40);

    //Eyes
    var eyeLX = width/2-faceWidth*0.18;
    var eyeRX = width/2+faceWidth*0.18;
    fill(255);
    ellipse(eyeLX, height/2, eyeSize+12, eyeSize+12);
    ellipse(eyeRX, height/2, eyeSize+12, eyeSize+12);
    fill(0);
    ellipse(eyeLX+2.5, height/2, eyeSize, eyeSize+3);
    ellipse(eyeRX-2.5, height/2, eyeSize, eyeSize+3);
    fill(255);
    ellipse(eyeLX+3, height/2, eyeSize-15, eyeSize-15);
    ellipse(eyeRX-3, height/2, eyeSize-15, eyeSize-15);

    //Blush
    var blushLX = width/2-faceWidth*0.32;
    var blushRX = width/2+faceWidth*0.32;
    fill(250, 185, 225, 150);
    ellipse(blushLX, height/2+faceHeight*0.15, blushSize*1.2, blushSize); 
    ellipse(blushRX, height/2+faceHeight*0.15, blushSize*1.2, blushSize);

    //Hair
    stroke(0);
    strokeWeight(5);
    noFill();
	beginShape();
	curveVertex(width/2, height/2-100);
	curveVertex(width/2, height/2-100);
	curveVertex(width/2-15, height/2-125);
	curveVertex(width/2-15, height/2-135);
	curveVertex(width/2-10, height/2-145);
	curveVertex(width/2, height/2-150);
	curveVertex(width/2+20, height/2-140);
	curveVertex(width/2+10, height/2-130);
	curveVertex(width/2+10, height/2-130);
	endShape();

	//Nose
    var noseX = width/2
    var noseY = height/2+faceHeight*.12
    stroke(150, 120, 90, 100);
    strokeWeight(3);
    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);

    //Tooth
	fill(255);
    strokeWeight(1);
	rect(width/2-.2*mouthWidth, height/2+40, .2*mouthWidth, .2*mouthHeight);
	rect(width/2+1, height/2+40, .2*mouthWidth, .2*mouthHeight);

	hairDecoration();
}

function ribbon() {
	//Ribbon
	fill(colorR2, 100, 200);
	triangle(width/2, height/2-100, width/2+40, height/2-70, width/2+40, height/2-130);
	triangle(width/2, height/2-100, width/2-40, height/2-70, width/2-40, height/2-130);
	fill(colorR2-50, 100, 200);
	ellipse(width/2, height/2-100, 25, 25);
}

function hairTie() {
	//Hair Tie
	fill(colorR2, 200, 100);
	ellipse(width/2-16, height/2-100, 35, 35);
	ellipse(width/2+16, height/2-100, 35, 35);
}

function hairDecoration() {
    if (hairDecorationType === 1) {
        ribbon();
    }
    else if (hairDecorationType === 2) {
        hairTie();
    }
}

function mousePressed() {
    colorR = random(190, 255);
    colorG = random(0, 190);
    eyeSize = random(15, 30);
    blushSize = random(20, 40);
    noseWidth = random(10, 17);
    noseHeight = random(5, 10);
    mouthWidth = random(40, 80);
    mouthHeight = random(40, 60);
    colorR2 = random(0, 255);
    hairDecorationType = Math.floor((random()*2)+1);
}

I wanted to create an interactive baby face with changing eyeSize, noseSize, blushSize, mouthSize, and hairDecoration. Some of the elements such as hair and face, remain the same throughout.