Slow Drawing, trail left behind when updating rect x and y

p5.js Coding Questions
1

I have just started learning javascript so my knowledge of the language isnt great. i tried to make a pacman clone in p5.js as i thought that would be a good starting project. i just implemented movement and if you can see if the code is run. instead of a single rectangle moving along the screen its one long rectangle.

let pac
function setup() {
  createCanvas(400, 400);
  pac = new Pac();
}

function draw() {
  frameRate(10);
  gupdate();
  background(255);
  fill(255,255,0);
  rect(pac.x,pac.y,pac.x + 10, pac.y + 10)
}

function keyPressed() {
  if (keyCode === RIGHT_ARROW) {
    pac.xdir = 10
    pac.ydir = 0
  }
}

function gupdate() {
  pac.move();
}

class Pac {
  
  constructor() {
    this.x = 0
    this.y = 0
    this.xdir = 0
    this.ydir = 0
  }
  
  move() {
    this.x += this.xdir
    this.y += this.ydir
  }
}
2

Hi @fools,

just study the references for …

rect (parameter):

and rectMode (default mode):

You’ll notice that on the default rectMode the parameters for rect
are
x,y,width,height
and not
x1,y1,x2,y2.

Hope that helps!

Cheers
— mnse

3

thanks i looked at them so many times tunnel vision i guess thanks alot