# Reveal Image of the Masking

**URL:** <https://discourse.processing.org/t/reveal-image-of-the-masking/39215>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 11, 2022, 1:17pm UTC](https://discourse.processing.org/t/reveal-image-of-the-masking/39215 "2022-10-11T13:17:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Judy](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@Judy](https://discourse.processing.org/u/Judy)\
**Post date:** [October 11, 2022, 1:17pm UTC](https://discourse.processing.org/t/reveal-image-of-the-masking/39215/1 "2022-10-11T13:17:32Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/5/15516ad840f1e659f63dc37ef9db5e0036b22dba.jpeg)

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 11, 2022, 2:11pm UTC](https://discourse.processing.org/t/reveal-image-of-the-masking/39215/2 "2022-10-11T14:11:26Z")

</div>

Hi @Judy,

Welcome to the forum! 😉

> [@Judy](#):
>
> But my code doesn’t work that way.  
> How should I change it?

Is it your own code or something you found online?

Try to understand this piece of code:

```auto
// 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.

---

<div class="post-metadata">

**Author:** ![Judy](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@Judy](https://discourse.processing.org/u/Judy)\
**Post date:** [October 11, 2022, 2:15pm UTC](https://discourse.processing.org/t/reveal-image-of-the-masking/39215/3 "2022-10-11T14:15:50Z")

</div>

> [@josephh](#):
>
> 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.

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?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 11, 2022, 2:25pm UTC](https://discourse.processing.org/t/reveal-image-of-the-masking/39215/4 "2022-10-11T14:25:28Z")

</div>

> [@Judy](#):
>
> How to make an erase effect? Do I have to write a new code? Or should I modify some of the original code?

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

- [`loadPixels()`](https://processing.org/reference/loadPixels_.html)
- [`PImage.mask()`](https://processing.org/reference/PImage_mask_.html)
- [`image()`](https://processing.org/reference/image_.html)

> **[Images and Pixels](https://processing.org/tutorials/pixels/)**
>
> How to load and display images as well as access their pixels.

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [October 11, 2022, 3:24pm UTC](https://discourse.processing.org/t/reveal-image-of-the-masking/39215/5 "2022-10-11T15:24:58Z")

</div>

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

> **[Alpha Mask / Examples](https://processing.org/examples/alphamask.html)**
>
> Loads a "mask" for an image to specify the transparency in different parts of the image. The two images are blended together using the mask() method of PImage.

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [October 11, 2022, 4:28pm UTC](https://discourse.processing.org/t/reveal-image-of-the-masking/39215/6 "2022-10-11T16:28:29Z")

</div>

Hi @Judy,.

There are several ways to do what you want …

Made also a masking example for another topic…

> [@Painting/revealing a layer](https://discourse.processing.org/t/painting-revealing-a-layer/38000/2):
>
> Hi @bringmeflowers, better use [the mask function](https://processing.org/reference/PImage_mask_.html) for this … check out… PGraphics maskimg; PImage underlyingimg; void setup() { size(800,800,P2D); underlyingimg = loadImage("image.jpg"); // create mask (should be same as the underlying image size) maskimg = createGraphics(underlyingimg.width,underlyingimg.height,P2D); // initialize the whole mask with black (everything hidden) maskimg.beginDraw(); maskimg.background(0); maskimg.noStroke(); maskimg.fill(255); maskimg.endDr…

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

Cheers  
— mnse