如何移动充满图像的椭圆以掩盖相似的背景？

Question

我是来自意大利的超级早期编码用户。我想到了在他们的网站上推广公司徽标的想法，我几乎达到了目标，所以我分享了这个问题。

想法是在图像上mouse/cursor移动时获得一种剪贴蒙版效果到目前为止，我已经编写了一个代码来完成静止椭圆的工作。

当我将椭圆的位置参数设置为 mouseX 和 mouseY 时效果不工作，如果不是开始时有点小故障的话。 如何让它按预期工作？

在这里你可以找到我现在拥有的link： https://editor.p5js.org/francesco.ficini.designer/full/FLBuhggW-

这里是代码：

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 1

关于 p5.Image.mask 函数的事情是它修改了被屏蔽的图像。这意味着任何被遮罩清除的像素都将永远消失。因此，如果您想动态更改蒙版，则需要在任何时候更改原始蒙版和 re-apply 修改后的蒙版。

此外，您需要避免在 draw() 函数中创建图像和图形对象，因为这会导致过多的内存分配。而是创建一组 graphics/images 和 re-use 它们。

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>

如何移动充满图像的椭圆以掩盖相似的背景？

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

javascript

mask

masking

p5.js