How to move ellipse filled with an image to mask similar background?

I am a super early user of coding from Italy. I came up with an idea to promote a company logo on their website and I almost reached the goal so I am sharing this problem.

The idea is to obtain a sort of clipping mask effect when the mouse/cursor move on the image I’ve made so far a code that does the work with a still ellipse.

When I set the position parameters of the ellipse as mouseX and mouseY the effect does not work if not just a bit of a glitch at the start. How can I make it work as intended?

Here you can find the link of what I have now: https://editor.p5js.org/francesco.ficini.designer/full/FLBuhggW-

Here the code:

let img;
let imgbg2;
let maskImage;

function preload() {
  img = loadImage("NeroP.jpg");
  imgbg2 = loadImage("RossoP.jpg");
}
function setup() {
  createCanvas(400, 225);
  img.mask(img);
}

function draw() {
  background(imgbg2, 0, 0);
  //Immages
  image(imgbg2, 0, 0);
  image(img,0,0);

  // Ellipse Mask
  maskImage = createGraphics(400, 225);
  maskImage.ellipse(200, 100, 50, 50);
  imgbg2.mask(maskImage);
  image(imgbg2, 0, 0);
}

Answer

The thing about the p5.Image.mask function is that it modifies the image that is being masked. Which means that any pixels that are cleared by the mask are gone for good. So if you want to dynamically change the mask you will need to make a copy of the original and re-apply the modified mask any time it changes.

Additionally you will want to avoid creating images and graphics objects in your draw() function because this can result in excessive memory allocation. Instead create a single set of graphics/images and re-use them.

let img;
let imgbg2;
let maskImage;
let maskResult;

function preload() {
  img = loadImage("https://www.paulwheeler.us/files/NeroP.jpeg");
  imgbg2 = loadImage("https://www.paulwheeler.us/files/RossoP.jpeg");
}

function setup() {
  createCanvas(400, 225);
  // Create graphics and image buffers in setup
  maskImage = createGraphics(imgbg2.width, imgbg2.height);
  maskResult = createImage(imgbg2.width, imgbg2.height);
}

function mouseMoved() {
  if (maskResult) {
    maskImage.clear();
    // Ellipse
    maskImage.ellipse(mouseX, mouseY, 50, 50);
    // Copy the original imgbg2 to the maskResult image
    maskResult.copy(
      imgbg2,
      0, 0, imgbg2.width, imgbg2.height,
      0, 0, imgbg2.width, imgbg2.height
    );
    // apply the mask to maskResult
    maskResult.mask(maskImage);
  }
}

function draw() {
  //Immagini
  image(img, 0, 0);
  // draw the masked version of the image
  image(maskResult, 0, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>