Concept
After learning more about coding shapes in class using p5.js, I was eager to push the boundaries and explore the artistic and creative possibilities it offered, which I aimed to demonstrate in this assignment. My goal was to create a cartoon-like representation of a self-portrait, allowing for the smooth application of various shapes. This portrait is a reflection of my moments of solitude when I enjoy listening to music and savoring my day. To represent my personality, I chose my favorite color as the background. In an effort to infuse interactivity, I experimented with adding movement to the portrait, where elements respond dynamically as the mouse interacts with the canvas. This exploration allowed me to combine code, art, and personal expression into a single creative assignment.
Highlight of my Code
The addition of interactivity in my codes is one feature that makes me proud. I have two personal favorites, and I find it difficult to choose between them. The first is the way the eyes respond when you interact with them using the mouse – they close, adding an engaging and lifelike dimension to the portrait. The second highlight is the implementation of headphones; when you move your mouse over the ears, a set of headphones magically appears. Below, you can find the relevant sections of code for both interactions:
Eyes Interaction:
// Eyes open
noStroke();
fill(255);
ellipse(240, 260, 60, 60);
ellipse(360, 260, 60, 60);
// Left eye closed
if(mouseX > 210 && mouseX < 270) {
if(mouseY > 230 && mouseY < 290) {
noStroke();
fill(255, 225, 190);
ellipse(240, 260, 61, 61);
strokeWeight(10);
stroke(0);
noFill();
bezier(210, 260, 210, 305, 270, 305, 270, 260);
}
}
Headphones Interaction:
// Headphones
if(mouseX > 120 && mouseX < 160) {
if(mouseY > 270 && mouseY < 330) {
noStroke();
fill(0);
ellipse(150, 300, 120, 120);
ellipse(450, 300, 120, 120);
strokeWeight(17);
stroke(0);
noFill();
ellipse(300, 210, 350, 268);
}
}
Reflection/Improvements
Although I’m proud of how my self-portrait turned out, I know that I can always do better and improve my knowledge of coding. One avenue for exploration is the realm of interactive elements. Instead of focusing on specific features like eyes and headphones, I could create more interactive elements that enrich the overall experience. For instance, I could have experimented with the background’s interactivity. Rather than having a static color, I could have implemented dynamic changes in response to user interactions. This could involve background color shifts or even more captivating visual effects to make the portrait engaging and visually stimulating.