图像过滤器每次循环都会变得更强-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在评论中提到的，您每次都将过滤器重新应用于相同的像素：因此会产生累积效果。

您可以简单地使用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;
}