Interactive Self-Portrait Demo.mp4

The Sun Rises

Since my self-portrait was at the beach, I decided to add interactivity by creating a sun that tracks the user’s mouse. This was pretty simple.

//SUN
fill(209, 64, 9);
circle(mouseX, mouseY, 60);

Using map() to change color

Then I wanted to create the effect of getting sunburned as the sun rose higher into the sky, I use the map() function to match the mouse position (0 - 400) to RGB range, and within that toward the the more sunburned color of red.

//mouseY range = 0-400
//color range = existing color to desire color
color1 = map(mouseY, 0, 400, 255, 255);
color2 = map(mouseY, 0, 400, 5, 220);
color3 = map(mouseY, 0, 400, 5, 177);

/* Later... */

fill(color1, color2, color3);

I learned the map() function in PCom, when we had to convert analog input (0-1024) to an LED output (0-255). Very cool to see this parallel!

I spent a lot of time plugging in different numbers into fill() to see how to achieve the red color. Then I took a deep breath and thought it through logically and figured it out.

Also, at first the sunburn effect happened when the sun was setting / the mouse was at the bottom of the canvas. But, of course, we get sunburned when the sun is at it’s peak so I reversed the last two parameters of the map() function which easily achieved the sun-rising-sunburn-increasing effect.

Incorporating Eye Shake

I felt that sunburn(255,5,5) was not enough to convey the seriousness of how hot the sun was so I added a shaking interaction for when the sun the higher.

  let xOffset = random(-5, 5);
  let yOffset = random(-5, 5);

  if (mouseY > 200) {
    //eyes
    fill(255);
    circle(180, 145, 20);
    circle(240, 145, 20);
  } else {
    circle(180 + xOffset, 145 + yOffset, 20);
    circle(240 + xOffset, 145 + yOffset, 20);
  }

Interaction

Simplified, the interaction is: