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

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[] and how Processing's Pimage stores pixels[] 的方式不同。

虽然它们都是一维数组，但 p5.js pixels[] 每个像素使用 4 个值（例如 [r1,g1,b1,a1, r2,g2,b2,a2, ...]，等等）并且 Processing 每个像素使用 1 个值（例如 [pixel1ARGB, pixel2ARGB, etc.] ARGB 张图片/[pixel1RGB, pixel2RGB, etc.] 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
  }

}

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

切记，视频教程的重点是 accessing/reading 单个像素值并以某种方式使用它们（例如将亮度映射到形状属性（圆形大小、线条粗细、三角形颜色等） .)).

如果您只想显示图像的 low-res 版本而不关心像素值，则对图像进行缩减采样（缩小尺寸）可能更简单，但以原始尺寸渲染（或更大）无锯齿（以获得清晰的像素艺术外观而不是模糊的锯齿）。

这是一个基本示例，您可以运行（记得也将相同的“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) and aliasing again to scale the texture coordinate or using a fragment shader (via PShader））

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

Why do i get error in processing pixelation?

arrays

indexing

processing