ghou-Project-01-Face

Taken from photograph and transformed into geometric shapes in Illustrator. Then I divided each space up into quadrilaterals or triangles and plotted them into JavaScript in Brackets

Self Portrait

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 01

function setup() {
    createCanvas(500,400);
    noStroke();
    background(135,206,250);255,192,203
    
    fill(255,192,203);
    quad(250,0,250,400,500,400,500,0);
    
    var ls = color(245,224,205);
    var ds = color(240,208,180);
    var lb = color(156,119,97);
    var db = color(146,109,90);
    var shade = color(74,50,34);
    var ulip = color(203,140,132);
    var llip = color(240,190,180);
    translate(-100,0);
//hairs
    fill(db);
    quad(200,37,232,95,291,48,265,15);
    quad(232,95,291,48,300,100,226,218);
    quad(300,100,226,218,259,211,298,155);
    quad(259,211,226,218,235,351,244,259);
    fill(lb);
    noStroke();
    quad(194,34,187,45,181,34,191,29);
    quad(181,34,175,61,185,64,187,45);
    quad(185,64,175,61,180,135,195,120);
    quad(195,120,180,135,164,179,171,179);
    triangle(164,223,148,281,152,340);
    quad(195,120,171,179,154,233,152,340);
    quad(208,176,198,144,195,120,205,139);
    quad(194,34,213,142,217,48,215,28);
    quad(217,48,215,28,223,17,222,34);
    quad(222,34,223,17,237,17,231,58);
    triangle(231,58,237,17,235,34);
    quad(237,17,235,34,246,51,246,31);
    quad(237,17,237,13,250,12,246,31);
    quad(246,31,250,12,266,27,270,51);
    quad(266,27,250,12,265,15,275,27);
    quad(226,218,213,142,217,48,232,95);
    triangle(244,259,259,211,253,289);

    fill(db);
    noStroke();
    quad(152,340,162,324,170,354,174,290);
    triangle(152,340,174,290,195,120);
    triangle(174,290,184,328,195,120);
    quad(184,284,190,240,201,214,195,120);
    quad(201,214,195,120,198,144,208,176);
    quad(189,26,194,34,215,28,210,10);
    quad(210,10,215,28,223,17,217,11);
    quad(217,11,223,17,237,17,230,6);
    quad(237,17,230,6,250,12,237,13);
    
//face highlights
    fill(ls);
    noStroke();
    quad(187,45,185,64,205,58,194,34);
    quad(188,63,195,61,196,70,195,64);
    quad(200,59,201,63,205,61,205,58);
    quad(195,61,200,59,202,67,196,74);
    quad(202,67,196,70,196,74,205,83);
    quad(205,83,196,74,195,76,194,78);
    quad(194,78,191,87,205,87,205,83);
    triangle(205,87,205,94,207,90);
    quad(205,87,206,98,197,90,191,87);
    triangle(197,90,191,92,191,87);
    quad(187,85,191,87,196,100,185,96);
    quad(185,96,211,93,214,112,194,116);
    quad(214,121,214,129,203,135,203,129);
    
//face lightshadows   
    fill(ds);
    noStroke();
    quad(185,71,190,68,191,76,186,78);
    quad(191,76,195,76,196,74,190,68);
    triangle(190,68,196,74,196,70);
    triangle(202,67,206,64,208,73);
    quad(208,73,202,67,205,83,210,89);
    quad(187,85,188,85,193,83,191,87);
    quad(191,92,191,96,197,96,197,90);
    quad(197,90,197,96,198,93,206,98);
    quad(196,100,195,105,200,102,199,101);
    quad(199,101,200,102,203,99,199,99);
    quad(214,112,214,121,195,120,201,120);
    quad(195,120,203,135,203,129,214,121);
    quad(203,135,205,139,213,142,214,129);
    
//nose shadow and eyelash
    fill(shade);
    noStroke();
    quad(191,96,196,100,199,101,197,96);
    quad(197,96,199,101,199,99,203,99);
    quad(203,99,197,96,198,93,206,98);
    triangle(184,83,188,85,187,81);
    quad(187,81,188,85,193,83,194,78);
    
//brows and creases
    fill(db);
    noStroke();
    quad(201,63,202,67,206,64,205,61);
    quad(185,71,184,68,185,64,189,63);
    quad(189,63,185,71,190,68,196,70);
    triangle(196,70,195,64,189,63);
    triangle(186,78,187,81,191,76);
    quad(191,76,187,81,194,78,195,76);
    quad(205,83,205,87,207,90,210,89);
    triangle(210,89,207,90,211,93);
    quad(211,93,206,98,206,94,207,90);
    quad(194,116,196,115,197,119,195,120);
    quad(195,120,197,119,204,118,201,120);
    
//upper and lower lip
    fill(llip);
    noStroke();
    quad(196,115,197,119,204,118,204,111);
    triangle(204,111,214,112,204,118);
    fill(ulip);
    quad(194,116,196,115,197,107,195,107);
    quad(196,115,197,107,200,106,204,111);
    triangle(200,106,204,111,214,112);

//pink dup
    translate(250,0);
    //hairs
    fill(db);
    quad(200,37,232,95,291,48,265,15);
    quad(232,95,291,48,300,100,226,218);
    quad(300,100,226,218,259,211,298,155);
    quad(259,211,226,218,235,351,244,259);
    fill(lb);
    noStroke();
    quad(194,34,187,45,181,34,191,29);
    quad(181,34,175,61,185,64,187,45);
    quad(185,64,175,61,180,135,195,120);
    quad(195,120,180,135,164,179,171,179);
    triangle(164,223,148,281,152,340);
    quad(195,120,171,179,154,233,152,340);
    quad(208,176,198,144,195,120,205,139);
    quad(194,34,213,142,217,48,215,28);
    quad(217,48,215,28,223,17,222,34);
    quad(222,34,223,17,237,17,231,58);
    triangle(231,58,237,17,235,34);
    quad(237,17,235,34,246,51,246,31);
    quad(237,17,237,13,250,12,246,31);
    quad(246,31,250,12,266,27,270,51);
    quad(266,27,250,12,265,15,275,27);
    quad(226,218,213,142,217,48,232,95);
    triangle(244,259,259,211,253,289);

    fill(db);
    noStroke();
    quad(152,340,162,324,170,354,174,290);
    triangle(152,340,174,290,195,120);
    triangle(174,290,184,328,195,120);
    quad(184,284,190,240,201,214,195,120);
    quad(201,214,195,120,198,144,208,176);
    quad(189,26,194,34,215,28,210,10);
    quad(210,10,215,28,223,17,217,11);
    quad(217,11,223,17,237,17,230,6);
    quad(237,17,230,6,250,12,237,13);
    
//face highlights
    fill(ls);
    noStroke();
    quad(187,45,185,64,205,58,194,34);
    quad(188,63,195,61,196,70,195,64);
    quad(200,59,201,63,205,61,205,58);
    quad(195,61,200,59,202,67,196,74);
    quad(202,67,196,70,196,74,205,83);
    quad(205,83,196,74,195,76,194,78);
    quad(194,78,191,87,205,87,205,83);
    triangle(205,87,205,94,207,90);
    quad(205,87,206,98,197,90,191,87);
    triangle(197,90,191,92,191,87);
    quad(187,85,191,87,196,100,185,96);
    quad(185,96,211,93,214,112,194,116);
    quad(214,121,214,129,203,135,203,129);
    
//face lightshadows   
    fill(ds);
    noStroke();
    quad(185,71,190,68,191,76,186,78);
    quad(191,76,195,76,196,74,190,68);
    triangle(190,68,196,74,196,70);
    triangle(202,67,206,64,208,73);
    quad(208,73,202,67,205,83,210,89);
    quad(187,85,188,85,193,83,191,87);
    quad(191,92,191,96,197,96,197,90);
    quad(197,90,197,96,198,93,206,98);
    quad(196,100,195,105,200,102,199,101);
    quad(199,101,200,102,203,99,199,99);
    quad(214,112,214,121,195,120,201,120);
    quad(195,120,203,135,203,129,214,121);
    quad(203,135,205,139,213,142,214,129);
    
//nose shadow and eyelash
    fill(shade);
    noStroke();
    quad(191,96,196,100,199,101,197,96);
    quad(197,96,199,101,199,99,203,99);
    quad(203,99,197,96,198,93,206,98);
    triangle(184,83,188,85,187,81);
    quad(187,81,188,85,193,83,194,78);
    
//brows and creases
    fill(db);
    noStroke();
    quad(201,63,202,67,206,64,205,61);
    quad(185,71,184,68,185,64,189,63);
    quad(189,63,185,71,190,68,196,70);
    triangle(196,70,195,64,189,63);
    triangle(186,78,187,81,191,76);
    quad(191,76,187,81,194,78,195,76);
    quad(205,83,205,87,207,90,210,89);
    triangle(210,89,207,90,211,93);
    quad(211,93,206,98,206,94,207,90);
    quad(194,116,196,115,197,119,195,120);
    quad(195,120,197,119,204,118,201,120);
    
//upper and lower lip
    fill(llip);
    noStroke();
    quad(196,115,197,119,204,118,204,111);
    triangle(204,111,214,112,204,118);
    fill(ulip);
    quad(194,116,196,115,197,107,195,107);
    quad(196,115,197,107,200,106,204,111);
    triangle(200,106,204,111,214,112);

}

Leave a Reply