为什么我在处理像素化时出现错误？

Question

我一直在尝试将P5脚本复制到学校项目的处理中，但我无法完全弄清楚。在这里，您可以找到原始脚本： https://www.youtube.com/watch = v = v = v = = kflqrufjk5g

我不断遇到此错误：arrayindexoutofboundsexception：index 5832960长度为5801040

。

PImage img; // creates image variable

int size = 7; // element size

int startx = 0; // starting x coordinate
int starty = 0; // starting y coordinate

void preload() {
}

void setup() {
  size(500, 400); // creates canvas
  
  img = loadImage("Dubbel_augurk-01.jpg"); // preloads Virginia picture
  img.loadPixels(); // loads image
  img.resize(displayWidth, 0); // resizes image to window size
  img.updatePixels(); // updates image

}


void draw() {
  clear();
  background(0);

  int size = floor(map(mouseX, 0, width, 7, 40)); // maps mouseX value to element size

  for (var starty = 0; starty < img.height; starty++) { // creates pixel index
    for (var startx = 0; startx < img.width; startx++) {
      var index = (startx + starty * img.width) * 4;
      var r = img.pixels[index + 0];
      var g = img.pixels[index + 1];
      var b = img.pixels[index + 2];

      //var bright = ((1 * r) + (0.59 * g) + (0.11 * b)); // sets pixel value to adjusted grayscale

      fill(r,g,b); // fills element with adjusted grayscale

      rect(startx, starty, size, size);

      startx = startx + size -1; // set new startx value
    }
    starty = starty + size -1; // set new starty value
  }

}

Answer 1

p5.j​​s (html canvas) 存储 pixels[]以及Processing的Pimage如何存储pixels[] 。

虽然它们都是一维数组，但 p5.js pixels[] 每个像素使用 4 个值（例如 [r1,g1,b1,a1, r2,g2,b2,a2, .. .] 等）并且处理对每个像素使用 1 个值（例如 [pixel1ARGB、pixel2ARGB 等] 用于 ARGB 图像 / [pixel1RGB、pixel2RGB 等] 用于 RGB 图像）。

这就是为什么 p5.js 中的这一行有一个 * 4：

var index = (startx + starty * img.width) * 4;

因此数组索引越界错误：p5.js pixels[] 的元素多了 4 倍比处理中的pixels[]。

请记住还要更改数据类型（不能在Processing(java) 中使用var）。

删除顶部未使用的(影子) startx,starty 变量和稍微
根据 Java 命名约定重命名它们，您的代码片段将如下所示：（

PImage img; // creates image variable

int size = 7; // element size

void setup() {
  size(500, 400); // creates canvas
  
  img = loadImage("Dubbel_augurk-01.jpg"); // preloads Virginia picture
  img.loadPixels(); // loads image
  img.resize(displayWidth, 0); // resizes image to window size
  img.updatePixels(); // updates image

}


void draw() {
  clear();
  background(0);

  int size = floor(map(mouseX, 0, width, 7, 40)); // maps mouseX value to element size

  for (int startY = 0; startY < img.height; startY++) { // creates pixel index
    for (int startX = 0; startX < img.width; startX++) {
      int index = (startX + startY * img.width);
      int pixelRGB = img.pixels[index];

      fill(pixelRGB); // fills element with adjusted grayscale

      rect(startX, startY, size, size);

      startX = startX + size -1; // set new startX value
    }
    startY = startY + size -1; // set new startY value
  }

}

注意：此代码未经测试，但希望它说明了像素索引的要点）

请记住，视频教程的要点是访问/读取单个像素值并以某种方式使用它们（例如将亮度映射到形状属性（圆圈大小、线条粗细、三角形颜色等））。

如果您只想显示图像的低分辨率版本并且不关心像素值，则对图像进行下采样（调整较小的大小）可能会更简单，但使用 以原始尺寸（或更大）进行渲染无锯齿（获得清晰的像素艺术外观，而不是模糊的锯齿）。

这是一个您可以运行的基本示例（请记住也将相同的“Dubbel_augurk-01.jpg”图像拖放到此草图之上）：（

PImage img; // creates image variable

int downScale = 7; // how many times to scale the image down

void setup() {
  size(500, 400); // creates canvas
  
  // disable aliasing
  noSmooth();
  
  img = loadImage("Dubbel_augurk-01.jpg"); // preloads Virginia picture
  img.resize(img.width / downScale, img.height / downScale); // resizes image  
}


void draw() {
  background(0);

  int size = floor(map(mouseX, 0, width, 7, 40)); // maps mouseX value to element size

  image(img, 0, 0, img.width * size, img.height * size);

}

还有更多选项，但更高级一点（例如使用 texture(), beginShape(), vertex(x, y, u, v) 并再次使用别名来缩放纹理坐标或使用片段着色器（通过 PShader))