Jessica Timczyk – Project 1 – Self Portrait

jessface

//Jessica Timczyk
//Section D
//jtimczyk@andrew.cmu.edu
//project-01

function setup() {
    createCanvas(900, 600);
    background(255);
}

function draw() {
    //eyeliner
    noStroke(); 
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(372, 170);
    curveVertex(372, 170);
    curveVertex(367, 154);
    curveVertex(397, 127);
    curveVertex(441, 122);
    curveVertex(414, 118);
    curveVertex(392, 122);
    curveVertex(372, 138);
    curveVertex(361, 150);
    curveVertex(361, 150);
    endShape();

    //eyelash 1 
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(441, 122);
    curveVertex(441, 122);
    curveVertex(460, 110);
    curveVertex(472, 96);
    curveVertex(453, 110);
    curveVertex(432, 120);
    curveVertex(432, 120);
    endShape();

    // eyelash 2
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(436, 120);
    curveVertex(436, 120);
    curveVertex(445, 104);
    curveVertex(444, 89);
    curveVertex(439, 103);
    curveVertex(426, 120);
    curveVertex(426, 120);
    endShape();

    //eyelash 3
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(427, 120);
    curveVertex(427, 120);
    curveVertex(433, 100);
    curveVertex(429, 88);
    curveVertex(427, 104);
    curveVertex(417, 119);
    curveVertex(417, 119);
    endShape();

    //eyelash 4
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(414, 118);
    curveVertex(414, 118);
    curveVertex(418, 105);
    curveVertex(414, 92);
    curveVertex(410, 110);
    curveVertex(400, 123);
    curveVertex(400, 123);
    endShape();

    //eyelash 5
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(396, 125);
    curveVertex(396, 125);
    curveVertex(398, 112);
    curveVertex(392, 103);
    curveVertex(391, 117);
    curveVertex(387, 127);
    curveVertex(387, 127);
    endShape();

    //eyelash 6
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(382, 131);
    curveVertex(382, 131);
    curveVertex(381, 122);
    curveVertex(371, 113);
    curveVertex(373, 130);
    curveVertex(372, 140);
    curveVertex(372, 140);
    endShape();

    //eyelash 7
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(372, 142);
    curveVertex(372, 142);
    curveVertex(367, 134);
    curveVertex(361, 130);
    curveVertex(364, 141);
    curveVertex(363, 154);
    curveVertex(363, 154);
    endShape();

    // iris
    noFill();
    strokeWeight(3);
    stroke(0);
    curveTightness(.5);
    beginShape();
    curveVertex(383, 136);
    curveVertex(383, 136);
    curveVertex(393, 144);
    curveVertex(407, 143);
    curveVertex(413, 135);
    curveVertex(414, 127);
    curveVertex(410, 132);
    curveVertex(400, 134);
    curveVertex(393, 126);
    curveVertex(393, 126);
    endShape();

    // bottom eyelid
    curveTightness(.5);
    beginShape();
    curveVertex(440, 120);
    curveVertex(440, 120);
    curveVertex(435, 132);
    curveVertex(426, 142);
    curveVertex(415, 152);
    curveVertex(432, 142);
    curveVertex(441, 132);
    curveVertex(445, 120);
    endShape();

    // eyebrow
    fill(0);
    noStroke();
    curveTightness(.7);
    beginShape();
    curveVertex(327, 122);
    curveVertex(327, 122);
    curveVertex(356, 95);
    curveVertex(395, 72);
    curveVertex(423, 66);
    curveVertex(454, 68);
    curveVertex(424, 52);
    curveVertex(401, 49);
    curveVertex(378, 58);
    curveVertex(355, 74);
    curveVertex(334, 91);
    curveVertex(320, 105);
    curveVertex(320, 105);
    endShape();

    //eyebrow shadow
    fill(151, 149, 148);
    curveTightness(.25);
    beginShape();
    curveVertex(350, 119);
    curveVertex(350, 119);
    curveVertex(330, 137);
    curveVertex(325, 149);
    curveVertex(326, 162);
    curveVertex(333, 169);
    curveVertex(341, 175);
    curveVertex(359, 189);
    curveVertex(350, 170);
    curveVertex(343, 153);
    curveVertex(345, 136);
    curveVertex(345, 136);
    endShape();

    //under eye shadow 1
    fill(83, 82, 82);
    curveTightness(.25);
    beginShape();
    curveVertex(410, 189);
    curveVertex(410, 189);
    curveVertex(444, 165);
    curveVertex(470, 141);
    curveVertex(469, 182);
    curveVertex(463, 214);
    curveVertex(438, 200);
    curveVertex(438, 200);
    endShape();

    //cheak shadow
    fill(0);
    curveTightness(.25);
    beginShape();
    curveVertex(501, 74);
    curveVertex(501, 74);
    curveVertex(507, 75);
    curveVertex(511, 86);
    curveVertex(516, 100);
    curveVertex(524, 115);
    curveVertex(537, 130);
    curveVertex(548, 146);
    curveVertex(560, 168);
    curveVertex(564, 179);
    curveVertex(565, 192);
    curveVertex(567, 202);
    curveVertex(570, 212);
    curveVertex(578, 228);
    curveVertex(586, 242);
    curveVertex(588, 248);
    curveVertex(587, 254);
    curveVertex(581, 244);
    curveVertex(564, 232);
    curveVertex(547, 222);
    curveVertex(536, 219);
    curveVertex(527, 221);
    curveVertex(518, 223);
    curveVertex(508, 225);
    curveVertex(498, 225);
    curveVertex(490, 224);
    curveVertex(482, 222);
    curveVertex(477, 218);
    curveVertex(486, 209);
    curveVertex(498, 191);
    curveVertex(509, 172);
    curveVertex(513, 157);
    curveVertex(515, 143);
    curveVertex(513, 125);
    curveVertex(509, 108);
    curveVertex(502, 88);
    curveVertex(502, 88);
    endShape();

    //nose line
    curveTightness(1);
    beginShape();
    curveVertex(301, 152);
    curveVertex(301, 152);
    curveVertex(309, 169);
    curveVertex(325, 182);
    curveVertex(346, 199);
    curveVertex(360, 210);
    curveVertex(374, 211);
    curveVertex(374, 211);
    endShape();

    //right nostril
    curveTightness(.5);
    beginShape();
    curveVertex(387, 226);
    curveVertex(387, 226);
    curveVertex(397, 226);
    curveVertex(406, 228);
    curveVertex(418, 235);
    curveVertex(417, 245);
    curveVertex(415, 251);
    curveVertex(410, 256);
    curveVertex(403, 259);
    curveVertex(396, 258);
    curveVertex(395, 247);
    curveVertex(394, 235);
    curveVertex(394, 235);
    endShape();

    //nose button
    fill(151, 149, 148);
    beginShape();
    curveVertex(330, 213);
    curveVertex(330, 213);
    curveVertex(345, 231);
    curveVertex(356, 246);
    curveVertex(361, 263);
    curveVertex(368, 261);
    curveVertex(377, 258);
    curveVertex(383, 250);
    curveVertex(383, 242);
    curveVertex(379, 237);
    curveVertex(363, 230);
    curveVertex(360, 228);
    curveVertex(360, 228);
    endShape();

    //left nostril
    fill(0);
    beginShape();
    curveVertex(375, 279);
    curveVertex(375, 279);
    curveVertex(357, 281);
    curveVertex(356, 295);
    curveVertex(366, 297);
    curveVertex(376, 286);
    curveVertex(376, 286);
    endShape();

    //left nose shadow
    fill(0);
    beginShape();
    curveVertex(286, 203);
    curveVertex(286, 203);
    curveVertex(299, 204);
    curveVertex(314, 214);
    curveVertex(326, 227);
    curveVertex(342, 248);
    curveVertex(343, 272);
    curveVertex(341, 291);
    curveVertex(334, 284);
    curveVertex(324, 251);
    curveVertex(305, 224);
    curveVertex(305, 224);
    endShape();

    //lip shadow
    beginShape();
    curveVertex(402, 268);
    curveVertex(402, 268);
    curveVertex(415, 282);
    curveVertex(424, 285);
    curveVertex(444, 268);
    curveVertex(422, 269);
    curveVertex(422, 269);
    endShape();

    //lip
    curveTightness(0);
    beginShape();
    curveVertex(510, 274);
    curveVertex(510, 274);
    curveVertex(460, 277);
    curveVertex(429, 287);
    curveVertex(423, 299);
    curveVertex(411, 302);
    curveVertex(396, 328);
    curveVertex(387, 362);
    curveVertex(401, 372);
    curveVertex(430, 370);
    curveVertex(473, 357);
    curveVertex(500, 326);
    curveVertex(512, 297);
    curveVertex(512, 297);
    endShape();

    //chin shadow
    beginShape();
    curveVertex(578, 315);
    curveVertex(578, 315);
    curveVertex(550, 385);
    curveVertex(530, 411);
    curveVertex(462, 432);
    curveVertex(494, 438);
    curveVertex(554, 444);
    curveVertex(570, 428);
    curveVertex(583, 379);
    curveVertex(583, 379);
    endShape();

    //left cheek shadow
    beginShape();
    curveVertex(252, 324);
    curveVertex(252, 324);
    curveVertex(264, 345);
    curveVertex(273, 358);
    curveVertex(292, 368);
    curveVertex(310, 380);
    curveVertex(319, 393);
    curveVertex(330, 402);
    curveVertex(349, 412);
    curveVertex(372, 411);
    curveVertex(351, 399);
    curveVertex(337, 382);
    curveVertex(333, 365);
    curveVertex(322, 356);
    curveVertex(294, 344);
    curveVertex(270, 335);
    curveVertex(270, 335);
    endShape();

    //neck
    beginShape();
    curveVertex(479, 468);
    curveVertex(479, 468);
    curveVertex(521, 486);
    curveVertex(550, 504);
    curveVertex(559, 527);
    curveVertex(530, 569);
    curveVertex(498, 600);
    curveVertex(521, 548);
    curveVertex(527, 522);
    curveVertex(516, 506);
    curveVertex(516, 506);
    endShape();

    //hair
    fill(150);
    noStroke();
    beginShape();
    curveVertex(249, 70);
    curveVertex(249, 70);
    curveVertex(267, 115);
    curveVertex(284, 184);
    curveVertex(288, 256);
    curveVertex(254, 325);
    curveVertex(225, 368);
    curveVertex(227, 407);
    curveVertex(263, 433);
    curveVertex(288, 413);
    curveVertex(284, 401);
    curveVertex(296, 414);
    curveVertex(300, 438);
    curveVertex(293, 458);
    curveVertex(263, 474);
    curveVertex(222, 458);
    curveVertex(241, 499);
    curveVertex(287, 534);
    curveVertex(354, 556);
    curveVertex(382, 600);
    curveVertex(194, 600);
    curveVertex(190, 551);
    curveVertex(167, 518);
    curveVertex(134, 492);
    curveVertex(121, 424);
    curveVertex(130, 378);
    curveVertex(175, 325);
    curveVertex(187, 271);
    curveVertex(154, 200);
    curveVertex(125, 135);
    curveVertex(137, 73);
    curveVertex(189, 49);
    curveVertex(236, 55);
    curveVertex(236, 55);
    endShape();

    //right lip accent
    fill(0);
    beginShape();
    curveVertex(443, 308);
    curveVertex(443, 308);
    curveVertex(450, 310);
    curveVertex(459, 311);
    curveVertex(474, 293);
    curveVertex(487, 285);
    curveVertex(467, 285);
    curveVertex(454, 290);
    curveVertex(447, 291);
    curveVertex(444, 298);
    curveVertex(444, 298);
    endShape();

    //left lip accent
    beginShape();
    curveVertex(432, 317);
    curveVertex(432, 317);
    curveVertex(421, 313);
    curveVertex(415, 324);
    curveVertex(402, 347);
    curveVertex(417, 336);
    curveVertex(430, 328);
    curveVertex(430, 328);
    endShape();

    //bottom lip accent
    fill(122, 122, 122);
    beginShape();
    curveVertex(407, 361);
    curveVertex(407, 361);
    curveVertex(434, 360);
    curveVertex(466, 350);
    curveVertex(488, 329);
    curveVertex(497, 303);
    curveVertex(494, 297);
    curveVertex(487, 301);
    curveVertex(471, 319);
    curveVertex(463, 322);
    curveVertex(462, 328);
    curveVertex(453, 328);
    curveVertex(447, 336);
    curveVertex(441, 337);
    curveVertex(436, 337);
    curveVertex(425, 349);
    curveVertex(425, 349);
    endShape();

    //right hair
    fill(150);
    beginShape();
    curveVertex(222, 42);
    curveVertex(222, 42);
    curveVertex(249, 58);
    curveVertex(288, 64);
    curveVertex(335, 56);
    curveVertex(371, 36);
    curveVertex(423, 35);
    curveVertex(448, 47);
    curveVertex(476, 56);
    curveVertex(494, 61);
    curveVertex(539, 70);
    curveVertex(593, 98);
    curveVertex(600, 105);
    curveVertex(600, 84);
    curveVertex(572, 35);
    curveVertex(261, 34);
    curveVertex(261, 34);
    endShape();

    //tearduct
    fill(0);
    beginShape();
    curveVertex(288, 224);
    curveVertex(288, 224);
    curveVertex(294, 230);
    curveVertex(294, 231);
    curveVertex(300, 227);
    curveVertex(287, 225);
    curveVertex(287, 225);
    endShape();
}

While creating this piece I gained proficiency in implementing basic objects within p5.js. Entering immense amounts of coordinates for the complex facial shapes was tedious and by the end of the process I learned to create the shapes as efficiently as possible.