Processing实现图像自动随时间像素化并循环（无需用户输入）

需求概述 #

加载图像后，无需用户输入，实现类似隔行扫描的缓慢像素化效果并循环，替代原代码中依赖鼠标位置控制像素化的逻辑。

修改后的实现代码 #

PImage img;
int minPix = 5;    // 最小像素块（对应最清晰状态）
int maxPix = 100;  // 最大像素块（对应最模糊状态）
float cycleTime = 4000; // 单次循环的时长（单位：毫秒）

void setup() {
  size(710, 710);
  background(0);
  noStroke();
  img = loadImage("p.jpg");
  img.resize(width, height);
}

void draw() {
  background(0);
  
  // 用运行时间计算当前循环阶段，实现像素大小平滑变化
  float elapsed = millis() % cycleTime;
  // 先从清晰过渡到模糊，再从模糊过渡回清晰，形成循环
  float t = elapsed < cycleTime/2 ? elapsed/(cycleTime/2) : 1 - (elapsed - cycleTime/2)/(cycleTime/2);
  int pixls = (int)map(t, 0, 1, minPix, maxPix);
  
  int blockWidth = width / pixls;
  int blockHeight = height / pixls;
  
  for(int i = 0; i < pixls; i++) {
    for(int j = 0; j < pixls; j++) {
      // 获取当前像素块左上角的颜色（若需更精准可计算块内平均色）
      int xPos = i * blockWidth;
      int yPos = j * blockHeight;
      color c = img.get(xPos, yPos);
      
      fill(c);
      rect(xPos, yPos, blockWidth, blockHeight);
    }
  }
}

关键逻辑说明 #

• 自动循环控制：通过millis()获取程序运行的毫秒数，结合取模运算锁定循环周期，计算出0→1→0的过渡值t，再将其映射到像素块大小范围，实现平滑的循环变化。
• 简化颜色获取：用img.get(xPos, yPos)直接读取像素颜色，替代原代码中手动计算像素数组索引的方式，更简洁易读。若需要更精准的色块颜色，可遍历块内所有像素计算RGB平均值。
• 移除冗余逻辑：删掉原代码中依赖鼠标位置、Robot模拟鼠标的部分，专注实现自动循环的像素化效果。

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