CODEWITHSUNDEEP
javascriptimage-processingp5.js
Emilia Hardej
Emilia Hardej

Reputation: 49

Cannot read properties of undefined (reading 'width') - image processing p5.js

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>

Upvotes: 1

Views: 2148

Answers (1)

Paul Wheeler
Paul Wheeler

Reputation: 20150

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.

Upvotes: 1

Related Questions