Concept:
For this first assignment we were instructed to code a self-portrait. Instead, I thought it would be more interesting to code a childhood favorite character: SpongeBob SquarePants. For some reason, he was the first character that came to mind when we were told that we were allowed to code anything, not necessarily ourselves. When I googled SpongeBob to use as a reference image while I coded, I was able to analyze it and think of all the different shapes I could use for each part. I broke every part down into little pieces so I could visualize the shapes it needs, which helped me code it much more efficiently.
Highlighted Code:
// 4a. eyes + lashes
// left eye
fill('#2f2f2d'); // eyelashes
stroke('#2f2f2d')
strokeWeight(1.5)
rect(141, 102, 5, 20)
fill('#2f2f2d');
stroke('#2f2f2d')
strokeWeight(1.5)
rect(156.5, 100, 5, 20)
fill('#2f2f2d');
stroke('#2f2f2d')
strokeWeight(1.5)
rect(172, 102, 5, 20)
fill('#ffffff'); // eyeball
stroke('#2f2f2d')
strokeWeight(1.5)
ellipse(162, 147, 70, 72)
fill('#26B9C8'); // iris
stroke('#2f2f2d')
strokeWeight(1.5)
circle(165, 147, 30)
fill('#2f2f2d'); // pupil
stroke('#2f2f2d')
strokeWeight(1.5)
circle(165, 147, 15)
fill('#ffffff'); // "reflection"
noStroke()
circle(163, 140, 6)
fill('#ffffff');
noStroke()
circle(170, 153, 3)
// right eye
fill('#2f2f2d'); // eyelashes
stroke('#2f2f2d')
strokeWeight(1.5)
rect(216, 102, 5, 20)
fill('#2f2f2d');
stroke('#2f2f2d')
strokeWeight(1.5)
rect(230.5, 100, 5, 20)
fill('#2f2f2d');
stroke('#2f2f2d')
strokeWeight(1.5)
rect(245, 102, 5, 20)
fill('#ffffff'); // eyeball
stroke('#2f2f2d')
strokeWeight(1.5)
ellipse(233, 147, 70, 72)
fill('#26B9C8'); // iris
stroke('#2f2f2d')
strokeWeight(1.5)
circle(230, 147, 30)
fill('#2f2f2d'); // pupil
stroke('#2f2f2d')
strokeWeight(1.5)
circle(230, 147, 15)
fill('#ffffff'); // "reflection"
noStroke()
circle(228, 140, 6)
fill('#ffffff');
noStroke()
circle(235, 153, 3)
This is the code I wrote for the eyes. I am most proud of it because it looks almost identical to the actual SpongeBob character. It is the first thing that stands out when I look at the code. Also, the placement of the eyes is well-positioned for the face as well as the iris, pupils, and reflection spots. On top of that, both eyes are identical with the same structure and dimension. I also really like that I added the two small white circles that serve as reflection spots. I initially was not going to do it because I did not feel like it, honestly, but I am so glad I did. Those four little white circles made all the difference, as they made it seem like it was animated and lively. It really was the cherry on top.
I think an honorable mention would be the outline of SpongeBob’s face, as anyone could have easily just done a square, but I think the curves, though it took long to code, is what made it really look like SpongeBob after the eyes.
How This Was Made?
When I started the code, I just had a yellow rectangle (almost square) and a thin white rectangle under for the shirt and a thin brown rectangle under that for the pants. After I pulled up a reference image of SpongeBob to help me code, I realized that the shape of the head was not ideal, as it is more of a square cloud with the curves. For that, I used ellipses to create different circular shapes for the natural, uneven curved face. A mistake I noticed after reaching the bottom is that due to the face code being at the start, the shirt overlapped it, so I had to rearrange the code throughout the entire process in order of the correct layering. This happened with the lashes too, so I had to have that first before the whole eye. It also happened with the shirt, where I had to have the code for the arms first as well.
For the eyes, I used an ellipse for the eyeball because it did not look like a perfect circle based on my reference image. The iris, pupil, and reflection spots were all circles. Then for the mouth, nose, and cheeks, I used PI and TWO_PI to create the half circles. The lashes, teeth, and black belt all just needed the rectangle shape but in different positions. For the collar, I used triangles and quads for the tie, as it starts with an upside-down trapezoid and then a sharp diamond. Finally, I just used a mix of circles and ellipses as the sponge marks SpongeBob has on his face to make it more identical with the animation.
This all wouldn’t have been done without the code that prints the mouse’s X and Y because that made positioning everything much easier and took less time.
The only source I used to help me code was the p5js reference site to remind myself of the parameters of each shape, especially for the arc. It is what made me realize that I could set PI as the starting point and have it end at TWO_PI to make a half-circle for the cheeks and nose. I also used the website Color Hex Color Codes and SchemeColor to get the most accurate color palette of SpongeBob SquarePants.
Reflection:
Overall, I am super proud of how my code turned out. It was better than I had expected even though I had my doubts throughout the whole process. It was a really satisfying process seeing the image come to life as I code, edit, and make changes. It was also enjoyable, as I knew what to do to achieve the results I wanted but just needed the time and patience and trust in the process.
For improvements, I would definitely have to say the smile. SpongeBob actually has a much bigger smile with a deeper and taller curved smile that reaches all the way to his cheeks. Unfortunately, I was not sure on how to do that, and that is what made the final product slightly inaccurate. I tried having the half-circle shape as the mouth and two triangles on the side of each to pull them and make them more curved, but it did not work out due to the strokes. It also looked rigid and not smooth. If I wanted to add anything in the future, it would definitely be a SpongeBob-related background with all the fun colors and shapes.