为什么 Processing.js 给我一个关于我的代码中没有的函数的错误？

Question

所以我使用 processing.js 来制作一些看起来很抽象的排版（例如 this），并且我找到了某人的代码，我想将其用作我自己代码的基础。我尝试将其复制并粘贴到 open processing，用于处理的在线编辑器中，当我尝试运行时它给了我这个错误：drawing.$ensureContext(...).getImageData is not a function

here是代码：

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;
    }
  }
}

在我的代码中找不到这个 drawing.$ensureContext(...).getImageData。任何人都可以解释为什么会发生这种情况以及如何解决它吗？

Answer 1

问题可能来自此代码行和 P3D 上下文：

filter(BLUR, 8);

因为 filter() 正在等待图像，PImage 对象正在处理中，因此找不到图像。删除它，错误就会消失。

查看 this 文档，它说：

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

filter() 使用 aImg.loadPixels() 其中 aImg 是图像，这里是 ProcessingJS 源代码中的函数 loadPixels：

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

是不是让你想起了什么？ :)

为什么 Processing.js 给我一个关于我的代码中没有的函数的错误？

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

javascript

processing

typography

processing.js