Hidden Critters

For this Processing experiment, I wanted to play around with the Transparency example that came with the program. An image with half opacity follows your mouse around with a transparent image of the one in the background like so:

There is only one image used and it only follows your mouse on an x-axis. To create Hidden Critters, I wanted to use two images and have the transparent top layer follow my mouse around on an x and y axis.

Here is my code (note the comments):
/**
 * Find the critters. By Kelsey Aschenbeck
 *
 * Move the pointer left and right across the image to change
 * the transparent image's position. This program overlays one image over another
 * by modifying the alpha value of the image with the tint() function.
 */

PImage a, b; // Two images meant I had to create variables of a and b rather than just img
float offset = 0;
float offsetb = 0; // I had to create offsetb in order to have the mouse follow the y-axis
float easing = 0.05;

void setup() {
  size(1280, 720);
  a = loadImage("hiddencritters.jpg");
  b = loadImage("hiddencrittersfinder.png");
    // Load an image into the program
}

void draw() {
  image(a, 0, 0);  // Display at full opacity - background image
  float dx = (mouseX-b.width/12) - offset; // I modified this to be divided by 12 so it could move further off the screen
  float dy = (mouseY-b.height/12) - offsetb; // I added a float dy
  offset += dx * easing;
  offsetb += dy * easing;
  tint(255, 127);  // Display at half opacity
  image(b, offset, offsetb);
}

The result was a red decoder filter that followed your mouse around so you could identify hidden animals among the plants. The idea was fun, but next time I'll work on making the critters less distinguishable to begin with.