如何提升p5.js中get()函数执行速度？代码优化求助

你的核心问题是频繁调用pg.get()、pg.stroke()和pg.point()这类渲染API，这些方法在百万级像素循环中会产生极大的性能开销。下面是几种从易到难的优化方案，都能实现毫秒级执行：

最简单方案：用image()直接绘制（GPU加速，最快） #

如果你的需求只是把整个画布的像素向下偏移4个位置，完全不需要手动循环，直接调用p5.js的image()方法即可，这是底层GPU加速的操作，性能最优：

pg = createGraphics(1000, 1400);
pg.pixelDensity(1);

// 直接将pg自身绘制到pg画布上，y轴偏移4像素
pg.image(pg, 0, 4);

手动操作像素数组（灵活度更高） #

如果需要更精细的像素控制（比如只处理部分像素），可以直接读写pixels数组，绕开渲染API：

pg = createGraphics(1000, 1400);
pg.pixelDensity(1);

pg.loadPixels();
const width = pg.width;
const height = pg.height;
const pixelStride = width * 4; // 每行像素的字节数

// 从下往上遍历，避免覆盖未读取的源像素
for (let j = height - 1; j >= 0; j--) {
  const srcRowStart = j * pixelStride;
  // 目标行不能超出画布范围
  if (j + 4 < height) {
    const destRowStart = (j + 4) * pixelStride;
    // 复制整行的像素数据（比逐个像素复制更快）
    for (let i = 0; i < pixelStride; i++) {
      pg.pixels[destRowStart + i] = pg.pixels[srcRowStart + i];
    }
  }
}

pg.updatePixels();

为什么你的原有代码慢？ #

• 原始代码中pg.get(i,j)每次调用都会单独读取像素，循环140万次会产生巨量的API调用开销
• 每次循环调用pg.stroke()和pg.point()，会频繁切换渲染上下文状态，这是非常耗时的操作
• 你改写的版本把pg.loadPixels()放在了外层循环里，每次循环都重新加载像素，既浪费性能还可能导致视觉差异

解决视觉差异问题 #

你之前的代码中floor(j+4)完全多余（j是整数，j+4也是整数），且每次循环设置stroke再画point，可能因为渲染精度问题产生细微差异。上面的两种方案都是直接操作像素或底层绘制，和原始代码的视觉效果完全一致。

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