Category: Project-02-Variable-Face

I enjoyed creating this face, and the mouse-press was really fun to work with. However, since I created a relatively detailed face (less abstract), it was hard for me to change the face shape or hair shape because I had so many points (Originally I wanted to do a face where the hair would seem as if wind was blowing on them, but I soon realized that it was too hard). If I were to do this project again, I would instead do a simplified face that would create more variations.

sketch

var glassesColour = 193;
var glassesRim = 255;
var glassesSizeX = 15;
var glassesSizeY = 55;
var strandX = 208;
var strandY = 20;
var eyebrowX = 180;
var eyebrowY = 198;
var collarColor = 134
var mouth = 53;
function setup() {
    createCanvas(480, 640);
	
}

function draw() {
    background(199,184,103);
//face
    noStroke();
    fill(227,200,170);
    beginShape();
    vertex(130,114);
    vertex(126,123);
    vertex(122,131);
    vertex(111,164);
    vertex(110,179);
    vertex(112,195);
    vertex(108,149);
    vertex(111,203);
    vertex(99,224);
    vertex(78,246);
    vertex(74,253);
    vertex(77,262);
//beginning of lips
    vertex(88,270);
    vertex(83,275);
    vertex(76,282);
    vertex(73,285);
    vertex(77,292);
    vertex(87,297); //beg
    vertex(82,299);
    vertex(76,303);
    vertex(74,309);
    vertex(75,314);
    vertex(84,313);
//end of lips
    vertex(85,323);
    vertex(79,333);
    vertex(78,344);
    vertex(86,351);
    vertex(102,356);
    vertex(123,357);
    vertex(177,343);
    endShape(CLOSE);
//neck
    noStroke();
    fill(227,200,170);
    beginShape();
    vertex(116,359);
    vertex(120,340);
    vertex(134,366);
    vertex(171,424);
    vertex(239,376);
    vertex(216,323);
    vertex(200,250);
    endShape(CLOSE);
//head
    fill(227,200,170);
    ellipse(225,210,200,200);
//glasses
    strokeWeight(4);
    stroke(glassesRim,189,189);
    line(174,229,125,216);
    line(111,213,105,210);
    fill(170,170,glassesColour);
    ellipse(120,225,glassesSizeX,glassesSizeY);
    noFill();
    strokeWeight(2);
    stroke(glassesRim,189,189);
    ellipse(120,225,glassesSizeX,glassesSizeY);
//body
    noStroke();
    fill(collarColor + 30, 32, 78);
    beginShape();
    vertex(145,640);
    vertex(135,591);
    vertex(137,548);
    vertex(146,470);
    vertex(163,459);
    vertex(208,430);
    vertex(305,453);
    vertex(361,502);
    vertex(393,550);
    vertex(416,603);
    vertex(430,640);
    endShape(CLOSE);
    noStroke();
    fill(collarColor, 32, 78);
    beginShape();
    vertex(163,400);
    vertex(154,406);
    vertex(156,446);
    vertex(193,452);
    vertex(253,454);
    vertex(293,462);
    vertex(286,427);
    vertex(268,413);
    endShape(CLOSE);
    noStroke();
//mouth
	noStroke();
	fill(mouth,0,37);
	beginShape();
	vertex(89,297);
	vertex(76,282);
	vertex(73,285);
	vertex(77,292);
	vertex(87,297); //beg
	vertex(82,299);
	vertex(76,303);
	vertex(74,309);
	vertex(75,314);
	vertex(84,313);
	endShape(CLOSE);
//hair
    noStroke();
    fill(70,0,0);
    beginShape();
    vertex(117,126);
    vertex(110,140);
    vertex(103,159);
    vertex(100,181);
    vertex(107,200);
    vertex(105,179);
    vertex(109,156);
    vertex(118,139);
    vertex(115,161);
    vertex(125,178);
    vertex(140,197);
    vertex(150,210);
    vertex(158,226);
    vertex(160,201);
    vertex(167,224);
    vertex(180,247);
    vertex(189,275);
    vertex(191,296);
    vertex(185,325);
    vertex(183,358);
    vertex(184,378);
    vertex(187,395);
    vertex(193,417);
    vertex(206,434);
    vertex(218,441);
    vertex(236,442);
    vertex(260,440);
    vertex(280,452);
    vertex(294,470);
    vertex(340,539);
    vertex(363.580);
    vertex(372,568);
    vertex(394,539);
    vertex(410,519);
    vertex(427,508);
    vertex(442,491);
    vertex(449,473);
    vertex(460,476);
    vertex(444,433);
    vertex(410,351);
    vertex(381,237);
    vertex(371,187);
    vertex(346,135);
    vertex(315,111);
    vertex(275,92);
    vertex(243,85);
    vertex(222,84);
    vertex(189,89);
    vertex(180,87);
    vertex(165,92);
    endShape(CLOSE);
//strand of hair
    noStroke();
    fill(70,0,0);
    beginShape();
    vertex(222,90);
    vertex(strandX,43);
    vertex(229,strandY);
    vertex(215,50);
    endShape(CLOSE);
//eyebrows
    strokeWeight(3);
    stroke("black");
    line(118,eyebrowX,150,eyebrowY);
}

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.
    glassesRim = random(100,255);
    glassesColour = random (106,230);
    glassesSizeX = random(10,20);
    glassesSizeY = random (45,65);
    eyebrowX = random (175, 198);
    eyebrowY = random (175, 198);
    strandX = random (200,210);
    strandY = random (15,50);
    collarColor = random (0,134);
    mouth = random(53,255);
}

