This document contains code that draws a face with geometric shapes and colors. It uses processing code to: 1. Set the size of the canvas and background color. 2. Draw the main background shapes on the left and right sides using vertices and colors. 3. Draw additional geometric shapes like hair, skin, eyes and shading on the face using vertices, colors and processing functions. 4. The code draws the face piece by piece, adding increasing levels of detail and layering with different colors.

1. //Olivia Meredith - 13510110
//Sketching With Code - Geometric Art
//Code draws a face with light streaks across the lower half of the photograph
//Sides were expanded (and detail added to the bottom??) to enhance composition
//Vertices are listed in a clockwise direction beginning closest to (0,0) unless otherwise specified
//Colours are numbered from light to dark (9 colours)
size(1920,1080);//size of canvas
background(255);//colour of canvas beneath shapes
noStroke();//turns off outline around shapes
//main background - left
fill(246,238,131);//colour #6 - yellow
beginShape();
vertex(8,219);
vertex(53,0);
vertex(206,0);
vertex(202,40);
vertex(248,209);
vertex(260,466);
vertex(289,664);
vertex(66,717);
vertex(7,716);
endShape(CLOSE);//closes shape so last point joins to first point (vital when working with a contrasting stroke)
//main background - right
fill(246,238,131);//colour #6 - yellow
quad(955,0,1920,0,1920,1080,783,1080);
//outer left faint hair
fill(244,163,88);//colour #7 - orange
beginShape();
vertex(206,0);

2. vertex(228,0);
vertex(250,108);
vertex(275,402);
vertex(308,657);
vertex(289,664);
vertex(260,466);
vertex(248,209);
vertex(202,40);
endShape(CLOSE);
//outer left medium hair
fill(246,102,55);//colour #8 - dark orange
beginShape();
vertex(228,0);
vertex(245,0);
vertex(287,254);
vertex(311,636);
vertex(349,651);
vertex(325,658);
vertex(308,657);
vertex(275,402);
vertex(250,108);
endShape(CLOSE);
//skin - upper (basic/larger shape, used as a base)
fill(247,238,191);//colour #2 - pale yellow
beginShape();
vertex(895,126);//top left of nose
vertex(1021,0);
vertex(1337,0);
vertex(1345,448);
vertex(556,596);
endShape(CLOSE);
//skin - lower (basic/larger shape, used as a base)

3. fill(247,238,191);//colour #2 - pale yellow
beginShape();
vertex(619,637);//top left (where light-green shade above intesects with thin light streak)
vertex(1301,519);
vertex(1300,585);
vertex(1320,663);
vertex(1345,686);
vertex(1469,681);
vertex(1506,671);
vertex(1479,743);
vertex(1431,748);
vertex(1388,696);
vertex(1180,668);
vertex(1161,678);
vertex(927,681);
vertex(922,681);
vertex(765,725);
vertex(752,704);
vertex(641,741);
vertex(630,739);
vertex(630,739);
endShape(CLOSE);
//inner left faint hair - lower
fill(244,163,88);//colour #7 - orange
quad(575,361,692,403,573,591,556,596);
//FIX COORDINATES AND COMMENTS
//inner left medium hair - lower
fill(246,102,55);//colour #8 - dark orange
beginShape();
vertex(563,350);//top left
vertex(584,330);
vertex(706,326);
vertex(750,372);

4. vertex(606,448);
vertex(605,421);
vertex(575,361);
vertex(585,558);
vertex(556,596);
endShape(CLOSE);
//left dark hair
fill(247,33,10);//colour #9 - red
beginShape();
vertex(245,0);
vertex(710,0);//skipped 5 verticies for layering purposes
vertex(832,87);
vertex(788,235);
vertex(706,326);
vertex(695,359);
vertex(623,416);
vertex(623,398);
vertex(584,330);
vertex(564,349);
vertex(556,596);
vertex(349,651);
vertex(311,636);
vertex(287,254);
endShape(CLOSE);
//inner left skin peep through - darker border
fill(244,163,88);//colour #7 - orange
beginShape();
vertex(710,0);
vertex(762,0);
vertex(718,72);
vertex(678,94);
vertex(691,28);
endShape();

