使用 p5.js 为矩形着色

Question

我正在尝试制作一个每 2 秒闪烁一次不同颜色的矩形，但我的阵列无法正常工作。我不确定为什么。这是我的代码：

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


function setup() {
    createCanvas(800, 800);    
    colours[0] = color(255, 0, 0);
    colours[1] = color(0, 0, 255);
}

function draw() {
    background(10);

    if (millis() - timer > 2000) {

        selectedColor++;
        timer = millis();
    }


    fill(colours[selectedColour % colours.length]);
    rect(width / 2, height / 2, 50, 50);

}

Answer 1

Timer var 和 selectedColour var 未初始化，javascript 将未初始化的 var 设置为未定义，因此在 if 语句中，它永远不会为真，同样在底部你不会得到任何东西，但可能是警告或错误在 colours[] 中，因为 selectedColour 首先是未定义的，因此它的模数没有任何意义

Answer 2

两个问题：

您的 timer 值未初始化 - 将其设置为 0 或更小的值比 millis()。同样适用于selectedColour.
所选颜色的变量名为 selectedColour 但是你在递增 selectedColor.

Answer 3

首先为定时器变量设置一个默认值，并固定两个变量的名称"selectedColour"和"selectedColor"。您的问题将得到解决。

使用 p5.js 为矩形着色

Colorization a rectangle with p5.js

javascript

arrays

arraylist

colors

p5.js