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

p5.js Coding Questions
1

Hi :slight_smile:

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.

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

// 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 only accepts png-files with an alpha channel.

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

2

Hello @alignleft,

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

See references to understand the difference:

In function setup():

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

I had to set the alpha channel directly:

// 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
image1156×540 170 KB

:)