我一直在尝试将 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
}
}
最佳答案
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 ) )
关于arrays - 为什么我在处理像素化时出错?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71690193/