My concept:
For the first assignment of this course, I began by thinking about how I would like to create my self-portrait. I was inspired by looking at different examples from other students and animations of different things. As I reflected on who I am and what I like, I immediately thought of the Blooket character I always chose, and I decided that it would be a perfect way to represent myself. I attempted to create a wolf animation inspired by the Blooket version using 2D shapes and colors, and I wanted to add a creative touch by including sunglasses, as I felt they fit the image and personality I’m trying to display. Below is the reference image for the Blooket animation:
Embedded Sketch:
My vision was for the wolf to have sunglasses that go on and off. As a beginner in coding, I was able to create this effect by programming the glasses to move up and back down using the simple (mouseY) on the wolf’s face. This represents how I wanted the animation to be shown:
A Code I’m proud of:
A part of the code I am particularly proud of in this assignment is the eyes, along with the glasses. While creating the eyes, it took me a long time to adjust the edges and curves of the eye, then find the perfect size for the pupil, followed by adjusting the placement of the small white circles that makes the eye look more realistic. I tried with many different shapes to find what fit best, including circles, ellipses, and rectangles, in a variety of sizes.
//Eyes - In three parts:
//The wider white part of the eyes
fill("white");
rect(155, 190, 50, 50, 15, 10, 40, 20);
rect(240, 190, 50, 50, 15, 10, 40, 20);
//The pupils as black ovals
fill(0);
ellipse(233, 195, 28, 40);
ellipse(148, 195, 28, 40);
//The small white circles to add a better look
fill("white");
circle(150, 207, 13);
circle(235, 207, 13);
//Glasses with movement fill(0); rect(155, mouseY, 60, 50, 10, 10, 50, 50); rect(240, mouseY, 60, 50, 10, 10, 50, 50); rect(197, mouseY, 30, 10, 5, 5, 5, 5);
Reflection and ideas for future work or improvements:
Overall, I am satisfied with the outcome of this assignment, especially since it was my first coding project and I completed it independently. I was able to use different references from the official p5.js website, along with the slides provided in class, to apply what I learned and create this self-portrait. For future work, I would like to improve the complexity of shapes and add more detail to the image. Additionally, I hope to further develop my coding skills so I can program the sunglasses to move more realistically, sliding up onto the wolf’s head and back down over the eyes, similar to how sunglasses work in real life.