CONCEPT
Before I started working on my self-portrait, I looked for inspiration on Pinterest and found this photo.
I wanted to create something fun and bubbly, so I began with a simple circle for the head, following the form of my inspiration, and added more shapes to create the features. Initially, I only planned to create a basic head and body figure. However, as I continued working, I struggled with how to design the body and make it visually cohesive with the head. Because of this, I decided to hide half of the character’s body by adding a table and placing the arms on top of it. This solution helped simplify my concern, but it also led to another challenge: I found it difficult to create the hands in between the forearms or the ellipses that I placed on top of the table. To resolve this, I added a phone to fill the space, which allowed the pose to feel more natural.
This decision led me to the creation of a figure that looks like a girl watching something on her phone, an activity that reflects something I do every day. After adding the phone, I felt that the figure was still lacking something. This led me to add animation to the piece. I realized that when people watch content on their phones, light from the screen reflects onto their faces. To create this effect, I used an ellipse to create a light source and hid parts of it under the bangs so that it would appear as though the glow was coming directly from the phone. To make it more realistic, I researched whether it was possible to create a flickering light effect on a loop. I found a video on YouTube that showed me how frame count works, and I asked for guidance from an AI on how to apply this concept to the ellipses I used to represent the phone’s light.
HIGHLIGHT
One of the biggest challenges I faced with this project was creating the hair. Initially, I intended to recreate my current hairstyle, but I found it too complex. As a result, I chose to recreate a previous version of my hairstyle when I had bangs and wavy hair. To achieve this, I experimented with layering ellipses on top of a rectangle to suggest waves and texture in the hair, and I adjusted the rotation of the ellipses to shape the bangs more naturally. Another challenge was animating the phone light so that it would blink continuously on a loop. Even after adding the ellipse that represents the phone’s light, it took me a lot of time to figure out how to animate it in a way that it would really look like the character was watching something on her screen.
//hair noStroke(); fill(0); arc(300,242,236,210,360,QUARTER_PI); fill(0); rect(181.5,240,237); fill(0); ellipse (195,305,50,145); fill(0); ellipse (195,405,50,145); fill(0); ellipse (402,305,50,145); fill(0); ellipse (402,405,50,145); push(); // bangs translate(250, 230); rotate(-PI / 6); fill(0); ellipse(0, 0, 150, 100); translate(80, 40); rotate(-PI / 6); fill(0); ellipse(0, 0, 100, 170); fill(0); triangle(-130,-110,-80,-100,-160,-57); fill(0); triangle(-70, 100, -2, 50, 10, 87); pop();
//light from the phone noStroke(); fill(255, 255, 255, 50 + sin(frameCount * 0.09) * 20); ellipse(300, 340, 227, 280);
REFLECTION
After completing the final touches, I felt relieved and satisfied with how the project turned out. Although the final outcome differed from what I originally expected, I believe it was successful, and I genuinely enjoyed the process of creating it.
Here’s the final code:
function setup() {
createCanvas(600, 600);
}
function draw() {
background(130);
//window
fill(192);
stroke(255);
strokeWeight(30);
rect(100,50,400,300,0)
fill(255);
noStroke();
rect(275,50,50,150,0)
fill(255);
noStroke();
rect(100,180,390,50,0)
//hair
noStroke();
fill(0);
arc(300,242,236,210,360,QUARTER_PI);
fill(0);
rect(181.5,240,237);
fill(0);
ellipse (195,305,50,145);
fill(0);
ellipse (195,405,50,145);
fill(0);
ellipse (402,305,50,145);
fill(0);
ellipse (402,405,50,145);
//neck
noStroke();
fill('#D5C29B');
rect(270,400,60);
//head
fill('rgb(248,229,190)');
ellipse (300,300,200,240);
noStroke();
//left ear
fill('#EBDBB8');
ellipse (200,310,35,60)
noStroke();
//right ear
fill('rgb(248,229,190)');
ellipse (400,310,35,60)
noStroke();
//shirt
fill('#784E80');
ellipse(300,480,470,100);
fill('#E5D1A6');
ellipse(300,434,60,27);
//table
fill(23);
rect(0,490,600);
//light from the phone
noStroke();
fill(255, 255, 255, 50 + sin(frameCount * 0.09) * 20);
ellipse(300, 340, 227, 280);
//left thumb
fill('#E5D1A6');
rect(263,430,20,37,22);
// right thumb
fill('#E5D1A6');
rect(323,430,20,37,22);
//phone
fill(40);
rect(275,420,55,90,10);
//forearms
fill('#EBDBB8');
ellipse(173,480,230,70);
fill('#EBDBB8');
ellipse(430,480,230,70);
//hands
fill('#F8E5BE');
rect(233,450,55,70,22);
fill('#F8E5BE');
rect(313,450,55,70,22);
push();
// bangs
translate(250, 230);
rotate(-PI / 6);
fill(0);
ellipse(0, 0, 150, 100);
translate(80, 40);
rotate(-PI / 6);
fill(0);
ellipse(0, 0, 100, 170);
fill(0);
triangle(-130,-110,-80,-100,-160,-57);
fill(0);
triangle(-70, 100, -2, 50, 10, 87);
pop();
//right eye
fill(0);
circle(252,325,45);
fill(255);
circle(252,329,45);
//left eye
fill(0);
circle(345,325,45);
fill(255);
circle(345,329,45);
//right pupil
fill(190);
circle (343,334,35);
fill (70);
circle(342,339,25);
fill (255)
circle(350,337,10);
//left pupil
fill(190);
circle (254,334,35);
fill (70);
circle(255,338,25);
fill (255)
circle(262,337,10);
//nose
fill ("#F1DABD")
triangle (310,370,298,329,290,370)
//left eyelash
stroke(0);
strokeWeight(3);
line(236, 309, 228, 305);
stroke(0);
strokeWeight(3);
line(230, 315, 220, 312);
stroke(0);
strokeWeight(3);
line(228, 324, 220, 324);
//right eyelash
stroke(0);
strokeWeight(3);
line(364, 314, 375, 308);
stroke(0);
strokeWeight(3);
line(368, 320, 382, 316);
stroke(0);
strokeWeight(3);
line(369, 327, 379, 326);
//left earring
fill('yellow');
noStroke();
circle(200,345,20);
fill(0)
noStroke();
circle(203,347,11);
//right earring
fill('yellow');
noStroke();
circle(400,345,20);
fill(0);
noStroke();
circle(396,347,11);
//upper lip
fill('rgb(242,174,186)');
ellipse(295,388,17,10);
fill('rgb(242,174,186)');
ellipse(307,388,17,10);
//lower lip
fill('rgb(242,174,186)');
ellipse(301,393,35,15);
//lip line
stroke('rgb(216,146,159)');
strokeWeight(2);
line(285,392,316,392);
//left eyebrows
stroke(20);
strokeWeight(4);
line(230,295,276,293);
//right eyebrows
stroke(20);
strokeWeight(4);
line(320,293,370,295);
}