p5.js if语句中遮罩减法仅执行一次无法触发后续逻辑问题排查

• 反向动画触发逻辑缺失：正向动画播放完成后，beachSwitches数组内所有元素的状态均为1（代表对应遮罩已完成正向动画），你没有在正向结束节点手动将数组最后一位元素设为0，导致循环内的if (beachSwitches[i] == 0)判断始终不成立，遮罩减法逻辑完全不会运行，beachMasks[i]自然停在780没有变化。
• 数组下标越界风险：当循环执行到i=0时，代码里的beachSwitches[i - 1]会访问不存在的beachSwitches[-1]，抛出的异常会打断后续逻辑运行。
• 外层执行条件拦截：可额外检查这段反向逻辑的外层判断条件，确认正向动画结束后，这段代码能被draw()循环正常调用，不会被外层的正向动画判断逻辑拦截。

1. 在正向动画全部完成的判断逻辑中，添加反向启动代码，触发第一个遮罩的反向动画：

// 放在正向动画结束的判断分支内
beachSwitches[beachSwitches.length - 1] = 0

2. 修改beachMasks阈值判断逻辑，添加下标合法性校验，避免越界报错：

//Start of reversal for masks
for (let i = beachSwitches.length - 1; i >= 0; i--) {
  if (beachSwitches[i] == 0) {
    if (beachMasks[i] > 0) {
      beachMasks[i] -= 20;
      animating = true;
      console.log(beachMasks[i])
    }
    // 新增i>0的判断避免下标越界
    if (beachMasks[i] <= 300 && i > 0) {
      beachSwitches[i - 1] = 0;
      console.log(beachSwitches[i - 1] + "This is triggered");
    }
  }
}

3. 可选优化：如果需要在所有遮罩反向动画完成后重置全局状态，可以在循环外添加判断：当i=0且beachMasks[0] <= 0时，重置animating等全局标志位。

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