Why is my rect leaving a trail behind it when I move it?

p5.js Coding Questions
1

Hi all,

new to p5 and am a bit confused. I am trying to make a rectangle move on a horizontal plane. To do this I am adding two vectors when the user presses the left arrow or right arrow.

The paddle is moving as intended, however, my rect is drawn with a trail behind it. Im not sure how or why this trail is being drawn. Could someone explain this?

My code for this example can be found here - you’ll have to click on the black background area before you press the arrow keys to move the paddle

https://editor.p5js.org/swood/sketches/S1kU6R1om

thanks!

1 Like
2

Your sketch is redrawing the current frame on top of the previous one.

You probably want to add a call to background() inside your draw() function:

// ...
function draw() {
  background(0); // <-- HERE
  if(keyIsDown(LEFT_ARROW)){
    // ...
2 Likes