Week 1: Self-portrait

Concept

I decided to create myself as a pink crab on the beach. Instead of a traditional self-portrait, I wanted to make something that represents me through the things I like: the crab is my favorite animal, pink is my favorite color, and I like going to the beach! The beach is also a nod to my home country, The Philippines, which is known for having beautiful beaches.

My Final Portrait!

Code that I’m Proud Of

// claws
fill(227, 115, 131);
let biteSize = PI / 16;
let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;
let endAngle = TWO_PI - startAngle;

// left claw
push();
translate(width / 2 - 60, height / 2 - 50);
rotate(radians(330));
arc(0, 0, 45, 45, startAngle, endAngle, PIE);
pop();

// right claw
push();
translate(width / 2 + 60, height / 2 - 50);
rotate(radians(210));
arc(0, 0, 45, 45, startAngle, endAngle, PIE);
pop();

This is the code I’m particularly proud of. I wanted my crab to have the motion of snapping its claws. So, I went on the p5.js reference page to look for something that would help with that. I found a coding reference for a Pac-Man style animation on the arc() section and decided to use that but I had to double and shift it to my liking and what’s fitting for my crab.

How this was made

For the background, I wanted to split the sky and the sand so I used rectangles and to slip them evenly, I just set the size to divide by the height accordingly. To add more of a “beach-y” feel, I added sun (using ellipse), clouds (using ellipse as well), and a beach umbrella (using rectangle and arc). For my crab, I split the body into two arcs because I wanted it to have different colors. For the face, I used two identical black ellipses and for the mouth, I used arc. Now for the legs (the part I spent quite a bit of time on), I used rectangles and had to manually shift each of them accordingly and because of that, some parts appear to be a bit uneven. Throughout the code, I learned to use  PI to control how arcs are drawn, since p5.js uses radians, and it allowed me to create half-circle for the body, smile, and claws. I also used push() and pop() to isolate translate() and rotate() so each part could be shifted independently without affecting the rest of the sketch.

Reflection and Future Improvements

I learned a lot useful coding skills from making this assignment and the p5.js reference page was a huge help. I feel more comfortable with p5.js and navigating myself on the reference page. With more practice, I’d like to learn more animations like clouds drifting or my crab moving sideways, and if there are ways to duplicate or mirror a function (concerning my crab’s legs) to save more time and make sure everything is perfectly even.