Your concept
For my self-portrait, I had two main ideas I wanted to portray. First, I wanted to include something from Egypt. I landed on including the Pyramids as the background of the portrait. I really like how it looks and how it’s a subtle detail in the background that gets my idea across. The other detail I wanted to include some interactivity to do with taking off/putting on my glasses, since I recently started wearing contacts. I was showing my friend the self-portrait, when she gave me the idea to also change the background when I added the glasses, which I decided to incorporate. During the day, I included clouds as well as the sun in the background, at night, it’s replaced with stars and the moon (in addition to adding glasses on my face)!
A highlight of some code that you’re particularly proud of
// glasses
if (mouseIsPressed) {
strokeWeight(2);
fill(211, 211, 211, 100);
stroke("brown");
circle(305, 256, 50)
circle(378, 256, 50)
line (330, 253, 352, 253)
line(280, 253, 271, 246)
line(403, 253, 410, 246)
}
I’m proud of the code to add the glasses on my face. The code is pretty simple but I was excited to add something interactive to my code, so I like that the user can press to change up somethings in the portrait. After adding the glasses code, I added the code to change up the background (day/night).
// pyramids
let s = color ("#D6BF6F");
let c = color('#e2ca76');
fill(c);
stroke(s);
// pyramid of khufu
triangle(436, 400, 586, 166, 720, 377);
// pyramid of khafre
triangle(139, 390, 342, 40, 575, 400);
// pyramid of menkaure
triangle(0, 386, 147, 140, 298, 390);
I’m also proud of my code for the Pyramids, as simple as it may seem, it took me a while to get all the coordinates right. What I found especially helpful was using the cursor & printing the values of the coordinates to find where I should place each point of the triangles. I really like how the pyramids overlap over each other and I like that the outline becomes more visible at night.
Embedded sketch
How this was made
The first thing I completed was the Pyramids and sand in the background. Initially, I had place this code in the setup() function, rather than the draw() function, since I wasn’t planning to change the background. However, after deciding to have an interaction of changing the background between day and night, I moved the code to the draw() function. Throughout the code, the most helpful thing to figure out coordinates was definintely the print(mouseX, mouseY) line (which is commented out at the end of my code).
After completing the Pyramids, I started working on the actual portrait. I was a bit unsure on how I wanted to do my hijab, and I landed on an ellipse with a rectangle at the bottom. I also added a semi-circle with a rectangle at the bottom to mimic my body. For the face, I used ellipses, circles, semi-circles, triangles, lines, and rectangles, to complete all the features. Something that I found so tedious was the eyelashes. It was a bit to annoying to manually find the coordinates for each point on the line, especially since it was so small, so it took more time than I expected. I expected that drawing my eyebrows would be a bit difficult as I wasn’t sure how to draw a curve, and a line would’ve been too thin. However, after looking through the references, I realized I can just edit the stroke weight so that was helpful. The glasses were what I was most excited for in this portrait, and I love how they turned out since they look very similar to my current glasses.
The clouds, stars, sun, and moon were the last few details that I added. At first, I was struggling with getting the cloud shape correct as I was trying to do using an ellipse and the circles on the outside., but it didn’t look right. I decided to just find a YouTube tutorial and as soon as I started the video, I realized I was overcomplicating it for myself. I just used three circles for each cloud, the left and right circles are smaller and similar in size, while the middle circle is bigger than both circles. As for the sun, it was just a simple yellow circle, I just decided to add the transculent circle in the background as I thought it looked pretty. For the stars, I wanted to play around with the random() feature so that each star would be randomly placed everytime the user pressed the mouse. However, it didn’t really go as expected as the stars were just moving around instead. I tried playing around with some functions but it didn’t really work the way I wanted so in the end, I just manually wrote around 10 random coordinates for each star. The moon was pretty simple, I just placed it at the same location as the sun but just made it a tad bit smaller.
Throughout the code, I mostly referred to the p5.js reference page and just trial-and-error to get everything looking the way I wanted. I also used Google to find hex codes for everything, as well as also just selecting directly from the color gradients.
Code
function setup() {
createCanvas(700, 600);
}
function draw() {
// background is blue sky & sand at the bottom
// sky
if (mouseIsPressed) {
background('#00022e')
} else {
background('#448ee4');
}
if (mouseIsPressed) {
// moon
fill("white");
stroke("white");
circle(601, 79, 130)
color("white")
strokeWeight(5);
point(23,45);
point(100,76);
point(500,25);
point(340,132);
point(265,156);
point(45,190);
point(650,200);
point(130,10);
point(123,143);
point(600,12);
point(696,109);
point(210, 63)
point(462, 97)
point(484, 148)
point(318, 27)
} else {
// clouds
fill("white");
stroke("white");
circle(75, 67, 60)
circle(128,55, 80)
circle(176, 59, 60)
circle(275,111, 80)
circle(337,110, 120)
circle(407, 111, 80)
// sun
fill("orange");
stroke("orange");
circle(601, 79, 150)
fill(255, 255, 0, 50);
stroke(255, 255, 0 , 50);
circle(601, 79, 170)
}
// pyramids
let s = color ("#D6BF6F");
let c = color('#e2ca76');
fill(c);
stroke(s);
// pyramid of khufu
triangle(436, 400, 586, 166, 720, 377);
// pyramid of khafre
triangle(139, 390, 342, 40, 575, 400);
// pyramid of menkaure
triangle(0, 386, 147, 140, 298, 390);
// sand
// i added the code for the sand after the pyramids to cover the bottom outline of the pyramids
fill(c);
stroke(c);
rect(0, 389, 700, 600);
ellipse(118, 388, 264, 20);
ellipse(263, 429, 500, 100);
ellipse(577,400, 264, 50);
ellipse(646,400, 400, 60);
strokeWeight(1);
// hijab
let h = color("#808080");
fill(h);
stroke(h);
ellipse(340, 310, 200, 280);
rect(241, 335, 198, 100);
// face
let f = color("#f3c37e");
fill(f);
stroke(f);
ellipse(340, 290, 150, 210);
// eyes
fill("white");
stroke("white");
ellipse(305, 256, 40, 15);
ellipse(378, 256, 40, 15);
fill("#371d10");
stroke("black");
circle(305, 256, 15);
circle(378, 256, 15);
// eyelashes
line(292,250,289, 243);
line(297, 248, 295, 241);
line(302, 247, 301, 240);
line(307, 247, 307, 240);
line(312, 248, 313, 240);
line(317, 249, 319, 242);
line(366, 249, 362, 242);
line(370, 248, 369, 240);
line(375, 248, 374, 240);
line(380, 249, 380, 240);
line(384, 248, 386, 241);
line(388, 249, 392, 242);
// eyebrows
strokeWeight(8);
line(320, 230, 294, 228);
line(282, 234, 294, 228);
line(360, 230, 388, 228);
line(398, 234, 388, 228);
strokeWeight(1);
// nose
fill ("#DAB073");
stroke("#DAB073");
triangle(331, 311, 340, 280, 350, 311);
// body
let b = color("#800080");
fill(b);
stroke(b);
arc(340, 490, 210, 150, PI, TWO_PI);
rect(235, 490, 210, 110);
// mouth
fill("#a90830")
stroke("#a90830")
arc(340, 328, 85, 80, 0, PI);
// teeth
fill("white")
stroke("rgb(240,235,235)")
rect(305, 328, 9, 10);
rect(314, 328, 9, 10);
rect(322, 328, 9, 10);
rect(331, 328, 9, 10);
rect(340, 328, 9, 10);
rect(349, 328, 9, 10);
rect(358, 328, 9, 10);
rect(367, 328, 9, 10);
rect(324, 357, 9, 10);
rect(334, 358, 9, 10);
rect(343, 358, 9, 10);
rect(353, 356, 9, 10);
// glasses
if (mouseIsPressed) {
strokeWeight(2);
fill(211, 211, 211, 100);
stroke("brown");
circle(305, 256, 50)
circle(378, 256, 50)
line (330, 253, 352, 253)
line(280, 253, 271, 246)
line(403, 253, 410, 246)
}
// print(mouseX, mouseY);
}
Reflection and ideas for future work or improvements
Overall, I’m proud of my work, and I hope to continue improving in p5.js, especially when it comes to smaller details and learning to use more shapes (such as curves and quadrilaterals). I’m really happy I was able to add interactivity, and am especially happy with how the background turned out, and I hope to continue learning how to work with all the interactive features.
I do think there’s a lot of room for improvement in my work. I would love to work on the hijab in my portrait and try to make it more realistic. Additionally, I would’ve liked to have more realistic facial features which I hope will become easier the more familiar I become with p5.js.