5. //inner left skin peep through
fill(243,202,157);//colour #3 - apricot
beginShape();
vertex(721,0);
vertex(745,0);
vertex(706,68);
vertex(691,74);
vertex(691,57);
endShape(CLOSE);
//left hair highlight (1 of 3)
fill(246,102,55);//colour #8 - dark orange
beginShape();
vertex(369,305);
vertex(378,297);
vertex(392,312);
vertex(413,503);
vertex(408,510);
vertex(394,491);
vertex(366,368);
endShape(CLOSE);
//left hair highlight (2 of 3)
fill(246,102,55);//colour #8 - dark orange
quad(650,136,680,146,628,202,617,192);
//left hair highlight (3 of 3)
fill(246,102,55);//colour #8 - dark orange
quad(655,271,673,296,644,329,631,315);
//faint hair shading around left eye
fill(244,163,88);//colour #7 - orange
beginShape();
vertex(772,252);//top left/middle //skip two points for layering

6. vertex(852,169);
vertex(897,203);//point taken from below for layering
vertex(873,304);
vertex(750,372);
vertex(706,326);
endShape(CLOSE);
//inner left medium hair - upper (1 of 2)
fill(246,102,55);//colour #8 - dark orange
beginShape();
vertex(762,0);
vertex(919,0);//orange overlaps point to follow
vertex(888,88);
vertex(815,253);
vertex(798,266);
vertex(772,252);
vertex(788,235);
vertex(832,87);
vertex(788,102);
vertex(760,77);
vertex(718,72);
endShape(CLOSE);
//top middle left faint hair shadow
fill(244,163,88);//colour #7 - orange
beginShape();
vertex(919,0);
vertex(1021,0);
vertex(852,169);
vertex(888,88);
vertex(864,85);
endShape(CLOSE);
//top middle left highlight peep through
fill(243,202,157);//colour #3 - apricot

7. beginShape();
vertex(927,0);
vertex(963,0);
vertex(891,57);
endShape(CLOSE);
/*using the specific triangle function
triangle(927,0,963,0,891,57);*/
//inner left highlight peep through
fill(244,163,88);//colour #7 - orange
beginShape();
vertex(781,0);
vertex(822,0);
vertex(779,30);
endShape(CLOSE);
/*using the specific triangle function
triangle(781,0,822,0,779,30);*/
//inner left medium hair - upper (2 of 2)
fill(246,102,55);//colour #8 - dark orange
beginShape();
vertex(955,0);
vertex(988,0);
vertex(922,65);
vertex(912,54);
vertex(926,29);
endShape(CLOSE);
//inner top right faintest shadow
fill(243,202,157);//colour #3 - apricot
beginShape();
vertex(1021,0);
vertex(1227,0);
vertex(1052,101);
vertex(989,119);

8. vertex(1057,41);
vertex(1007,67);
vertex(947,74);
endShape(CLOSE);
//inner top far-right faintest shadow
fill(243,202,157);//colour #3 - apricot
quad(1243,0,1337,0,1294,27,1260,19);
//inner top far-right faintest shadow - below
fill(243,202,157);//colour #3 - apricot
quad(1294,27,1309,30,1271,64,1172,103);
//inner top far-right faintest shadow - below_2
fill(243,202,157);//colour #3 - apricot
beginShape();
vertex(1163,91);//begins at top-middle point
vertex(1172,103);
vertex(1112,128);
endShape(CLOSE);
/*using the specific triangle function
triangle(1163,91,1172,103,1112,128);*/
//inner top far-right faintest shadow - below_3
fill(243,202,157);//colour #3 - apricot
beginShape();
vertex(1112,128);//begins at top-middle point
vertex(1072,157);
vertex(1077,142);
endShape(CLOSE);
/*using the specific triangle function
triangle(1112,128,1072,157,1077,142);*/
//to the left and below right eye, faintest shadow
fill(243,202,157);//colour #3 - apricot

