https://editor.p5js.org/Ayanoriri/sketches/bSfo4diXQ

“!POWER!”

The idea behind the rollover effect is to adjust the proportions of the upper and bottom images as the mouse moves along the Y-axis. This complements the graphic of two human figures pushing against each other. As one figure overpowers the other (when the mouse reaches the top or bottom edge of the frame), the word “!POWER!” appears to signify the victory.

https://editor.p5js.org/Ayanoriri/sketches/bSfo4diXQ

Questions and Obstacles:

1. The bottom image doesn’t overscale the upper image, likely because p5.js has a built-in boundary for the upper frame. However, I'm struggling to figure out how to prevent the upper image from stretching beyond the frame when the mouse moves outside the canvas. I have it figured out using the constrain().
2. I’m still unsure how to import fonts into p5.js in a way that allows others, who don’t already have the fonts installed, to still view the correct font when they open the file.
3. Importing images was easier than I expected, but I’m still trying to figure out how to display them at their original size in p5.js without getting an odd border. In this sketch, I scaled the images to fill the entire frame, but I’m not sure this is the best approach. I’m also curious if there’s a way to export vector drawings or svg files into p5.js.