p5.js如何让颜色跟随数组取值而非每帧自动变化

1. colorMode 与颜色数组的匹配规则 #

p5.js 的colorMode()只会修改color()函数解析输入参数的规则，你只要保证数组中存储的颜色数值和你设置的通道范围完全对应即可：

• 默认colorMode(RGB, 255, 255, 255, 1)：数组按[R, G, B, 透明度]格式存储，数值范围分别对应0-255、0-255、0-255、0-1
• 自定义colorMode(HSB, 360, 100, 100, 1)：数组按[色相, 饱和度, 亮度, 透明度]格式存储，数值范围分别对应0-360、0-100、0-100、0-1

调用color(数组元素)时p5会自动按照当前设置的colorMode解析数值，不需要额外转换。

2. 固定颜色避免每帧自动变化的方法 #

不要把随机选色、修改颜色下标的逻辑放在draw()函数中，将这类逻辑移到setup()或者你需要触发变色的交互回调（比如点击、按键回调）中即可，只有主动触发时才会更换颜色。

3. 实现颜色跟随数组动态变化 #

只要你每次调用fill()、stroke()等着色函数时，都是实时读取数组的当前值，数组更新后下一帧渲染就会自动应用新颜色，不需要额外的绑定操作。

可运行参考实现 #

// 颜色数组：这里用HSB格式存储，和下方colorMode设置的通道范围对应
let colorPool = [
  [0, 90, 85], // 正红
  [45, 90, 85], // 明黄
  [210, 90, 85] // 宝蓝
]
// 存储选中的颜色下标
let pickIndex = 0

function setup() {
  createCanvas(500, 500)
  // 设定HSB颜色模式，和数组存储的数值范围完全匹配
  colorMode(HSB, 360, 100, 100)
  // 初始随机选色：放在setup里只执行一次，不会每帧刷新
  pickIndex = floor(random(colorPool.length))
  noStroke()
}

function draw() {
  background(255)
  // 实时从数组读取颜色值着色
  fill(color(colorPool[pickIndex]))
  circle(width/2, height/2, 300)
}

// 点击鼠标修改数组中的颜色值，画面颜色会自动同步更新
function mousePressed() {
  // 给选中颜色的色相增加60，实现色相偏移
  colorPool[pickIndex][0] = (colorPool[pickIndex][0] + 60) % 360
}

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