9. beginShape();
vertex(1072,157);
vertex(1408,438);
vertex(1345,447);
vertex(1267,391);
vertex(1139,356);
vertex(1026,290);
vertex(1033,186);
endShape(CLOSE);
//right upper side lighter hair
fill(244,163,88);//colour #7 - orange
beginShape();
vertex(1337,0);//top left
vertex(1619,0);//to be layered beneath
vertex(1616,385);
vertex(1603,414);
vertex(1408,439);
vertex(1356,394);
vertex(1234,366);
vertex(1231,369);
vertex(1193,364);
vertex(1192,361);
vertex(1139,357);
vertex(1136,335);
vertex(1191,330);
vertex(1177,309);
vertex(1157,322);
vertex(1148,268);
vertex(1114,283);
vertex(1123,322);
vertex(1115,325);
vertex(1075,272);
vertex(1040,260);
vertex(1072,157);

10. vertex(1112,128);
vertex(1271,64);
vertex(1309,30);
vertex(1294,27);
endShape(CLOSE);
//right upper side medium hair
fill(246,102,55);//colour #8 - dark orange
beginShape();
vertex(1353,0);
vertex(1587,0);
vertex(1593,281);
vertex(1576,410);
vertex(1411,429);
vertex(1385,400);
vertex(1404,309);
vertex(1396,287);
vertex(1234,366);
vertex(1192,361);
vertex(1192,350);
vertex(1263,336);
vertex(1291,303);
vertex(1266,274);
vertex(1235,279);
vertex(1182,316);
vertex(1142,258);
vertex(1112,272);
vertex(1069,261);
vertex(1079,236);
vertex(1175,199);
vertex(1332,220);
vertex(1366,246);
vertex(1380,230);
vertex(1344,144);
vertex(1240,130);

11. vertex(1241,132);
vertex(1207,136);
vertex(1151,159);
vertex(1101,142);
vertex(1137,117);
vertex(1292,94);
vertex(1394,137);
vertex(1400,106);
vertex(1394,26);
vertex(1390,14);
vertex(1376,16);
vertex(1353,33);
endShape(CLOSE);
//inner top right faint hair shadow
fill(244,163,88);//colour #7 - orange
beginShape();
vertex(1045,0);
vertex(1213,0);
vertex(1050,93);
vertex(1023,97);
vertex(1079,38);
vertex(1078,9);
vertex(1044,20);
endShape(CLOSE);
//strip of shading just below thin light strip - far right
fill(227,245,206);//colour #4 - lighter green
beginShape();
vertex(1455,490);
vertex(1559,476);
vertex(1911,453);
vertex(1911,461);
endShape(CLOSE);

12. //strip of shading on right side, just below thin light strip (above hair)
fill(243,202,157);//colour #3 - apricot
beginShape();
vertex(1351,510);//left
vertex(1455,490);
vertex(1612,480);
vertex(1605,488);
vertex(1354,514);
endShape(CLOSE);
//light hair just below thin light streak (right side)
fill(244,163,88);//colour #7 - orange
beginShape();
vertex(1354,514);//top left
vertex(1605,488);
vertex(1601,531);
vertex(1553,593);
vertex(1457,625);
vertex(1355,625);
vertex(1341,533);
endShape(CLOSE);
//medium hair just below thin light streak (right side) - left
fill(246,102,55);//colour #8 - dark orange
quad(1385,522,1423,508,1432,520,1410,557);//starts at left vertex
//medium hair just below thin light streak (right side) - right
fill(246,102,55);//colour #8 - dark orange
quad(1474,506,1521,511,1463,598,1443,571);//starts at top-left vertex
//left eye (lightest part)
fill(247,238,191);//colour #2 - pale yellow
quad(772,268,780,269,805,319,754,317);
//right eye (lightest part)

13. fill(247,238,191);//colour #2 - pale yellow
quad(1133,277,1167,315,1157,322,1126,294);
//left cheek and nose shading
fill(243,202,157);//colour #3 - apricot
beginShape();
vertex(895,126);//highest point
vertex(897,203);
vertex(880,394);
vertex(855,515);
vertex(836,541);
vertex(817,541);
vertex(799,521);
vertex(836,381);
vertex(694,417);
vertex(655,489);
vertex(677,563);
vertex(574,599);
vertex(322,667);
vertex(307,667);
vertex(212,693);
vertex(308,657);
vertex(325,658);
vertex(573,591);
vertex(692,403);
vertex(750,372);
vertex(783,337);
vertex(767,317);
vertex(795,298);
vertex(812,310);
vertex(836,284);
vertex(873,304);
vertex(879,239);
vertex(852,169);
endShape(CLOSE);

