Processing加载jpg/png像素处理错误 网格圆形填充颜色异常问题

问题根因 #

• 你设置的画布尺寸为1038*525，加载的原始图像尺寸与画布尺寸不匹配，虽然你通过image(img, 0, 0, width, height)将原图拉伸绘制到了画布上，但取色时仍然直接用画布坐标去原始图像对象img中提取像素，坐标完全不匹配。超出原始图像范围的区域调用get()会返回无效像素，最终计算出的平均色就会出现异常白色。
• 你额外增加了10%的Y方向网格数量，计算得到的ypos极易超出图像/画布的有效范围，也会触发取色越界问题。

解决方案 #

可任选以下一种方案修复：

1. 直接从绘制后的画布取色，不需要做坐标映射，仅需修改取色行代码：
   把原来的

   color c = getAvgImgColor(img.get(round(xpos + sectionOffset), round(ypos + sectionOffset), sectionSize, sectionSize));
   

   改为

   color c = getAvgImgColor(get(round(xpos + sectionOffset), round(ypos + sectionOffset), sectionSize, sectionSize));
   

   不带前缀的get()方法会直接从当前显示画布提取像素，坐标和你计算的xpos/ypos完全匹配。

2. 先将原始图像缩放到和画布一致的尺寸，再进行后续操作：
   在img = loadImage("accidents.png");后添加一行缩放代码即可：

   img.resize(width, height);
   

优化建议 #

可以在取色前增加边界限制逻辑，避免取色区域越界：

int getX = constrain(round(xpos + sectionOffset), 0, img.width - sectionSize);
int getY = constrain(round(ypos + sectionOffset), 0, img.height - sectionSize);
color c = getAvgImgColor(img.get(getX, getY, sectionSize, sectionSize));

内容的提问来源于stack exchange，提问作者FutureCake