This is my first attempt at p5.js. I’ve tried to reflect my personal preferences and appearances in this “self-portrait”. My idea is to portray a Bangladeshi girl with big eyes, dark lipstick, and blush wearing a dress and a necklace. I matched the skin color with my own complexion, and the hair color with my hair highlight’s color. Concept wise I think the intention was to personalize the drawing as much as I can using only the simple shapes like ellipse, circle, arc, rectangles and straight lines. I tried to make the colors pop and to make it very detailed for example the necklace is similar to an actual one that I have with an Emerald stone, then the parting between the hair which is something very prominent in my appearance. Placing the lips and the eyelashes were the most difficult part for me I think.
I added interactivity with a smile formed on the mouth upon mouse-click with the if-else statement and mouseIsPressed function. So if you click on the image the lips change to a smile.
For improvements I think adding interactivity with the eyes opening and closing periodically and having some texts would have been nice. Also maybe making it a full-body self-portrait would be a very detailed development I believe which I intend to work on later. Overall, I loved playing with the numbers and parameters and colors and shapes to make it more and more perfect to the reality.
function setup() {
createCanvas(500, 500);
background(255, 182, 193); //Pink background
}
function draw() {
//Hair
noStroke();
fill(90, 56, 37); // Hair color
arc(250, 140, 200, 180, PI, 0); // Top hair
rect(150, 140, 200, 300); // Side hair
//Neck
fill(230, 180, 145);
rect(200, 260, 100, 70);
//Dress
fill(220, 0, 100);
arc(250, 445, 250, 300, PI, 0, OPEN);
//Necklace Design
noFill();
strokeWeight(2);
stroke(255);
arc(250, 320, 137, 200, 0, PI);
arc(250, 317, 127, 190, 0, PI);
stroke(0);
fill(31.4, 78.4, 49);
ellipse(250, 416, 9, 12);
//Face
stroke(0);
strokeWeight(1);
fill(230, 180, 145); //Skin color
ellipse(250, 200, 170, 195); //Face shape
//Eyes
fill(255); //White of the eyes
ellipse(215, 180, 40, 20); //Left eye
ellipse(285, 180, 40, 20); //Right eye
fill(0); //Pupil color
ellipse(215, 180, 10, 20); //Left pupil
ellipse(285, 180, 10, 20); //Right pupil
// Eyelashes
stroke(0);
strokeWeight(0.5);
// Left eye eyelashes
for (let i = 0; i < 5; i++) {
line(190 + i * 6, 162, 200 + i * 6, 172);
}
// Right eye eyelashes
for (let i = 0; i < 5; i++) {
line(278 + i * 6, 172, 288 + i * 6, 162);
}
// Eyebrows
strokeWeight(2);
noFill();
arc(215, 167, 40, 20, PI, TWO_PI); //Left eyebrow
arc(285, 167, 40, 20, PI, TWO_PI); //Right eyebrow
//Middle parting of Hair
strokeWeight(1);
line(250, 52, 250, 103);
//Nose
noFill();
strokeWeight(1);
arc(250, 210, 10, 15, 180, 90, OPEN);
//Blush
noStroke();
fill(255, 192, 203);
ellipse(195, 210, 20, 10);
ellipse(305, 210, 20, 10);
//Forming a smiley face when mouse is pressed
if(mouseIsPressed){
noFill();
stroke(0);
arc(250, 225, 80, 45, 120, 103);
fill(255);
arc(250, 225, 58, 70, 120, 103, OPEN);
}
else{
//Lips
fill(128, 0, 0); //Lip color
noStroke();
arc(260, 250, 28, 12, PI, 0);
arc(240, 250, 28, 12, PI, 0);
arc(250, 250, 50, 20, 0, PI);
}
}