14. //right eye - dominate red poly
fill(247,33,10);//colour #9 - red
beginShape();
vertex(1151,242);//top left
vertex(1174,227);
vertex(1291,247);
vertex(1323,282);
vertex(1318,298);
vertex(1291,282);
vertex(1215,284);
vertex(1188,294);
endShape(CLOSE);
//right eye - right side of sclera
fill(243,202,157);//colour #3 - apricot
beginShape();
vertex(1261,278);
vertex(1283,302);
vertex(1257,330);
vertex(1210,337);
vertex(1197,329);
vertex(1211,321);
vertex(1242,297);
endShape(CLOSE);
//right eyebrow dark detailing
fill(247,33,10);//colour #9 - red
beginShape();
vertex(1161,126);//top left
vertex(1219,117);
vertex(1207,136);
vertex(1192,142);
vertex(1157,143);
endShape(CLOSE);

15. //under right eyebrow highlight - 1
fill(243,202,157);//colour #3 - apricot
beginShape();
vertex(1231,132);
vertex(1240,130);
vertex(1278,146);
vertex(1222,182);
vertex(1200,173);
endShape(CLOSE);
//under right eyebrow highlight - 2
fill(243,202,157);//colour #3 - apricot
quad(1325,143,1350,163,1315,205,1292,182);
//under right eyebrow highlight - 3 (lighter)
fill(247,238,191);//colour #2 - pale yellow
quad(1250,134,1268,145,1235,168,1222,158);//top left-middle
//right upper dark hair - 1
fill(247,33,10);//colour #9 - red
beginShape();
vertex(1455,0);//top left
vertex(1560,0);
vertex(1570,223);
vertex(1542,254);
vertex(1527,221);
vertex(1523,166);
endShape(CLOSE);
//right upper dark hair - 2
fill(247,33,10);//colour #9 - red
beginShape();
vertex(1518,297);//top
vertex(1530,370);

16. vertex(1520,402);
vertex(1488,416);
vertex(1486,394);
endShape(CLOSE);
//shading on the top-left side of light streak, incl. bottom left triangle
fill(247,238,191);//colour #2 - pale yellow
beginShape();
vertex(7,716);
vertex(66,716);
vertex(289,664);
vertex(212,693);
vertex(49,738);
vertex(17,803);
vertex(17,958);
vertex(134,1080);
vertex(8,1080);
endShape(CLOSE);
//shading on the top-right side of light streak
fill(227,245,206);//colour #4 - lighter green
beginShape();
vertex(574,599);//far left
vertex(677,563);
vertex(817,541);
vertex(836,541);
vertex(1113,481);
vertex(1345,447);
vertex(1617,411);
vertex(1912,394);
vertex(1912,406);
vertex(1607,423);
vertex(1298,461);
vertex(618,588);
endShape(CLOSE);

17. //off-white part of light streak (bottom-left, largest)
fill(247,238,240);//colour #1 - off-white
beginShape();
vertex(16,847);//top left vertex
vertex(230,793);
vertex(314,823);
vertex(692,816);
vertex(797,844);
vertex(975,890);
vertex(832,981);
vertex(434,1080);//bottom-right vertex (connects with bottom of canvas)
vertex(8,1080);
endShape(CLOSE);
//lighter bottom light streak shading - left/middle
fill(227,245,206);//colour #4 - lighter green
beginShape();
vertex(17,803);
vertex(349,719);
vertex(641,808);
vertex(765,725);
vertex(922,681);
vertex(927,681);
vertex(1161,678);//right cheek apricot & darker green meeting point
vertex(1226,712);
vertex(1266,721);
vertex(1197,866);
vertex(1085,930);
vertex(867,997);
vertex(864,1027);
vertex(679,1080);
vertex(434,1080);
vertex(832,981);
vertex(841,961);

