Después de revisar la documentación, estoy bastante seguro de que esto no es lo que el marco pretende hacer, pero tengo un estudiante al que estoy enseñando que realmente quiere mover un objeto dibujado en un lienzo P5 usando la entrada, como utilizando las teclas de flecha.
Lo que pude averiguar es lo siguiente:
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; } } }Pero, por supuesto, esto usa un bucle infinito y, por lo tanto, es menos que ideal. ¿Alguien sabe de una mejor manera de lograr esto?
En mi sistema (Chrome, MacOS), se llama repetidamente a keyPressed si mantengo presionada la tecla de flecha izquierda. A continuación se muestra un ejemplo realmente simple. Concéntrese en el fragmento y mantenga presionada la tecla de flecha izquierda; observe que xPos disminuye cada cuadro.
En realidad, debe hacer algo en su método keyPressed . En este momento, el valor solo se asigna repetidamente y, definitivamente, no desea tener un ciclo infinito.
Para el registro, de acuerdo con los documentos , no se garantiza que keyPressed funcione de esta manera en todos los sistemas, por lo que es posible que necesite una lógica más compleja según el (los) sistema (s) en los que desea ejecutar esto.
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>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) } }