p5.js 像素操作入门：通过 pixels[] 数组实现图像滤镜

一、理解 pixels[] 数组与一维坐标映射原理

在屏幕显示与图像处理的直觉中，图片是一个具有宽度和高度的二维网格，每一个像素都有对应的平面坐标 (x, y)。但在计算机内存中，无论是 HTML5 Canvas 还是显存缓冲区，数据都以一维连续数组（Uint8ClampedArray）的形式存储。

在 p5.js 中，这个数组就是 pixels[]。更关键的是，每个像素由 4 个连续的数值构成，分别代表红（Red）、绿（Green）、蓝（Blue）和不透明度（Alpha），取值范围均为 0 到 255 的整数。因此，一个分辨率为 100×100 的画布，其 pixels[] 数组的长度并不是 10,000，而是 100 × 100 × 4 = 40,000 项。

当我们在双重循环中遍历坐标 (x, y) 时，定位该像素在数组中的起始下标需要使用如下公式：

let index = (y * width + x) * 4;
let r = pixels[index];     // 红色通道值
let g = pixels[index + 1]; // 绿色通道值
let b = pixels[index + 2]; // 蓝色通道值
let a = pixels[index + 3]; // Alpha 通道值

该公式的推导逻辑非常直观：第 y 行之前一共有 y 个整行，每一行包含 width 个像素，加上当前行的 x 个像素偏移，当前像素即为整幅图的第 y * width + x 个像素。由于每个像素占用 4 个数组槽位，所以再乘以 4 即得该像素红通道在 pixels[] 中的起始索引。

二、p5.js 像素处理的标准生命周期

在 p5.js 中直接读写 pixels[] 并不能直接生效。p5.js 为了兼顾性能与跨设备一致性，制定了严格的执行生命周期。漏掉任何一步都会导致报错或画面无任何更新。

1. 锁定屏幕像素密度：pixelDensity(1)

在 Retina 屏或现代高清移动设备上，物理像素往往是 CSS 逻辑像素的 2 倍甚至 3 倍（window.devicePixelRatio > 1）。默认情况下，p5.js 会自动适配屏幕密度，导致 pixels[] 数组长度膨胀为原本的 4 倍或 9 倍，常规的 (y * width + x) * 4 寻址公式会直接错位。

因此，在编写像素级算法时，务必在 setup() 函数开头调用 pixelDensity(1)，强制锁定画布的像素密度为 1:1 映射。

2. 载入像素数据：loadPixels()

loadPixels() 会将底层图形缓冲区的二进制像素流拷贝并填充到 JavaScript 可访问的 pixels[] 属性中。如果不先调用此函数直接访问 pixels，读取到的数组将是空的或未定义的。

3. 遍历计算与就地改写

在获取到数据后，就可以遍历像素数组，通过算法重新计算 R、G、B 通道，并将新数值原地覆写回 pixels[index]、pixels[index+1] 和 pixels[index+2]。通常情况下，除非需要实现抠图或渐隐，Alpha 通道 pixels[index+3] 保持为 255 即可。

4. 提交回显存渲染：updatePixels()

修改 pixels[] 只是更新了内存中的数组。只有调用 updatePixels()，p5.js 才会把修改后的数据统一写回 WebGL 或 2D Canvas 显存，使画面产生肉眼可见的变化。

三、四大常用图像滤镜的算法原理与代码实现

掌握了基础流程后，图像滤镜的本质就是对每一个像素的 RGB 向量应用特定的数学变换。以下是四种最经典的基础滤镜：

1. 反色滤镜（Inversion / Negative）

反色滤镜即底片效果。其原理非常简单：在 8 位色彩空间中，通道最大值为 255，用 255 减去原通道值，即可得到互补色。纯白（255, 255, 255）变为纯黑（0, 0, 0），高亮区域变成暗色阴影。

// 反色滤镜核心逻辑
function applyInvert() {
  loadPixels();
  for (let i = 0; i < pixels.length; i += 4) {
    pixels[i]     = 255 - pixels[i];     // Red
    pixels[i + 1] = 255 - pixels[i + 1]; // Green
    pixels[i + 2] = 255 - pixels[i + 2]; // Blue
  }
  updatePixels();
}

2. 灰度滤镜（Grayscale）

灰度滤镜是将彩色图像转换为黑白灰度阶梯。常见的计算方法有两种：

• 简单算术均值：(r + g + b) / 3。算法直观，但画面视觉对比偏平淡。
• 加权亮度法（Luma）：gray = 0.299 * r + 0.587 * g + 0.114 * b。人眼视网膜对绿光敏感度极高，对蓝光敏感度较低。加权平均符合人眼的明度感受生理特征，层次更自然丰富。

// 加权灰度滤镜
function applyGrayscale() {
  loadPixels();
  for (let i = 0; i < pixels.length; i += 4) {
    let r = pixels[i];
    let g = pixels[i + 1];
    let b = pixels[i + 2];
    let gray = 0.299 * r + 0.587 * g + 0.114 * b;
    
    pixels[i]     = gray;
    pixels[i + 1] = gray;
    pixels[i + 2] = gray;
  }
  updatePixels();
}

3. 二值化 / 阈值滤镜（Threshold）

二值化滤镜将整张图像量化为只有纯黑和纯白两种状态。计算时先获得像素的灰度值，随后与预设的阈值 T（通常取中间值 128）比对：大于 128 赋为 255，小于等于 128 赋为 0。该滤镜常用于印章化特效、版画印刷质感以及计算机视觉的轮廓预处理。

