Why is Processing.js giving me an error about a function that isn't in my code?

Question

So I'm using processing.js to make some abstract looking typography (such as this), and I found someone's code that I would like to use as a base for my own code. I tried copying and pasting it into open processing, the online editor for processing, and it gives me this error when I try to run it: drawing.$ensureContext(...).getImageData is not a function

here is the code:

PImage hm;
int xstep = 1;
int max_height = 60;
 
void setup() {
  size(600, 400, P3D);
  background(0);
  fill(255);
  textSize(128);
  textAlign(CENTER);
  text("LIGMA", width/2, height/2);
  filter(BLUR, 8);
  hm = get();
}
 
void draw() {
  background(0);
  strokeWeight(2);
  stroke(255);
  float b, z, px, pz;
  translate(width/2, height/2,-20);
  rotateY(map(mouseX,0,width,-PI,PI));
  rotateX(map(mouseY,0,height,-PI,PI));
 
  translate(-width/2, -height/2);
  for (int y = 5; y < height; y+=10) {
    px = -1;
    pz = 0;
    for (int x = 0; x < width; x+=xstep) {
      b = brightnes(hm.get(x,y));
      z = map(b, 0, 200, 0, max_height);
      //stroke(color(b));
      line(px, y, pz, x, y, z);
      px = x;
      pz = z;
    }
  }
}

Nowhere in my code is this drawing.$ensureContext(...).getImageData to be found. Can anyone explain why this is happening and how to fix it?

Answer 1

the problem may come from this code line and the P3D context:

filter(BLUR, 8);

as filter() waits for an image, PImage object in processing so it cannot find one. Remove it and the error will get out.

Look at this documentation it says:

Description: Filters an image as defined by one of the following modes:

filter() uses aImg.loadPixels() where aImg is an image and here is the function loadPixels in ProcessingJS source code:

p.loadPixels = function() {
  p.imageData = drawing.$ensureContext().getImageData(0, 0, p.width, p.height);
};

doesn't it reminds you something? :)