18. vertex(831,949);
vertex(855,914);
vertex(860,922);
vertex(875,890);
vertex(797,844);
vertex(692,816);
vertex(314,823);
vertex(230,793);
vertex(17,847);
endShape(CLOSE);
//thin line of light
fill(247,238,240);//colour #1 - off-white
beginShape();
vertex(49,738);
vertex(307,667);
vertex(322,667);
vertex(618,588);
vertex(1298,461);
vertex(1607,423);
vertex(1911,406);
vertex(1911,453);
vertex(1559,476);
vertex(1455,490);
vertex(1351,510);
vertex(1331,511);
vertex(619,637);
vertex(349,719);
vertex(51,814);
vertex(17,803);
endShape(CLOSE);
//darker bottom light streak shading - left
fill(221,245,177);//colour #5 - darker green
beginShape();

19. vertex(289,751);
vertex(316,740);
vertex(630,739);
vertex(641,741);
vertex(752,704);
vertex(765,725);
vertex(641,808);
vertex(488,786);
vertex(321,781);
endShape(CLOSE);
//darker bottom light streak shading - middle (mouth)
fill(221,245,177);//colour #5 - darker green
beginShape();
vertex(928,815);//far left vertex
vertex(947,803);
vertex(1057,806);
vertex(1152,785);
vertex(1165,796);
vertex(1097,827);
vertex(1096,816);
vertex(946,824);
endShape(CLOSE);
//darker bottom light streak shading - right (incl. under & around mouth)
fill(221,245,177);//colour #5 - darker green
beginShape();
vertex(679,1080);//bottom left
vertex(864,1027);
vertex(867,997);
vertex(1085,930);
vertex(1197,866);
vertex(1266,721);
vertex(1226,712);
vertex(1161,678);

20. vertex(1180,668);
vertex(1388,696);
vertex(1431,748);
vertex(1479,743);
vertex(1506,671);
vertex(1469,681);
vertex(1524,626);
vertex(1538,658);
vertex(1640,573);
vertex(1912,568);//coordinated to sit beneath lighter green and off-white - right
vertex(1912,1026);//bottom right
vertex(1774,1024);
vertex(1528,937);
vertex(1425,948);
vertex(1387,923);
vertex(1273,913);
vertex(783,1080);
endShape(CLOSE);
//lighter bottom light streak shading - middle/right
fill(227,245,206);//colour #4 - lighter green
beginShape();
vertex(1482,789);//top left vertex
vertex(1496,767);
vertex(1510,798);
vertex(1487,899);
vertex(1470,916);
vertex(1460,894);
endShape(CLOSE);
//coordinated to sit beneath "off-white part of light streak (bottom-right)"
//lighter bottom light streak shading - right (RENAME?)
fill(227,245,206);//colour #4 - lighter green
beginShape();
vertex(1578,701);//far top-left vertex

21. vertex(1648,648);
vertex(1920,648);
vertex(1920,989);
vertex(1698,946);
vertex(1594,954);
vertex(1535,898);
endShape(CLOSE);
//just below thin light streak hair (left) - 1 of 3
fill(247,238,191);//colour #2 - pale yellow
quad(349,719,619,637,640,640,346,730);
//just below thin light streak hair (left) - 2 of 3
fill(246,238,131);//colour #6 - yellow
beginShape();
vertex(316,740);//top left
vertex(435,700);
vertex(600,645);
vertex(640,640);
vertex(630,739);
vertex(327,760);
vertex(312,755);
endShape(CLOSE);
//just below thin light streak hair (left) - 3 of 3
fill(244,163,88);//colour #7 - orange
beginShape();
vertex(435,700);
vertex(600,645);
vertex(594,707);
vertex(565,716);
vertex(453,718);
endShape(CLOSE);
//between left hair and left of nose, under thin light streak

22. fill(227,245,206);//colour #4 - lighter green
quad(619,637,826,600,803,618,640,640);
//above nose tip, below thin light streak
fill(227,245,206);//colour #4 - lighter green
quad(826,600,1331,511,1301,519,886,593);
//nose tip base
fill(246,238,131);//colour #6 - yellow
beginShape();
vertex(924,615);//top left
vertex(1042,588);
vertex(1072,562);
vertex(1084,615);
vertex(1023,665);
vertex(927,681);
vertex(922,681);
vertex(910,667);
endShape(CLOSE);
//left nostril outer
fill(243,202,157);//colour #3 - apricot
beginShape();
vertex(803,618);//far left point
vertex(826,600);
vertex(886,593);
vertex(924,615);
vertex(932,640);
vertex(840,647);
endShape(CLOSE);
//left nostril inner
fill(244,163,88);//colour #7 - orange
beginShape();
vertex(819,617);//top left

