Category: Section B

sketch

var faceWidth = 250
var faceHeight = 300
var cheekWidth = 13*faceWidth/12
var smile = 10
var smileWidth = 7*faceWidth/12
var smileHeight = 2*faceHeight/32
var blushWidth = 20
var blushHeight = 20
var blushDepth = 0
var dimple = 1
var eyeLX = 240 - faceWidth/4
var eyeRX = 240 + faceWidth/4
var eyeLY = 320 //height/2
var eyeRY = 320
var sunglasses = 0
var glassR = 0
var glassG = 0
var glassB = 0
var hairWidth = 100
var hairHeight = 400

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

function draw() {
    background(164, 230, 239);

    //hair
    fill(0);
    ellipse(width/2, height/2 - hairHeight/4, hairWidth, hairHeight);

    //head
    noStroke();
    fill(255, 220, 200);
    ellipse(width/2, height/2 + faceHeight/4, cheekWidth, faceHeight/2);//cheeks
    ellipse(width/2, height/2, faceWidth, faceHeight); //face

    //mouth
    var mouthHeight = height/2 + faceHeight/4
    noFill()
    stroke(0);
    strokeWeight(2);
    if(smile > 20) {
        arc(width/2, height/2 + faceHeight/4, smileWidth, smileHeight, 0, PI); //smile
    }
    else if(smile < 10) {
        arc(width/2, height/2 + faceHeight/4, smileWidth, smileHeight, PI, 0); //frown
    }
    else {
        line(width/2 - smileWidth/2, mouthHeight, width/2 + smileWidth/2, height/2 + faceHeight/4); //straight mouth
    }

     //dimples
    noFill()
    stroke(0);
    strokeWeight(2);
    if(dimple > .5) {
        arc(width/2 - (smileWidth/2 + 12.5), mouthHeight, 25, 30, 3*PI/2, PI/2); //left dimple
        arc(width/2 + (smileWidth/2 + 12.5), mouthHeight, 25, 30, PI/2, 3*PI/2); //right dimple
    }

    //blush
    noStroke();
    fill(254 + blushDepth, 118 + blushDepth, 145 + blushDepth);
    ellipse(width/2 - 7*faceWidth/16, height/2 + 5*faceHeight/32, blushWidth, blushHeight) //left blush
    ellipse(width/2 + 7*faceWidth/16, height/2 + 5*faceHeight/32, blushWidth, blushHeight) //right blush

    //eyes
    if(sunglasses > .5) {
    stroke(0);
    strokeWeight(2);
    fill(glassR, glassG, glassB);
    ellipse(width/2 - 50, height/2, 70, 70); //left frame
    ellipse(width/2 + 50, height/2, 70, 70); //right frame
    noFill();
    arc(width/2, height/2, 30, 30, PI, 0); //nose bridge frame
    line(width/2 - 85, height/2 - 5, width/2 - faceWidth/2, height/2 - 20); //left ear frame
    line(width/2 + 85, height/2 - 5, width/2 + faceWidth/2, height/2 - 20); //right ear frame
    }
    else {
    noStroke();
    fill(0);
    ellipse(eyeLX, eyeLY, 20, 20); //left eye
    ellipse(eyeRX, eyeRY, 20, 20); //right eye
    }
}


function mouseClicked() {
        faceWidth = random(200, 300);
        faceHeight = random(260, 300);
        cheekWidth = random(2*faceWidth/3, 13*faceWidth/12);
        smile = random(30);
        smileWidth = random(faceWidth/4, 7*faceWidth/12);
        smileHeight = random(faceHeight/16, faceHeight/4);
        blushDepth = random(-40, 50);
        blushWidth = random(20, 40);
        blushHeight = random(20, 40);
        dimple = random(1)
        eyeLX = random(240 - 3*faceWidth/8, 240 - faceWidth/8); //width not declared yet, so used numerical value 240 instead
        eyeRX = random(240 + faceWidth/8, 240 + 3*faceWidth/8);
        eyeLY = random(320 - 2.5, 320 + 2.5); //height not declared yet, so used numerical value 320 instead
        eyeRY = random(320 - 2.5, 320 + 2.5);
        sunglasses = random(1)
        glassR = random(255);
        glassG = random(255);
        glassB = random(255);
        hairWidth = random(100, 400);
        hairHeight = random(200, 400);


}

This project made me skeptical at first… When I first heard that we would be using variables to “randomly” generate faces, I thought that the faces would be just that. Random. Impersonal. Throughout the process — and certainly at the end — I found this not to be true though. Even though when I click the mouse, yes, a bunch of variables are randomly assigned values, I found that every generated face still represented me as the artist and programmer. The style of the artist is evident, and that is something that I did not expect. Each of these faces reflect a bit of my comedic and goofy nature (especially with the colored, circular sunglasses).

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.