![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
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
//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);
}