遍历图像数组

Question

我创建了一个数组并将 30 张图像压入其中，并实现了 keyPressed() 函数来更改从数组中随机绘制的图像，但是当我测试它时，它只更改图像一次而没有循环在阵列上。

这是我的示例代码模拟我的问题

function keyPressed() {
    loop();
    //press left arrow to change pic
    if(keyCode === LEFT_ARROW){
        for(var i = 0; i < imgs.length; i++){
            image(imgs[i], 0 ,0);
        }
    }
}

Answer 1

keyPressed()函数只在按下按键的瞬间被调用。按住时不会重复调用。

一种解决方案是使用内置的布尔变量keyIsPressed，当按下任意键时该变量为真。你可以这样做：

let img_number = 0;

function setup() {
  //whatever is in your setup
}

function draw() {
  if (keyIsPressed) {
    if(keyCode === LEFT_ARROW) {
      img_number = (img_number + 1) % imgs.length;
    }
  }
  image(imgs[img_number];
}

如果您使用的是 noLoop()，我建议您寻找替代方案，因为 p5.js 接受这样的输入：

运行 setup() 块
运行 draw() 块
监听输入（检查光标在哪里，是否点击了鼠标，按下了什么键等）
运行适当的命令（keyPressed()、mouseClicked() 等）
重复 2-4 直到调用 noLoop()

因此，当您调用 noLoop() 时，计算机不再监听您的输入，而只是忽略您。

遍历图像数组

Iterate over Array of images

javascript

arrays

p5.js