1. Concept
I started by brainstorming ideas about some things I like to give my self-portrait some fun personality. I thought about netball, but wasn’t sure about the other things to add yet.
Then I tried making a sketch on my tablet to plan out what I wanted my piece to look like. I understood that the planning process is really important because it will save time in the long run as I have a direction to stick to. A big consideration as I decided how to draw the different objects in the sketch was the types of shapes or lines I could use in p5 js. Starting with my face, I drew a circle for the head, arcs for my hair outline, arcs for both outlines of my eyes, circles for my eyes, as well as arcs for my eyebrows, nose and lips. I liked my red sweater, which had a high neckline, so I added a line around my neck.
I tried thinking more about what I like, and with the help of online sources, I realized pets and travelling are two of them! I like dogs, so I wanted to draw a simple dog. I could use ellipses for the eyes and ears, triangle for the nose, arcs for the mouth. I would need a large ellipse for the dog’s body, as well as ellipses for the dog’s legs. For the tail, I could make an arc. A good way to show I like travelling is through trains. I like mountains, especially thorugh my experience travelling and hiking in Wales. Specifically, snowy mountains are special for me. At first, the train was a small icon to the right of me, but then with some inspiration from Dev Kalavadiya’s Self Portrait, I realized the mountains could be in the background. So I changed the structure of the work, placing the mountains to the top-left, the netball and pole to the right. I thought it would be cool to have the train be directed toward the mountains.
2. Challenges with Code Highlight
It’s my first week using p5 js and we got practice in-class to make shapes and lines, but I’m unfamiliar with animation. Thus, I expected a challenge with the animating, particularly in the snowfall. But I thought it will be fun to try.
// Top right hair outline angleMode(DEGREES); let right_hair = ellipse(width / 2 + 40, height/2, 100, 50); right_hair.rotate(45);
Turns out that ellipse() doesn’t return an object I can rotate. Instead, I need to use p5.js transformation functions. It’s important to push() and pop() so that rotations don’t accumulate in case I rotate other shapes:
// Top right hair angleMode(DEGREES); push(); // Save the current transformation state translate(width / 2 + 40, height / 2); // Move to where we want to rotate around rotate(38); // Rotate by 38 degrees fill(55, 22, 13); noStroke(); ellipse(0, 0, 100, 50); // Draw at (0,0) since we've translated pop(); // Restore the transformation state
After shifting around my code so that the neck and body comes after the top back hair but before the eyes, I was shocked to find out that the eye outlines somehow disappeared. I tried experimenting with removing and putting back code to find out what the issue was. Since the code for neck was relatively simple, I realized the issue must be with the body. I had an idea to use push() and pop() just like for the hair, and phew, it worked!
To make the mountains, I printed mouseX and mouseY in draw() function, hovered over the points I wanted the vertices of the triangles to be in in order to get the approximate coordinates of the triangle vertices for triangle().
Making the train tracks was especially time-consuming, as I was needed to ensure I drew the horizontal train tracks using quadrilaterals progressively bigger as it goes more downward on the page. I had to consider and ensure the spacing between the train tracks were reasonable, and I used maths calculations to help me with this. Phew, after about 30 minutes working on this, I was done.
Trying to create the netball allowed me to experiment with arcs, getting more familiar with what each parameter is used for.