haewanp – Project 01 – Self Portrait

haewanp_self_portrait

//Hae Wan Park
//15104-A
//haewanp@andrew.cmu.edu
//Assignment-01

function setup() {
    createCanvas (600, 550);
}

function draw() {
    background (95, 197, 191);
    stroke (92, 52, 103);
    strokeWeight (2.5);
    //Ear
    fill (255, 239, 201);
    ellipse (200, 280, 50, 50);
    ellipse (400, 280, 50, 50);
    //Face
    ellipse (300, 280, 206, 250);
    //Eyebrows
    line (278, 235, 237, 225);
    line (316, 235, 359, 225);
    //Eyes
    fill (255);
    ellipse (255, 270, 40, 20);
    ellipse (345, 270, 40, 20);
    fill (92, 52, 103);
    ellipse (255, 270, 12, 12);
    ellipse (345, 270, 12, 12);
    //Eyelash
    line (260, 260, 264, 249);
    line (250, 260, 245, 249);
    line (350, 260, 354, 249);
    line (340, 260, 335, 249);
    //Nose
    noFill ();
    beginShape ();
    vertex (299, 288);
    vertex (295, 308);
    vertex (281, 315);
    vertex (298, 322);
    endShape ();
    //Mouth
    fill (239, 65, 54);
    strokeJoin (ROUND);
    beginShape ();
    vertex (280, 358);
    vertex (288, 344);
    vertex (295, 354);
    vertex (300, 347);
    vertex (313, 358);
    vertex (297, 374);
    vertex (280, 358);
    vertex (313, 358);
    endShape ();
    //Hair
    fill (255, 231, 102);
    beginShape ();
    vertex (295, 115);
    bezierVertex (340, 140, 300, 205, 250, 200);
    bezierVertex (220, 200, 210, 240, 210, 260);
    bezierVertex (210, 300, 160, 290, 140, 270);
    bezierVertex (170, 280, 160, 260, 155, 240);
    bezierVertex (140, 160, 200, 140, 220, 150);
    bezierVertex (210, 130, 255, 90, 295, 115);
    endShape ();
    beginShape ();
    vertex (315, 130);
    bezierVertex (280, 170, 320, 205, 350, 200);
    bezierVertex (380, 200, 390, 240, 390, 260);
    bezierVertex (390, 300, 440, 290, 450, 270);
    bezierVertex (420, 280, 425, 260, 430, 240);
    bezierVertex (450, 160, 400, 170, 390, 160);
    bezierVertex (390, 160, 385, 160, 375, 140);
    bezierVertex (370, 130, 345, 100, 315, 130);
    endShape ();
    //cheek
    fill (250, 188, 150);
    noStroke ();
    ellipse (245, 310, 40, 40);
    ellipse (355, 310, 40, 40);
    //glasses
    noFill ();
    stroke (92, 52, 103);
    strokeWeight (6);
    ellipse (255, 270, 70, 66);
    ellipse (345, 270, 70, 66);
    line (290, 270, 310, 270);
    //body
    strokeWeight (2.5);
    fill (236, 0, 240);
    beginShape ();
    vertex (171, height);
    vertex (178, 500);
    bezierVertex (179, 500, 180, 450, 235, 450);
    vertex (380, 450);
    bezierVertex (380, 450, 415, 450, 420, 490);
    vertex (425, height);
    endShape ();
    fill (255, 239, 201);
    beginShape ();
    vertex (295 ,490);
    vertex (260, 450)
    vertex (275, 450);
    vertex (285, 405);
    vertex (310, 405);
    vertex (315, 450);
    vertex (335, 450);
    vertex (295 ,490);
    endShape();
}

It was fun to explore various methods in drawing shape with p5.js. Certain shapes were more difficult to control. Those shapes has more complicated rules than other simpler ones. Also, in the process, I had to understand and utilize geometry to place graphic elements to the exact spot that I want.