Project 01 – Self-Portrait

My default pose:)

Self-Portrait
function setup() {
    createCanvas(600,600);
    background(155, 154, 255, 255)
}

function draw() {
    //backhair
    fill(0);
    noStroke();
    rect(257, 362, 149, 237, 0, 105, 0, 0);

    noFill();
    stroke(255, 242, 165);
    strokeWeight(2);
    rect(260, 358, 151, 242, 0, 106, 0, 0);

    //shirt
    fill(255, 64, 34);
    noStroke();
    rect(96, 419, 292, 181, 0, 81, 0, 0);

    fill(244, 64, 34);
    noStroke();
    rect(438, 528, 83, 72, 0, 20, 0, 0);

    //neck
    fill(255,216,195);
    noStroke();
    rect(170,274,92,181);

    fill(255,216,195);
    noStroke();
    rect( 151, 419, 156, 81, 0, 0, 55, 0);

    //face
    strokeWeight(2);
    stroke(0);
    fill(255, 247, 227);
    rect(195, 222.5, 120, 170, 0, 0, 0, 400);

    fill(255, 247, 227);
    noStroke();
    ellipse(278, 223, 258);

        //coverface
        fill(155, 154, 255, 255);
        noStroke();
        rect(369, 162, 47, 160);

        //chin
        noStroke();
        fill(255, 247, 227);
        ellipse (312, 366.5, 52);


    //black long hair
    noStroke();
    fill(0);
    rect(86, 208, 112, 135);

    noStroke();
    fill(0);
    rect(29, 327, 169, 273, 106, 0, 0, 0);

    //blonde long hair
    fill(255, 242, 165);
    noStroke();
    rect(161, 208, 38, 399, 0, 0, 0, 37);

    noFill();
    stroke(255, 242, 165);
    strokeWeight(2);
    rect(157, 212, 42, 400, 0, 0, 0, 41)

    //eyes
        //white
        noStroke();
        fill(255);
        rect(245, 235, 29, 20, 0, 0, 0, 15);

        noStroke();
        fill(255);
        rect(356, 237, 13, 13, 0, 0, 0, 8);

        //pupil
        noStroke();
        fill(0);
        ellipse(275, 243, 26);

        noStroke();
        fill(0);
        ellipse(369, 243, 16);

        //eyeliner
        stroke(0);
        strokeWeight(3);
        line(248, 229, 273, 232);

        stroke(0);
        strokeWeight(3);
        line(369, 237, 387, 235);

        //eyebrow
        stroke(0);
        strokeWeight(3);
        line(220, 191, 289, 215);

        stroke(0);
        strokeWeight(2);
        line(326, 200, 390, 200);
        

    //nose
    noStroke();
    fill(0);
    ellipse(310, 300, 5);

    stroke(0);
    strokeWeight(2);
    noFill();
    arc(335, 297, 12, 12, 7*PI/4, PI/4);

    strokeWeight(2);
    line(326, 294, 326, 200);

    //lips
    noStroke();
    fill(255, 216, 195);
    ellipse(333, 345, 27);

    noStroke();
    fill(255, 151, 135);
    arc(333, 338, 47, 47, PI, 2*PI);

    noStroke();
    fill(255, 247, 227);
    ellipse(333, 315, 23);

    //cheek
    noStroke();
    fill(255, 151, 135, 120);
    ellipse(198, 311, 106);

    noStroke();
    fill(255, 151, 135, 120);
    ellipse(369, 280, 44);

    //bangs
        //right
        noStroke();
        fill(255, 242, 165);
        rect(311, 78, 91, 104, 0, 70, 0, 70);

        noStroke();
        fill(0);
        rect(311, 74, 91, 104, 0, 70, 0, 70);

        //left
        noStroke();
        fill(255, 242, 165);
        rect(86, 54, 253, 163, 142, 0, 146, 0);

        noStroke();
        fill(0);
        rect(86, 35, 260, 167, 145, 0, 150, 0);

    //hand
        //pointer
        noFill();
        stroke(255, 247, 227);
        strokeWeight(20);
        line(437, 405, 458, 486);

        //middle
        noFill();
        stroke(255, 247, 227);
        strokeWeight(20);
        line(496, 405, 471, 486);


    fill(255, 215, 195);
    noStroke();
    rect(438, 474, 83, 82, 23, 0, 36, 0);

        //4thfinger
        fill(255, 247, 227);
        noStroke();
        rect(487, 467, 20, 61, 10);

        //pinkie
        fill(255, 247, 227);
        noStroke();
        rect(504, 470, 20, 47, 10);

        //thumb
        noFill();
        stroke(255, 247, 227);
        strokeWeight(20);
        line(471, 486, 471, 540);

    fill(255, 247, 227);
    noStroke();
    rect(438, 496, 50, 59, 0, 46, 0, 0);

noLoop();

}

After sketching out different poses, I went into Illustrator to create my self-portrait so I could reference the dimensions and color codes of my shapes without as much guess-and-check. Translating the shapes into p5.js still took longer than expected, but it was pretty gratifying to see myself slowly building up a finished painting. Along the way, I realized that I was unable to replicate some rounded rectangles from Illustrator because p5.js does not recognize a radius as large as Illustrator does. This was frustrating but I came to enjoy the limitations of the program and my final result. I also wasn’t able to figure out how to rotate an object, so I ended up making my fingers out of strokes with a heavy stroke-weight– it worked!

Leave a Reply