Concept
For this self-portrait, I wanted to create something that shows who I am but also adds some fun, interactive elements. I focused on making my hair, face, and upper body look as close to real as I could. I also added cool features like changing the background color when you click the mouse and making the eyes follow the cursor. Plus, there is a custom wand that moves with your mouse, adding a playful touch to the whole thing.
Code
The code begins by setting up a canvas that is 400×400 pixels in size and gives it a light blue background. The default mouse cursor is hidden to make the custom wand cursor more prominent.
The draw() function runs continuously, which allows the portrait to update in real-time. The background color changes to a random color when the mouse is pressed and resets to the original blue when released.
The main features of the face—head, eyes, nose, mouth, ears, and hair—are drawn using basic shapes like ellipses, rectangles, and triangles. The pupils are interactive and follow the mouse cursor, giving the eyes a dynamic effect. The shoulders and chest area are represented with curves and rectangles to add more detail to the portrait.
Finally, a custom wand cursor is drawn at the mouse position, with a black handle and a yellow tip, adding a playful touch to the sketch.
Highlight
One part of my code that I’m really happy with is the way the pupils of the eyes move. I made it so that the pupils follow the mouse as you move it around. This makes the eyes look like they’re actually looking at the cursor, which brings the portrait to life. Here’s the code that does this:
// Interactive Pupils Movement fill(0); // Sets the fill color to black for the pupils let leftPupilX = map(mouseX, 0, width, 165, 175); // Maps mouseX to move the left pupil within the eye let rightPupilX = map(mouseX, 0, width, 225, 235); // Maps mouseX to move the right pupil within the eye ellipse(leftPupilX, 180, 10, 10); // Left pupil ellipse(rightPupilX, 180, 10, 10); // Right pupil
This part of the code lets the pupils move depending on where the mouse is. It’s a small detail, but it makes the portrait feel more interactive and real.
Embedded Sketch
.
Reflection and Ideas for Future Work
Looking back, I’m happy with how the interactive features turned out, especially the moving pupils and the changing background color. These parts make the portrait more fun to play with. But, I think I could improve the details of the hair and the face to make them look better. In the future, I would like to work on shading and maybe add more interactive features, like changing facial expressions. I also want to get the proportions of the head and face just right to make the portrait even more realistic.