arrays - 为什么我在处理像素化时出错？

Question

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

我不断收到此错误:ArrayIndexOutOfBoundsException:索引 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.js (html canvas) 存储 pixels[] 的方式不同。以及 Processing 的 Pimage 如何存储 pixels[] .

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

这就是为什么在 p5.js 的这一行有一个 * 4 的原因:

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

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

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

移除未使用的(shadowed)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 ) )