My code is meant to display the same image side by side where the left image is the original and the right image has a filter. I can see the filter works but the altered image is being displayed across the width of the canvas at the top repeatedly.
I am also getting the error "Cannot read properties of undefined (reading 'width')" for line 'image(Filter(img), img.width, 0);'.
I assume that there is an issue with the Filter function and the parameter is not being called correctly but I'm not sure.
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>The issue is that the sepiaFilter function does not return a value. As a result when you call image(earlyBirdFilter(imgIn), imgIn.width, 0); you are effectively calling image(undefined, imgIn.width, 0); which results in the error.