someImage.mask (someMaskImage), not working (the mask is a createGraphic)

p5.js Coding Questions
1

Hey folks,
Can you please have a look in this sketch at

I can’t grasp why masking is not working.

It simple, here is the code. (you can run it in the above link, image included)

let face; // Variable to store the face image
let matte; // Variable to store the matte image

function preload() {
  // Load the face image
  face = loadImage("153423.jpg");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0, 0, 70); // Set background color

  // Create a graphics object for the matte
  matte = createGraphics(face.width, face.height);
  matte.background(0); // Background color for the matte
  matte.fill(255); // Fill color for the matte
  matte.noStroke();
  matte.ellipse(matte.width / 2, matte.height / 2, matte.width); // Draw an ellipse as the matte
}

function draw() {
  background(0, 0, 70); // Set background color
  // Draw the face image
  face.mask(matte);
  image(face, 100, 100);

  // Draw the matte image uncomment to see
  // image(matte, 100, 100);
}
2

You can remove the following line;

1 Like
3

Thanks!!! Im used to b&w masks from video fx world, missed that p5 uses the alpha channel already.
You saved my day, well night… whatever : )

thanks.

1 Like