Mi código está destinado a mostrar la misma imagen una al lado de la otra, donde la imagen de la izquierda es la original y la imagen de la derecha tiene un filtro. Puedo ver que el filtro funciona, pero la imagen alterada se muestra repetidamente a lo ancho del lienzo en la parte superior.
También recibo el error "Cannot read properties of undefined (reading 'width')" for line 'image(Filter(img), img.width, 0);' .
Supongo que hay un problema con la función de filtro y el parámetro no se llama correctamente, pero no estoy seguro.
var img; function preload() { img = loadImage("https://www.paulwheeler.us/files/no_idea_why.jpg"); } function setup() { createCanvas((img.width * 2), img.height); } function draw() { background(125); image(imgIn, 0, 0); image(Filter(img), img.width, 0); noLoop(); } function mousePressed() { loop(); } function Filter(update) { var resultImg = createImage(img.width, img.height); resultImg = sepiaFilter(update); return resultImg; } function sepiaFilter(input) { loadPixels(); input.loadPixels(); for (var x = 0; x < input.width; x++) { for (var y = 0; y < input.height; y++) { var index = (y * input.width + x) * 4; var r = input.pixels[index + 0]; var g = input.pixels[index + 1]; var b = input.pixels[index + 2]; var newRed = (r * 0.4) + (g * 0.8) + (b * 0.2) var newGreen = (r * 0.3) + (g * 0.7) + (b * 0.2) var newBlue = (r * 0.3) + (g * 0.5) + (b * 0.1) pixels[index + 0] = newRed; pixels[index + 1] = newGreen; pixels[index + 2] = newBlue; pixels[index + 3] = 255; } } updatePixels(); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>El problema es que la función sepiaFilter no devuelve un valor. Como resultado, cuando llama a image(earlyBirdFilter(imgIn), imgIn.width, 0); está llamando efectivamente a la image(undefined, imgIn.width, 0); lo que da como resultado el error.