23. vertex(895,611);
vertex(932,640);
vertex(910,667);
vertex(840,647);
endShape(CLOSE);
//right nostril
fill(244,163,88);//colour #7 - orange
quad(1001,643,1034,614,1048,633,1011,650);//begins at top left
//bottom middle light streak shade
fill(247,238,191);//colour #2 - pale yellow
beginShape();
vertex(783,1080);
vertex(1273,913);
vertex(908,1080);
endShape(CLOSE);
/*using the specific triangle function
triangle(783,1080,1273,913,908,1080);*/
//light streak shade above right side of bottom hair chunk
fill(247,238,191);//colour #2 - pale yellow
quad(1406,924,1435,881,1470,948,1460,955);//left vertex
//bottom hair - faint
fill(244,163,88);//colour #7 - orange
beginShape();
vertex(908,1080);
vertex(1052,1014);
vertex(1518,960);
vertex(1529,986);
vertex(1532,1080);
endShape(CLOSE);
//bottom hair - medium

24. fill(246,102,55);//colour #8 - dark orange
beginShape();
vertex(1105,1080);
vertex(1510,977);
vertex(1489,1080);
endShape(CLOSE);
/*using the specific triangle function
triangle(1105,1080,1510,977,1489,1080);*/
//bottom hair - strong/dark
fill(247,33,10);//colour #9 - red
beginShape();
vertex(1244,1080);
vertex(1483,997);
vertex(1453,1080);
endShape(CLOSE);
/*using the specific triangle function
triangle(1244,1080,1483,997,1453,1080);*/
//off-white part of wider light streak (middle left)
fill(247,238,240);//colour #1 - off-white
beginShape();
vertex(848,829);//left vertex
vertex(891,822);
vertex(950,848);
vertex(916,876);
vertex(893,836);
vertex(875,867);
endShape(CLOSE);
//off-white part of wider light streak (middle right)
fill(247,238,240);//colour #1 - off-white
beginShape();
vertex(934,766);//far left vertex
vertex(945,758);

25. vertex(1092,742);
vertex(1101,753);
vertex(1094,774);
vertex(947,774);
endShape(CLOSE);
//coordinated to sit on top (only beneath "right-side border with top triangle")
//off-white part of wider light streak (bottom-right)
fill(247,238,240);//colour #1 - off-white
beginShape();
vertex(1655,753);//far-left vertex
vertex(1684,728);
vertex(1718,716);
vertex(1912,702);
vertex(1912,931);
vertex(1671,885);
vertex(1691,872);
vertex(1688,860);
vertex(1709,761);
endShape(CLOSE);
//bottom right-hand corner shading
fill(247,238,191);//colour #2 - pale yellow
quad(1586,1080,1817,1057,1913,1025,1913,1080);//starts at far left point
//light reflecting in right eye
fill(243,202,157);//colour #3 - apricot
ellipse(1192,266,14,14);
//The following two shapes have been split into triangles and rectangles to demonstrate use of diverse functions
//top-left corner triangle
fill(243,202,157);//colour #3 - apricot
beginShape();
vertex(0,0);

26. vertex(53,0);
vertex(0,271);
endShape(CLOSE);
/*using the specific triangle function
triangle(0,0,53,0,0,271);*/
//left border
fill(243,202,157);//colour #3 - apricot
rect(0,219,8,861);
//top-right border triangle
fill(243,202,157);//colour #3 - apricot
beginShape();
vertex(1865,0);
vertex(1920,0);
vertex(1920,256);
endShape(CLOSE);
/*using the specific triangle function
triangle(1865,0,1920,0,1920,256);*/
//right border
fill(243,202,157);//colour #3 - apricot
rect(1911,214,9,866);
//demonstrating the line function by creating a border around the entire image
/*stroke(0);
line(0,0,1920,0);//top
line(0,0,0,1080);//left
line(1919,0,1919,1079);//right (unable to be see (1920,0,1920,1080) on my display?)
line(0,1080,1920,1080);//bottom*/
//alternatively
/*noFill();
rect(0,0,1920,1080);*/