Estoy tratando de navegar por la imagen de Legoman a través del lienzo usando las teclas de flecha. Sin embargo, la imagen parece duplicarse (ver imagen).
¿Cómo hago para que la imagen se mueva sin dejar un rastro de imágenes?
Ver código:
function keyPressed() { if (keyCode === UP_ARROW) { y = y - 10; } else if (keyCode === DOWN_ARROW) { y = y + 10; } if (keyCode === LEFT_ARROW) { x = x - 10; } else if (keyCode === RIGHT_ARROW) { x = x + 10; } if (keyCode === RETURN) { background(255); } }También aquí está el enlace a mi archivo si eso ayuda: https://editor.p5js.org/emmajaneculhane/sketches/NDWUd0-Vj
El problema ya no está presente en el boceto del editor p5 que ha compartido.
Eso es porque estás llamando
background(currentBackground); en keyPressed() en esa versión.
De hecho, background() borra la imagen renderizada previamente con un color plano, que es el comportamiento que desea evitar.
Deberá establecer currentBackground en un valor diferente una vez que haga clic en uno de los 8 círculos de color.
Por ejemplo:
if (dRed < 30 / 2 && mouseIsPressed) { currentBackground = redB; }en vez de:
if (dRed < 30 / 2 && mouseIsPressed) { background(redB); }La misma lógica se aplicaría al resto de los círculos de color.
Además, si desea que las teclas respondan un poco más, puede verificar si se presiona una tecla en draw() :
function draw() { if(keyIsPressed){ if (keyCode === UP_ARROW) { y = y - 10; } else if (keyCode === DOWN_ARROW) { y = y + 10; } if (keyCode === LEFT_ARROW) { x = x - 10; } else if (keyCode === RIGHT_ARROW) { x = x + 10; } } background(currentBackground); //...the rest of your draw code goes here } También podría ayudar tener algunas condiciones de contorno para que la figura de LEGO no se salga de los límites (por ejemplo, solo incremente x si es mayor que 0 y más pequeño que el ancho del boceto, lo mismo se aplica para y )