I continued working on my self-portrait and tried to make it more interactive. At first, I was still a little confused about how variables could create “relationships” between different elements. I understood that a variable could store a number, but I wasn't really sure how to use that idea visually. After experimenting with the mouse, movement, and different parts of my portrait, it started to make more sense.

One thing I experimented with was else if. I wanted the background to react to the horizontal position of the mouse, so I divided the canvas into four different areas. Depending on where mouseX is, a different rectangle appears with a slightly different color. I also made the relationship reversed: when the mouse moves from left to right, the changing part of the background moves from right to left. At first, I wrote several separate if statements, but using else if made more sense because I only wanted one condition to happen at a time. This helped me understand that else if is useful when there are several possible conditions, but I want the program to choose only one of them.

I also wanted to add some movement to the hair. I used:

For the eye movement, I first tried using if statements. I wanted the eyes to follow the mouse but also stay within a limited area, so I created different conditions for mouseX and mouseY. For example, if the mouse moved too far to one side, I would stop the eye at a certain position. This worked, but the movement felt a little limited because the eyes would reach their boundary before the mouse reached the edge of the canvas.

rect(eyeX, eyeY, 60, 60, 200);

rect(eyeX2, eyeY2, 60, 60, 200); if (mouseX > 228 && mouseX < 253) { eyeX = mouseX; eyeX2 = eyeX + 120; } if (mouseY > 295 && mouseY < 326) { eyeY = mouseY; eyeY2 = eyeY; }

I wanted the eyes to respond to the mouse across the entire canvas, so I started using map() instead.

map() solved this problem by translating the large range of mouseX and mouseY into the much smaller range that the eyes are allowed to move in. This was probably the moment when the idea of “relationship” became the clearest to me. The eyes and the mouse don't have to move the same distance or use the same numbers; one value can control another value proportionally.