Processing3使用updatePixels()时如何在图像上叠加绘制可同步更新的网格

你看到网格只显示一瞬间的核心原因不是像素更新不同步，是以下两个逻辑错误：

• 你定义的网格绘制计数变量x、y是全局变量，第一帧执行完网格绘制的while循环后，x已经大于画布宽度、y已经大于画布高度，后续所有帧的网格绘制判断条件都不成立，等于从第二帧开始根本没有执行网格绘制的代码。
• 代码执行顺序错误：你在绘制完网格后还有修改像素数组的逻辑，会覆盖刚绘制好的网格内容。

1. 网格绘制前重置x、y的值，或者直接把这两个变量改为网格绘制逻辑的局部变量，确保每帧都能完整绘制网格。
2. 调整代码顺序，把网格绘制放到所有像素操作、updatePixels执行完成之后，避免像素操作覆盖网格。
3. 优化冗余逻辑：移除无意义的自赋值循环，把背景图加载移到setup()中只执行一次，不要每帧重复加载浪费性能。

// 原全局变量里的x、y可以删除，改用局部变量绘制网格，避免全局值污染

// 背景图加载移到setup里只执行一次
void setup() {
  size(1280, 720);
  frameRate(60);
  // 其他原有初始化逻辑保持不变
  img = loadImage("map3.jpg");
  img.resize(1280, 720);
}

void draw() {
  image(img,0,0);
  int fullImage = img.width * img.height;
  
  loadPixels();
  int maxCount = 0;
  swarm(followers, activeFollowers);
  if (!blurToggle.set) {
    Arrays.fill(blurFilter, 0);
  }

  // follower密度计算逻辑保持不变
  for (int i = 0; i < activeFollowers; i++) {
    Follower f = followers[i];
    int x = (int)f.x;
    int y = (int)f.y;
    if (x >= 0 && x < width && y >= 0 && y < height) {
      int c = blurFilter[x + width*y] + 0x100;
      blurFilter[x + width*y] = c;
      if (c > maxCount) {
        maxCount = c;
      }
    }
  }
  
  // 像素亮度映射逻辑保持不变
  float mv = 1/sqrt(sqrt(maxCount));
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      int v = blurFilter[x + y*width];
      if (v > 0) {
        v = (int)(0xFF*sqrt(sqrt(v))*mv);
        pixels[x + y*width] = 0xFF000000 + v*0x10101;
      }
    }
  }

  updatePixels();

  // 模糊逻辑移到网格绘制前执行
  if (blurToggle.set) {
    blur(blurFilter, pixels, width, height);
    fade(pixels, blurFilter, 15, 4);
    updatePixels();
  }
  
  // 绘制网格：改用局部变量，每帧重新计数
  stroke(255); 
  strokeWeight(1); 
  int gridX = 0;
  while(gridX < width){
    line(gridX, 0, gridX, height);
    gridX = gridX + spacing;
  }
  int gridY = 0;
  while(gridY < height){
    line(0, gridY, width, gridY);
    gridY = gridY + spacing;
  }

  drawUI();
}

内容的提问来源于stack exchange，提问作者Nico De Jager