图像过滤器在每个循环中变得更强 - p5.js

Question

我制作了自己的图像滤镜。当鼠标在原始（左）图像上单击时，意味着在处理后的（右）图像上创建径向模糊效果。但是，在对其进行测试后，我发现只有在加载图片时将鼠标悬停在图片上时它才有效。然后，如果我单击鼠标，原始图片就会得到处理，看起来滤镜在右侧已经处理过的图像上变得更强，就像它在顶部应用了另一个滤镜一样。我点击得越多，这种情况就会继续。有人知道我做错了什么吗？我不确定我的代码问题出在哪里。

var img;

function preload() {
  img = loadImage("https://media.makeameme.org/created/doesnt-know-why-gxsyb3.jpg");
}

function setup() {
  createCanvas((img.width * 2), img.height);
}

function draw() {
  background(125);
  image(img, 0, 0);
  image(FinalFilter(img), img.width, 0);
  noLoop();
}

function mousePressed() {
  loop();
}

function FinalFilter(input) {
  var resultImg = createImage(input.width, input.height);

  resultImg = sepia(input);
  resultImg = radialBlurFilter(resultImg);

  resultImg.updatePixels();
  return resultImg;
}

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

Answer 1

正如 Sam 在评论中提到的那样，您每次都re-applying 滤镜到相同的像素：因此会产生累积效应。

您可以使用 get() 简单地复制输入 p5.Image 并将滤镜应用于该图像而不是原始图像（在第一个滤镜被更改后）：

var matrix = [[1,1,1],
              [1,3,1],
              [1,1,1]];

var img;

function preload() {
    img = loadImage("https://media.makeameme.org/created/doesnt-know-why-gxsyb3.jpg");
}

function setup() {
    createCanvas((img.width * 2), img.height);
}

function draw() {
    background(125);
    image(img, 0, 0);
    image(FinalFilter(img), img.width, 0);
    noLoop();
}

function mousePressed() {
    loop();
}

function FinalFilter(input) {
    var resultImg = createImage(input.width, input.height);

    resultImg = sepia(input);
    resultImg = radialBlurFilter(resultImg);

    resultImg.updatePixels();
    return resultImg;
}

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

混淆可能来自 FinalFilter 函数？

一个选项，如上所述，您可以先用 get() 简单地克隆输入图像：

function FinalFilter(input) {
    var resultImg = createImage(input.width, input.height);

    resultImg = sepiaFilter(input.get());
    resultImg = radialBlurFilter(resultImg);
    // this call to `updatePixels()` is a bit redundant since sepiaFilter and radialBlurFilter both call `updatePixels()` on the reference image passed as an argument
    resultImg.updatePixels();
    return resultImg;
}

图像过滤器在每个循环中变得更强 - p5.js

Image filter gets stronger every loop - p5.js

javascript

image-processing

p5.js