Having some trouble with p5.js and trying to make a shape move on the canvas. However, instead of smoothly moving the shape, it's leaving a trail behind as it redraws in the new position. Not quite the effect I was going for. Take a look at the issue here.
Here is the code for my "Player" class (the shape that should be moving):
function Player() {
this.hp = 10;
this.x = 230;
this.y = 240;
this.color = "red";
this.r = 10;
this.spawn = function(){
fill(this.color);
noStroke();
rect(this.x, this.y, this.r*2, this.r*2);
}
}
This section contains my code within the setup and draw functions using p5.js:
var p1;
function setup() {
createCanvas(500, 500);
background("green");
p1 = new Player();;
}
function draw() {
p1.spawn();
if (keyIsDown(LEFT_ARROW)) {
p1.x--;
}
if (keyIsDown(RIGHT_ARROW)) {
p1.x++;
}
if (keyIsDown(UP_ARROW)) {
p1.y--;
}
if (keyIsDown(DOWN_ARROW)) {
p1.y++;
}
}
Any tips or advice on how to fix this would be greatly appreciated. Thank you!