Category: F2024 – Aya

Concept:

The concept of my first assignment is to use JavaScript (p5) to code 2D primitive shapes to create a self-portrait. This involves carefully selecting the correct shapes and inputs (x-axis, y-axis, etc.), as well as determining how to fill shapes with color, and choosing the color and size of the shape strokes to achieve the final look.

In my self-portrait, I included two elements that are important to me. The first element is the night sky and the moon, as my favorite time of day is nighttime. The second element is the eyes, which hold significance because I have a twin (we are not biologically identical), but people often confuse us. To help others distinguish between us, I always suggest looking at our eye colors—I have greenish-grey eyes, while my twin has brown eyes.

Highlighted code:

I am proud of the final outcome I achieved, but I am especially proud of the eyes. I successfully layered different sizes of circles with various colors, perfectly centering them on top of each other. I am also proud of the eyelashes, as I was able to align them symmetrically opposite each other with the same length and size.

//eyes
fill(255);
circle(165,175,37);
circle(235,175,37);
fill('rgb(87,107,136)');
circle(165,175,27);
circle(235,175,27);
fill(0);
circle(165,175,15);
circle(235,175,15);
stroke(0);
strokeWeight(2);
line(147,170,140,165);
line(150,165,143,160);
line(153,160,146,155);
line(253,170,260,165);
line(250,165,257,160);
line(247,160,254,155);

Sketch:

Future Improvements:

In the future I would like to animate my work (example: make the eyes move), and I would like to learn how to draw curved lines (for example to learn how to draw the eyebrows).

Concept:

• As someone with limited coding experience, a highly simplified self portrait was the best choice for me to familiarize myself with the fundamentals of p5.js. I decided on utilizing blocks of color to illustrate my face in an artistic style reminiscent of the Animal Crossing games.

Highlights:

• I am proud of myself for managing to use two colored arcs to depict my middle-part bangs, which I had a little trouble coding as I was initially confused about how to flip the arc on the right horizontally.

//bangs
fill('#310707');
arc(70, 120, 260, 120, 0, HALF_PI);
arc(330,120, 260, 120, HALF_PI, PI);

Sketch:

Ideas for future improvements:

• While my portrait for this assignment effectively communicates the image of a face, it is a very simplified one that barely represents my likeness. If I were to make another portrait, I would like to experiment with layering more complex shapes with varying levels of opacity as a means of shading and coloring as you normally would while drawing on paper.
• I would also add more elements — be it a moving cloud,  a flying bird or an abstract flurry of colors — to the backdrop to create a livelier composition.

For this self portrait I was inspired by the art style of Toca Boca, a mobile video game I used to play a lot as a kid. So I attempted to create myself in that art style.

 Highlighted Code:
I am proud of this code because I originally was worried with how I would create the hijab, but I ended up simply creating a circle and making the “head” above it. Even though it’s just 2 circles on top of each other, I’m glad I found a simply solution.

//hijab
fill('#523F2D');
circle(width/2,height/2,270);

Reflection:

I’m happy with the final result, when starting I thought I wouldn’t be able to create what I envisioned. I did want to add some hair, and I tried with arc using HALF_PI but with the hijab it didn’t work so I scratched that idea. I think for future assignments I want to try to make my work interactive.