有没有办法通过用户输入连续移动 P5 中的对象？

Question

我很确定在查看文档后这不是框架的目的，但我有一个我正在辅导的学生真的想移动在 P5 上绘制的对象canvas 使用输入法，例如使用方向键。
我能够弄清楚的是：

let value = 0;
function setup() {
  // Create a canvas with a specified width and height
  createCanvas(400, 400);

  // Fill in background color
  background("blue");
}

function draw() {
    background(200);
  rectMode(CENTER);
  translate(value, value, value);
    translate(150, 150, 150)
  rect(0, 0, 20, 20);
    
}

function keyPressed() {
    while(true) {
         if (keyCode == LEFT_ARROW) {
            value = 20;
        }
    }
}

当然，这使用了无限循环，因此不太理想。有谁知道实现此目标的更好方法？

Answer 1

在我的系统（Chrome、MacOS）上，如果我按住向左箭头键，则会重复调用 keyPressed。下面是一个非常简单的例子。专注于片段并按住左箭头键 - 观察 xPos 每帧都在减少。

您实际上需要在 keyPressed 方法中 做一些事情 。现在，这个值只是被重复赋值，当然，你不希望有一个无限循环。

郑重声明，根据 the docs，keyPressed 不能保证在所有系统上都以这种方式工作，因此您可能需要更复杂的逻辑，具体取决于您想要的系统到运行这个。

function setup() {
  createCanvas(640, 360);
}

let xPos = 100;
function draw() {
    background(0,0,255);
    fill(255,0,0);
    ellipse(xPos,50,10,10);
}

function keyPressed(event) {
  if (keyCode == LEFT_ARROW) {
    xPos -= 1;
  } else if (keyCode == RIGHT_ARROW) {
    xPos += 1;
  }

  // this prevents default browser behavior
  event.preventDefault();
  return false; 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>

Answer 2

let acl;
let pos;
let value = 0;

function setup() {
  acl = createVector(0,0);
  pos = createVector(0,0);
  // Create a canvas with a specified width and height
  createCanvas(400, 400);

  // Fill in background color
  background("blue");
}

function draw() {
    background(200);
  rectMode(CENTER);
  rect(pos.x, pos.y, 20, 20);
  pos.add(acl);
    
}

function keyPressed() {
    
         if (keyCode == LEFT_ARROW) {
            acl.set(-1,0)
        }
  if(keyCode == RIGHT_ARROW){
    acl.set(1,0)
  }
  
    
}

有没有办法通过用户输入连续移动 P5 中的对象？

Is there a way to continuously move an object in P5 via user input?

javascript

p5.js