Concept:
Quirky, aesthetic and simple but efficient with a light cartoonish aspect was everything I was looking for concerning this very first assignment. I tried as much as possible to utilize the functions and shapes we studied in our first class, to generate a self portrait that has at least one of my actual features. So here is Goof-aya, my goofy portrait with her round glasses, pink cheeks and moon-shaped pupils. I really wanted to have an interactive element in my portrait, so if you click and grab the mouth, it will widen up as if it is saying: “WOW!” (my favorite expression!). I feel like it adds an expressive touch to the portrait which is exactly what I intended.
Code Highlight:
//widen the mouth
function mouseDragged() {
mouthSize = constrain(dist(mouseX, mouseY, xPos, yPos), 20, 70);
}
It was very exciting to see something actually moving in my portrait. Hence, I love the mouth widening part of this code. I figured out a part of it watching a Youtube tutorial (here).
Reflection and Ideas:
Overall, I am satisfied with the outcome of my portrait given the limited coding knowledge that I started with. However, I definitely think that there are many areas to improve. Starting off with some parts of the portrait itself missing (neck and ears). Also, I find the pink background a bit dull. My initial idea was to actually have an interactive background that changes images based on the user’s input, but couldn’t figure out that part. Hence, I am excited to learn more in this class in order to incorporate such elements in upcoming assignments. For now, this first homework was definitely a fun task!
References:
P5JS references page: https://p5js.org/reference/
Mouse Interaction with Objects: https://youtu.be/TaN5At5RWH8?si=nZXGcyDdp9Hd6eOY