Author: Amena Al Rawi

Concept

My goal for this assignment was to create a semi-realistic portrait of myself using the primitive shapes we explored in class such as: circles, ellipses, rectangles, quads, etc.

How this was made

I first started by mapping out where the face would be, then I added the hair underneath. Next I mapped out the shoulders and torso. Once that was done I started mapping out the facial features and adding my desired colors. For the colors, I searched up an rgb color picker that allowed me to easily customize my colors and extract the rgb components. In order to make sure that I wasn’t getting confused throughout the process, I added comments separating different parts of the drawing.

Other than the rgb picker and the p5js reference, no other tools were used.

Highlight of some code

After mapping out certain areas I began with filling in with color. I found the bangs and neck area especially difficult for different reasons. For the bangs, I noticed that using multiples of PI for the start and stop would result in awkward gaps across the forehead or would extend past the hair, so I experimented by incrementing different values of PI to see what looked best. As for the neck, it was made by two arcs facing outwards which I quickly realized meant that I couldn’t simply fill the space in between. To fix this, I incorporated the use of triangles and quadrilaterals in between which took some trial and error to find the exact coordinates needed to fill in the area.

Code for bangs:

//bangs
fill(79, 55, 32);
arc(395,155, 200, 140, HALF_PI-0.1, PI+0.3);
arc(220,135, 200, 140, 0-0.1, HALF_PI+0.2);

Below is an image before I filled the neck:

Code for neck:

//neck
stroke(0);
noFill();
arc(270,365, 30, 50, 0, HALF_PI);
arc(330,365, 30, 50, HALF_PI, PI);
noStroke();
fill(237, 208, 180);
quad(291, 365, 309, 365, 331, 400, 269, 400);
triangle(285, 364, 291, 365, 283, 378);
triangle(309, 365, 315, 364, 317, 378);

Reflection

I am proud of my attempt at drawing myself using p5.js. I now have a better understanding of the syntax used and the possibilities that can be achieved using p5.js. In the future I aspire to improve my code by changing certain aspects that would make it cleaner and easier to understand. For example, I would store the rgb components for each color in different variables so that its easier to use throughout. I would also create functions that draw repeating features, mainly the eyes, eyebrows, shoulders, and neck. Furthermore, I would also want to challenge myself by adding animations and more detail to certain parts of the drawing.