// 阈值二值化滤镜 (阈值设为 128)
function applyThreshold(threshold = 128) {
  loadPixels();
  for (let i = 0; i < pixels.length; i += 4) {
    let r = pixels[i];
    let g = pixels[i + 1];
    let b = pixels[i + 2];
    let gray = 0.299 * r + 0.587 * g + 0.114 * b;
    let val = gray > threshold ? 255 : 0;
    
    pixels[i]     = val;
    pixels[i + 1] = val;
    pixels[i + 2] = val;
  }
  updatePixels();
}

4. 亮度调节滤镜（Brightness Adjustment）

亮度调节是给每个通道叠加一个固定的偏移量 offset。调亮则 offset > 0，调暗则 offset < 0。需要特别注意的是，由于数值加减可能超出 0~255 区间，必须使用 p5.js 内置的 constrain() 函数进行截断保护，否则会发生数值溢出回环，产生刺眼的异常反色噪点。

// 亮度调节滤镜 (增加 40 亮度)
function applyBrightness(offset = 40) {
  loadPixels();
  for (let i = 0; i < pixels.length; i += 4) {
    pixels[i]     = constrain(pixels[i] + offset, 0, 255);
    pixels[i + 1] = constrain(pixels[i + 1] + offset, 0, 255);
    pixels[i + 2] = constrain(pixels[i + 2] + offset, 0, 255);
  }
  updatePixels();
}

四、像素遍历优化与架构决策

在进行全图像素操作时，一张普通的 800×600 图片就包含 48 万个像素，数组长度接近 200 万项。如果不注重执行性能，程序会迅速掉帧甚至引起浏览器标签卡死。

五、完整可运行综合实战示例

以下是一个结构完整的 p5.js 脚本，演示了预加载图像、锁定像素比、通过键盘按键切换不同滤镜效果，并兼顾了原始图像备份防失真的最佳实践。

// 完整实战代码：多模式图像滤镜演示
let originalImg;
let displayImg;
let currentMode = "原图";

function preload() {
  // 替换为你本地的图片路径
  originalImg = loadImage("sample.jpg");
}

function setup() {
  createCanvas(600, 400);
  pixelDensity(1); // 必须在 setup 顶部调用
  
  // 创建可修改的显示副本
  displayImg = createImage(originalImg.width, originalImg.height);
  resetToOriginal();
}

function draw() {
  background(240);
  // 居中自适应绘制图片
  image(displayImg, 0, 0, width, height);

  // 绘制当前滤镜状态提示文本
  fill(0, 180);
  noStroke();
  rect(10, 10, 180, 32, 6);
  fill(255);
  textSize(14);
  textAlign(LEFT, CENTER);
  text("当前模式: " + currentMode, 20, 26);
}

// 恢复为原始图像副本
function resetToOriginal() {
  displayImg.copy(originalImg, 0, 0, originalImg.width, originalImg.height,
                              0, 0, originalImg.width, originalImg.height);
}

function keyPressed() {
  resetToOriginal(); // 每次切换滤镜前恢复原始像素，避免效果连续叠加破坏画质
  displayImg.loadPixels();

  if (key === '1') {
    currentMode = "原图";
  } else if (key === '2') {
    // 灰度滤镜
    currentMode = "灰度滤镜";
    for (let i = 0; i < displayImg.pixels.length; i += 4) {
      let r = displayImg.pixels[i];
      let g = displayImg.pixels[i + 1];
      let b = displayImg.pixels[i + 2];
      let gray = 0.299 * r + 0.587 * g + 0.114 * b;
      displayImg.pixels[i]     = gray;
      displayImg.pixels[i + 1] = gray;
      displayImg.pixels[i + 2] = gray;
    }
  } else if (key === '3') {
    // 反色滤镜
    currentMode = "反色滤镜";
    for (let i = 0; i < displayImg.pixels.length; i += 4) {
      displayImg.pixels[i]     = 255 - displayImg.pixels[i];
      displayImg.pixels[i + 1] = 255 - displayImg.pixels[i + 1];
      displayImg.pixels[i + 2] = 255 - displayImg.pixels[i + 2];
    }
  } else if (key === '4') {
    // 二值化阈值滤镜
    currentMode = "二值化 (阈值 128)";
    for (let i = 0; i < displayImg.pixels.length; i += 4) {
      let r = displayImg.pixels[i];
      let g = displayImg.pixels[i + 1];
      let b = displayImg.pixels[i + 2];
      let gray = 0.299 * r + 0.587 * g + 0.114 * b;
      let val = gray > 128 ? 255 : 0;
      displayImg.pixels[i]     = val;
      displayImg.pixels[i + 1] = val;
      displayImg.pixels[i + 2] = val;
    }
  } else if (key === '5') {
    // 增亮滤镜
    currentMode = "增加亮度 (+40)";
    for (let i = 0; i < displayImg.pixels.length; i += 4) {
      displayImg.pixels[i]     = constrain(displayImg.pixels[i] + 40, 0, 255);
      displayImg.pixels[i + 1] = constrain(displayImg.pixels[i + 1] + 40, 0, 255);
      displayImg.pixels[i + 2] = constrain(displayImg.pixels[i + 2] + 40, 0, 255);
    }
  }

  displayImg.updatePixels(); // 提交渲染
}

总结

使用 p5.js 的 pixels[] 数组是理解数字图像底层原理的极佳途径。只要牢记 1D 寻址公式 (y * width + x) * 4 以及 pixelDensity(1) → loadPixels() → 算法计算 → updatePixels() 的完整流水线，开发者就能够突破内置滤镜的限制，自由探索卷积模糊、色彩空间置换、边缘检测等更为复杂的图像算法。