sketch

// ALec Albright
// Section B
// aalbrigh@andrew.cmu.edu
// Project 02

var hairHeight = 130;
var hairWidth = 365;
var hairRed = 230;
var foreheadH = 320;
var foreheadW = 160;
var foreheadBlue = 255;
var lowerRed = 240;
var noseBlue = 255;
var leftEyeY = 175;
var rightEyeY = 200;
var leftPupilX = 230;
var rightPupilX = 340;
var jawWeight = 30;

function setup(){
    height = 480
    width = 640
    createCanvas(width, height);
    angleMode(DEGREES);
}

function draw(){
    background("blue");
    // forehead
    fill(0, 255, foreheadBlue);
    noStroke();
    rect(140, 120, foreheadH, foreheadW);

    // lower half of face
    noStroke();
    fill(lowerRed, 0, 200);
    quad(125, 270, 475, 270, 370, 470, 250, 470);

    // mouth
    fill("black");
    arc(300, 370, 100, 40, -10, 170, PIE);

    // nose
    fill(153, 51, noseBlue);
    triangle(300, 230, 325, 320, 300, 330);

    // eyes
    fill("white");
    ellipse(240, leftEyeY, 45, 80);
    ellipse(350, rightEyeY, 60, 95);
    fill('black');
    ellipse(leftPupilX, leftEyeY + 15, 15, 30);
    ellipse(rightPupilX, rightEyeY + 20, 23, 40);

    // hair
    fill(hairRed, 130, 0);
    rect(120, 0, hairWidth, hairHeight, 160, 40, 60, 0);

    // jaw
    stroke('yellow');
    strokeWeight(jawWeight);
    line(150, 320, 250, 470);
    stroke("red");
    line(200, 445, 435, 445);
    stroke('limegreen');
    line(450, 295, 350, 505);
}

function mousePressed(){
    hairHeight = random(110, 150);
    hairWidth = random(335, 395);
    hairRed = random(0, 255);
    foreheadBlue = random(0, 255);
    foreheadH = random(300, 340);
    foreheadW = random(140, 180);
    lowerRed = random(0, 255);
    noseBlue = random(0, 255);
    leftEyeY = random(145, 205);
    rightEyeY = random(160, 240);
    leftPupilX = random(220, 260);
    rightPupilX = random(320, 360);
    jawWeight = random(10, 50);
    clear();
}

