Xu Xu – 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);
}