Reveal Image of the Masking

Processing Coding Questions
1

Hello. I want to operate the code like an example image.
I want to make a ghost image come out if I wipe it with an eraser on top of an ordinary girl image.
But my code doesn’t work that way.
How should I change it?

Like this :

asis
asis1079×367 41 KB 

PImage img;
float x;
float y;
float easing = 0.1;

void setup() {
  img = loadImage("changeto1.jpg");
  surface.setSize(img.width, img.height);
  background (0);
}

void draw() {
  
float targetX = mouseX;
  float dx = targetX -x;
  x += dx * easing;
  
 
  loadPixels();
  img.mask(pixels);
  image(img, 0, 0);
 
  noStroke();
 
  ellipse(x, y, 90, 90);
  
  float targetY = mouseY;
  float dy = targetY -y;
  y+= dy * easing;
}
2

Hi @Judy,

Welcome to the forum! :wink:

Is it your own code or something you found online?

Try to understand this piece of code:

// Loading the pixels of the window
loadPixels();

// Masking the image with the canvas
img.mask(pixels);

// Displaying the image
image(img, 0, 0);

// Drawing a white ellipse on black background
ellipse(x, y, 90, 90);

You want to instead display the original girl and on top the “ghost” image which will be masked when moving the mouse over it.

To try an easier problem, use two images with one modified (color shifted for example) and try to make an erase effect when you move the mouse.

3

This code is I found online. How to make an erase effect? Do I have to write a new code? Or should I modify some of the original code?

4

Yes try to come with your own solution and understand the basic image manipulation functions of Processing:

2 Likes
5

Can also be done without pixels, have you seen this example? Will help you.

6

Hi @Judy,.

There are several ways to do what you want …

Made also a masking example for another topic…

Try both a mask and a pixel version. It’s fun and a good exercise. :nerd_face:

Cheers
— mnse

2 Likes