如何将此交通灯Processing代码修改为循环运行？

你的代码无法循环的核心问题有两个：

1. 计算的cycle值会持续递增，超过9000ms后没有对应的逻辑处理，导致状态停止变化
2. 状态切换依赖当前颜色的判断，一旦完成一次切换后，后续无法触发重新回到初始状态

下面是修改后的代码，实现完整的循环效果：

let trafficFirstLightColor = 'black';
let trafficSecondLightColor = 'black';
let trafficThirdLightColor = 'black';
let start;

function setup() {
  createCanvas(400, 400);
  start = millis();
}

function draw() {
  background(220); // 清除画布残留，避免颜色叠加
  // 绘制交通灯外壳（可选，增强视觉效果）
  fill(50);
  rect(305, 30, 20, 75);
  
  fill(trafficFirstLightColor);
  ellipse(315, 40, 20, 20);
  fill(trafficSecondLightColor);
  ellipse(315, 65, 20, 20);
  fill(trafficThirdLightColor);
  ellipse(315, 90, 20, 20);
  
  const now = millis();
  // 取模运算让周期每9000ms重置一次，实现循环
  const cycle = (now - start) % 9000;
  
  // 直接根据周期区间设置灯光状态，逻辑更可靠
  if (cycle < 3000) {
    trafficFirstLightColor = 'red';
    trafficSecondLightColor = 'black';
    trafficThirdLightColor = 'black';
  } else if (cycle < 6000) {
    trafficFirstLightColor = 'black';
    trafficSecondLightColor = 'yellow';
    trafficThirdLightColor = 'black';
  } else {
    trafficFirstLightColor = 'black';
    trafficSecondLightColor = 'black';
    trafficThirdLightColor = 'green';
  }
}

关键修改说明： #

• 添加background(220)：每次绘制前清除画布，解决旧灯光颜色残留的问题
• 使用取模运算% 9000：让cycle值始终保持在0-9000ms范围内，每9秒自动重置周期，实现循环
• 简化状态判断逻辑：直接根据当前周期区间设置所有灯光的颜色，不再依赖之前的状态，避免因状态判断条件不满足导致的逻辑卡死
• 可选添加外壳绘制：让交通灯的视觉效果更直观，便于观察状态变化

内容的提问来源于stack exchange，提问作者Jun Wei Li