# Does the mask-function behave differently from Processing to P5?

**URL:** https://discourse.processing.org/t/does-the-mask-function-behave-differently-from-processing-to-p5/43357
**Category:** Coding Questions
**Created:** [November 30, 2023, 3:01pm UTC](https://discourse.processing.org/t/does-the-mask-function-behave-differently-from-processing-to-p5/43357 "2023-11-30T15:01:00Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![alignleft](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@alignleft](https://discourse.processing.org/u/alignleft)
#### Post date: [November 30, 2023, 3:01pm UTC](https://discourse.processing.org/t/does-the-mask-function-behave-differently-from-processing-to-p5/43357/1 "2023-11-30T15:01:00Z")

</div>

Hi 🙂

I have a working Processing sketch, that masks images using a thresholded clone of itself as a mask resulting in a replica of [this effect](https://www.instagram.com/p/Cq46KVPNi6Y/?img_index=1).

I am using the mask like this, in Processing, and everything works great:

```auto
// Storing image in *img* variable
PImage img = ...

// Cloning the image into *mask* variable
PImage mask = img.copy();

// Converting *mask* to black and white mask.
mask.filter(0.5, threshold);

// Applying mask to image
img.mask(mask);

// Drawing image
image(active, 0, 0);

```

I am trying to replicate the sketch in P5, but it seems like the [mask filter](https://p5js.org/reference/#/p5.Image/mask) only accepts png-files with an alpha channel.

Is it possible to mask the image in a similar, dynamic, way using p5?

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [December 2, 2023, 9:23pm UTC](https://discourse.processing.org/t/does-the-mask-function-behave-differently-from-processing-to-p5/43357/2 "2023-12-02T21:23:45Z")

</div>

Hello @alignleft,

This was a challenge with p5.js but I got it sorted out.

See references to understand the difference:

- [https://p5js.org/reference/#/p5.Image/mask](https://p5js.org/reference/#/p5.Image/mask)
- [https://processing.org/reference/PImage\_mask\_.html](https://discourse.processing.org/t/reveal-image-of-the-masking/39215)

In _function setup()_:

```auto
  imgMask.filter(THRESHOLD, .5); 
  f1();
  img1.mask(imgMask); 

```

I had to set the alpha channel directly:

```auto
// May be faster using pixel array directly
function f1()
  {
  //imgMask.loadPixels();
  for (let x = 0; x < imgMask.width; x += 1) 
    {
    for (let y = 0; y < imgMask.height; y += 1) 
      {
      let c = imgMask.get(x, y);  
      let br = brightness(c); // 0 to 100 See color reference
      //let alph = alpha(c);
      //print(alph); // Confirmed that alpha was 255 by default.
      if (br==100)
        cm = color(0, 0);
      else
        cm = color(0, 255);
      imgMask.set(x, y, cm);
      }
    } 
  imgMask.updatePixels();         
  }

```

I also got it working directly with the _imgMask.pixels_ array and will leave that for the adventurous.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/3/a3784cba2cc7759163a5aa410e7f301bfd57f929.jpeg)

`:)`
