我怎样才能让旋转图像在 p5.js 中交替出现？

Question

我正在尝试使用 mouseX 和 mouseY 使旋转图像移动并与键盘命令交互：按下向左或向右箭头键时，图像应相互交替；向上箭头增加旋转速度，而向下箭头应该降低旋转速度。

根据响应应用了一些编辑，但是当我运行代码时没有任何显示。

修改后的代码如下：

var angle = 0.0;
var angleSpeed = 0.0;
var imageSwitcher = 0;
var images = [];
var img1;
var img2;
var img3;

function preload() {
  images[0] = loadImage(image1);
  images[1] = loadImage(image2);
  images[2] = loadImage(image3);

function setup() {  
  createCanvas(900, 500);  
  background(100);
}

function draw() {  
  translate(mouseX, mouseY);  
  rotate(angle);  
  images(imageSwitcher % 2,-15, -15, 30, 30); 
  angle += angleSpeed;
}
  
function keyPressed() {
  if (keyCode == LEFT_ARROW) {
    images = img1;
  }
  else if (keyCode == RIGHT_ARROW) {
    images = img2;
  }
  else if (keyCode == LEFT_ARROW) {
    images = img3; 
  }
  else if (keyCode == UP_ARROW) {
    angleSpeed += 1.0;
  }
  else if (keyCode == DOWN_ARROW) {
    angleSpeed -= 1.0;
    }
  }  
}

Answer 1

我发现了一些问题。第一个与转速控制有关。您想添加一个变量来控制角度变量的增量。
创建一个变量，假设为 angleSpeed。变角= 0.0; var 角度速度 = 0.0; ... 在绘图功能中，更改线角度 += 0.1；到角度 += 角度速度；

这允许您在 keyPressed( ) 中控制旋转；

如果键码向上角度速度 += 1.0; 如果键码向下角度速度 -= 1.0;

切换图像会稍微复杂一些。我会考虑创建一系列图像， var 图像 = [ ];

然后通过向右或向左按键循环遍历数组。变种图像= [] 变种图像切换器= 0 然后在预加载图像[0] = loadImage（图像1）；图像 [1] = 加载图像 (图像 2); images[2] = loadImage (image3);

In draw 
    image(images[imageSwitcher % 3], x,y,...);

键码向右箭头图片切换器++；对于键码左箭头图片切换器--

Answer 2

var angle = 0.0;
var angleSpeed = 0.0;
var images = [];
var imageSwitcher = 0;

function preload() {
  images[0] = loadImage("ToyStoryLogo.png");
  images[1] = loadImage("CarsLogo.png");
  images[2] = loadImage("Incredibles.png");
}

function setup() {
  createCanvas(900, 500);
  background(204);
}

function draw() {
  background(204);
  translate(mouseX, mouseY);
  rotate(angle);
  image(images[abs(imageSwitcher) % 3], -15, -15, 30, 30);
  angle += angleSpeed;
}

function keyPressed() {
  if (keyCode == LEFT_ARROW) {
    imageSwitcher--;
  } else if (keyCode == RIGHT_ARROW) {
    imageSwitcher++;
  } else if (keyCode == UP_ARROW) {
    angleSpeed += 0.1;
  } else if (keyCode == DOWN_ARROW) {
    angleSpeed -= 0.1;
  }
}

我怎样才能让旋转图像在 p5.js 中交替出现？

How could I make a rotating image alternate in p5.js?

p5.js