p5.js中loadPixels函数异常：图像亮度阈值处理失效排查

核心错误点分析 #

• 循环边界越界：代码中for (let y = 0; y <= img.height; y++)和for (let x = 0; x <= img.width; x++)的条件错误。像素数组的索引范围是0到img.width-1、0到img.height-1，当x等于img.width或y等于img.height时，计算出的像素索引会超出数组范围，拿到undefined值，导致亮度计算异常，最终出现单一色调。
• 未实现“缩小原图再放大”的提速逻辑：当前代码直接遍历原图所有像素，没有先缩小图像，无法达到减少计算量的目的。
• 阈值命名与逻辑不匹配：变量名thresh_10、thresh_20等暗示是百分比阈值，但实际计算是255/8的增量，容易造成混淆，但不影响功能，属于可读性问题。

修正后的代码 #

let w = 620 * 1.2;
let h = 320 * 1.2;
let vScale = 12;
let inc = 255 / 8; // 分成8个亮度区间

let purple = '#7a45ff';
let lightgrey = '#f0f6f7';
let darkgrey = '#231F24';

// 亮度阈值区间
let threshLevels = [0, inc, inc*2, inc*3, inc*4, inc*5, inc*6, inc*7, 255];

let img;
let smallImg; // 缩小后的图像，用于提速

function preload() {
  img = loadImage('test_!fun.png');
}

function setup() {
  createCanvas(w, h);
  pixelDensity(1); // 若不需要高分辨率画布，设为1更简单，避免像素密度混淆
  // 缩小图像到网格大小，实现提速
  smallImg = createGraphics(w / vScale, h / vScale);
  smallImg.image(img, 0, 0, smallImg.width, smallImg.height);
}

function draw() {
  background(lightgrey);
  noStroke();

  smallImg.loadPixels();
  // 遍历缩小后的图像像素，减少循环次数
  for (let y = 0; y < smallImg.height; y++) {
    for (let x = 0; x < smallImg.width; x++) {
      let index = (x + y * smallImg.width) * 4;
      let r = smallImg.pixels[index];
      let g = smallImg.pixels[index + 1];
      let b = smallImg.pixels[index + 2];
      
      // 使用更准确的亮度计算（p5.js内置的brightness函数）
      let brightnessVal = brightness(color(r, g, b));

      // 根据亮度区间绘制对应图形
      if (brightnessVal <= threshLevels[0]) {
        fill(lightgrey);
        square(x * vScale, y * vScale, vScale);
      } else if (brightnessVal <= threshLevels[1]) {
        fill(purple);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 3.2);
      } else if (brightnessVal <= threshLevels[2]) {
        fill(purple);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 6);
        fill(lightgrey);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 3.2);
      } else if (brightnessVal <= threshLevels[3]) {
        fill(purple);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 6);
      } else if (brightnessVal <= threshLevels[4]) {
        fill(purple);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 8.8);
        fill(lightgrey);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 6);
      } else if (brightnessVal <= threshLevels[5]) {
        fill(purple);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 8.8);
        fill(lightgrey);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 5.6);
        fill(purple);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 3.2);
      } else if (brightnessVal <= threshLevels[6]) {
        fill(purple);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 10);
        fill(lightgrey);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 5);
      } else if (brightnessVal <= threshLevels[7]) {
        fill(purple);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 10);
        fill(lightgrey);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 3.2);
      } else if (brightnessVal <= threshLevels[8]) {
        fill(purple);
        ellipse(x * vScale + vScale/2, y * vScale + vScale/2, 10);
      }
    }
  }
}

关键优化说明 #

1. 修复循环边界：将循环条件改为y < smallImg.height和x < smallImg.width，确保索引在像素数组范围内。
2. 实现缩小提速：通过createGraphics创建缩小后的图像，遍历缩小后的像素，大幅减少循环计算量。
3. 使用内置亮度函数：替换手动计算的(r+g+b)/3，改用p5.js的brightness()函数，该函数基于人眼对不同颜色的敏感度计算，结果更准确。
4. 优化阈值存储：用数组存储阈值，代码更简洁易维护。

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