Processing实现多米诺骨牌延迟依次倒下的技术求助

原代码的核心问题有两个：一是每个Dom实例都在绘制整排骨牌，导致所有骨牌状态完全绑定；二是没有给每个骨牌设置独立的触发延迟逻辑，所以会同时倒下。下面是修正后的实现方案：

修正思路 #

• 让每个Dom实例对应单个骨牌，包含自身的位置、状态和触发时间
• 初始化时给每个骨牌设置依次递增的触发延迟，实现逐个倒下的效果
• 通过Processing自带的frameCount（当前帧数）控制触发时机，比手动维护变量更可靠

完整修正代码 #

Dom[] dominos = new Dom[15]; // 骨牌数量和原代码循环次数一致
int triggerStartFrame = 90; // 第一个骨牌触发倒下的帧数
int delayPerDomino = 8; // 每个骨牌之间的延迟帧数

void setup() {
  size(600, 600);
  float startX = 100;
  float y = height/2 - 22.5;
  
  for (int i = 0; i < dominos.length; i++) {
    // 每个骨牌X位置依次偏移30，触发时间依次延迟delayPerDomino帧
    dominos[i] = new Dom(startX + i*30, y, triggerStartFrame + i*delayPerDomino);
  }
}

void draw() {
  background(0);
  
  // 绘制触发用的椭圆，移动到90位置后停止
  float ellipseX = min(frameCount, triggerStartFrame);
  fill(255, 80, 0);
  ellipse(ellipseX, height/2 + 15, 20, 20);
  
  // 遍历每个骨牌，判断是否触发倒下
  for (Dom dom : dominos) {
    if (frameCount >= dom.triggerFrame) {
      dom.fall();
    } else {
      dom.show();
    }
  }
}

class Dom {
  float posX;
  float posY;
  int triggerFrame;
  
  // 构造函数，初始化骨牌位置和触发时间
  Dom(float x, float y, int trigger) {
    posX = x;
    posY = y;
    triggerFrame = trigger;
  }
  
  void fall() {
    push();
    stroke(255);
    strokeWeight(10);
    strokeCap(SQUARE);
    // 单个倒下的骨牌线条
    line(posX + 45, posY + 40, posX, posY + 50);
    pop();
  }
  
  void show() {
    push();
    stroke(255);
    strokeWeight(10);
    strokeCap(SQUARE);
    // 单个直立的骨牌线条
    line(posX, posY, posX, posY + 45);
    pop();
  }
}

关键修改说明 #

1. Dom类重构：
   • 新增构造函数，传入每个骨牌的位置和触发时间
   • fall()和show()只绘制单个骨牌，不再循环绘制整排
2. 触发逻辑优化：
   • 用frameCount替代手动维护的m，直接跟踪当前运行帧数
   • 每个骨牌的triggerFrame依次递增，调整delayPerDomino可改变延迟速度
3. 椭圆移动逻辑：
   • 用min(frameCount, triggerStartFrame)让椭圆移动到目标位置后自动停止

内容的提问来源于stack exchange，提问作者Elülüülüsa