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

**URL:** <https://discourse.processing.org/t/slow-drawing-trail-left-behind-when-updating-rect-x-and-y/42409>\
**Category:** Coding Questions\
**Created:** [July 13, 2023, 9:43am UTC](https://discourse.processing.org/t/slow-drawing-trail-left-behind-when-updating-rect-x-and-y/42409 "2023-07-13T09:43:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![fools](https://avatars.discourse-cdn.com/v4/letter/f/ec9cab/32.png) [@fools](https://discourse.processing.org/u/fools)\
**Post date:** [July 13, 2023, 9:43am UTC](https://discourse.processing.org/t/slow-drawing-trail-left-behind-when-updating-rect-x-and-y/42409/1 "2023-07-13T09:43:28Z")

</div>

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.

```auto
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
  }
}

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [July 13, 2023, 11:59am UTC](https://discourse.processing.org/t/slow-drawing-trail-left-behind-when-updating-rect-x-and-y/42409/2 "2023-07-13T11:59:38Z")

</div>

Hi @fools,

just study the references for …

rect (parameter):

> **[reference | p5.js](https://p5js.org/reference/#/p5/rect)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

and rectMode (default mode):

> **[reference | p5.js](https://p5js.org/reference/#/p5/rectmode)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

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

---

<div class="post-metadata">

**Author:** ![fools](https://avatars.discourse-cdn.com/v4/letter/f/ec9cab/32.png) [@fools](https://discourse.processing.org/u/fools)\
**Post date:** [July 13, 2023, 2:14pm UTC](https://discourse.processing.org/t/slow-drawing-trail-left-behind-when-updating-rect-x-and-y/42409/3 "2023-07-13T14:14:16Z")

</div>

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