He hecho mis propios filtros de imagen. Cuando se hace clic con el mouse en la imagen original (izquierda), se crea un efecto de desenfoque radial en la imagen procesada (derecha). Sin embargo, después de probarlo, descubrí que solo funciona si tengo el mouse sobre la imagen mientras se carga. Luego, si hago clic con el mouse, la imagen original se procesa y parece que el filtro se fortalece en la imagen ya procesada a la derecha, como si se aplicara otro filtro en la parte superior. Esto continúa cuanto más hago clic. ¿Alguien tiene idea de lo que he hecho mal? No estoy seguro de dónde está el problema con mi código.
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>Como mencionó Sam en el comentario, está volviendo a aplicar los filtros a los mismos píxeles cada vez: de ahí el efecto acumulativo.
Simplemente puede hacer una copia de la entrada p5.Image usando get() y aplicar los filtros a eso en lugar de a la imagen original (que después de que se modifica el primer filtro):
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>¿La confusión podría provenir de la función FinalFilter?
Una opción, como se mencionó anteriormente, podría simplemente clonar la imagen de entrada con get() primero:
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; }