My default pose:)
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!