At the beginning of the process, I struggled to find what variables I would like to create, and what facial features I wanted to generate. I eventually wound up deciding that I wanted to change most structural aspects within constraints, a few color aspects, and absolutely let the pupils of the eyes cross if randomly selected to do so. Thus, I began toying with various features, dimensions, and colors until the result was a satisfying range of diversity in faces, based on my previous project.

Gnomes of the world unite!

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//Project-02

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var faceR = 141;
var faceG = 85;
var faceB = 36;
var eyeG = 0;
var eyeB = 0;
var shirtColor = 100;

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

function draw() {
    background(150);
    strokeWeight (1);
    stroke(0);

    // face
    fill (faceR, faceG, faceB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    
    //eyes
    fill (255);
    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);
    
    //pupils
    fill (0, eyeG, eyeB);
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);

    // //nose
    fill (185, 150, 130);
    var noseWidth = faceWidth * 0.15;
    var noseHeight = height / 2 + faceHeight * 0.15;
    triangle(width / 2, height / 2, width / 2 + noseWidth, noseHeight, width / 2 - noseWidth, noseHeight);

    //body
    fill(0, shirtColor, faceB);
    var bodyHeight = faceHeight * 4;
    var bodyX = width / 2;
    var bodyY = height/2 + bodyHeight /2 + faceHeight / 2;
    ellipse(bodyX, bodyY, faceWidth, bodyHeight);

    //hat
    fill(shirtColor, 0, faceB);
    var hatWidth = faceWidth / 2;
    var hatHeight = height / 2 - faceHeight / 3;
    triangle(width / 2, height / 2 - faceHeight, width / 2 - hatWidth, hatHeight, width / 2 + hatWidth, hatHeight);

    //mouth
    noFill();
    strokeWeight (3);
    var mouthHeight = faceHeight * 0.25;
    arc(width / 2, height / 2 + mouthHeight, faceWidth / 2, mouthHeight, 0, 180, OPEN);


    // //eyebrows
    var browLX = width / 2 - faceWidth * 0.25;
    var browRX = width / 2 + faceWidth * 0.25;
    arc(browLX, height / 2 - eyeSize, eyeSize, eyeSize, 200, 340, OPEN);
    arc(browRX, height / 2 - eyeSize, eyeSize, eyeSize, 200, 340, OPEN);

    //pupils
    fill (0);
    stroke (0, eyeG, eyeB);
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    //to random values within specified ranges.
    faceWidth = random(75, 300);
    faceHeight = random(115, 350);
    eyeSize = random(30, 50);
    eyeG = random(0, 255);
    eyeB = random(0, 255);
    shirtColor = random(100, 200);
    
    //random skin color generator
    var x = round(random (0.5, 5.5));

    // skin shade 1 -- Russet
    if (x == 1) {
        faceR = 141;
        faceG = 85;
        faceB = 36;
    } 

    // skin shade 2 -- Peru
    if (x == 2) {
        faceR = 198;
        faceG = 134;
        faceB = 66;
    } 

    // skin shade 3 -- Fawn
    if (x == 3) {
        faceR = 224;
        faceG = 172;
        faceB = 105;
    } 

    // skin shade 4 -- Mellow Apricot
    if (x == 4) {
        faceR = 241;
        faceG = 194;
        faceB = 125;
    } 

    // skin shade 5 -- Navajo White
    if (x == 5) {
        faceR = 255;
        faceG = 219;
        faceB = 172;
    } 


}

I wanted to create different gnomes and have their hat and shirt color be relative to each other, so I referenced the RGB value of the skin value. That way their outfits somehow match.

Also, I wanted to create real skin tones and used the generic 5 shade skin tones found here, and randomized it so that every time you click, the skin changes.

Finally, the eyebrows and smiles and the rest of the facial features are referencing each other so that they change proportionally with the face size and eye size.