使用p5.js实现矩形每2秒变色闪烁，数组功能异常求助

我帮你排查出代码里的几个关键问题，这就是数组和定时器没正常工作的原因：

• 变量名拼写不一致：你定义的是selectedColour（英式拼写），但在draw()函数里写的是selectedColor++（美式拼写）——这会导致selectedColor是个未定义的变量，根本没法正确切换颜色索引。
• timer变量未初始化：timer一开始没有赋值，第一次执行millis() - timer时会得到NaN，这个条件永远不会成立，所以颜色切换的逻辑完全没被触发。
• 初始索引缺失：selectedColour没有初始值，第一次尝试访问colours[selectedColour]时会取到undefined，也会导致颜色异常。

下面是修正后的完整代码：

var colours = [];
var selectedColour;
var timer;

function setup() {
  createCanvas(800, 800);
  // 直接填充颜色数组
  colours.push(color(255, 0, 0));
  colours.push(color(0, 0, 255));
  // 初始化定时器和初始颜色索引
  timer = millis();
  selectedColour = 0;
}

function draw() {
  background(10);
  // 检查是否到了切换时间
  if (millis() - timer > 2000) {
    selectedColour++;
    timer = millis();
  }
  // 取模确保索引在数组范围内
  fill(colours[selectedColour % colours.length]);
  rect(width / 2 - 25, height / 2 - 25, 50, 50);
}

额外优化了一点：把矩形的位置调整为width/2 -25和height/2 -25，这样矩形会真正居中显示（因为矩形默认从左上角开始绘制，原来的写法会让矩形的左上角落在画布中心，现在改成中心对齐啦）。

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