# Moving a ellipse on a grid with arrow keys

**URL:** <https://discourse.processing.org/t/moving-a-ellipse-on-a-grid-with-arrow-keys/23987>\
**Category:** Coding Questions\
**Created:** [September 20, 2020, 5:10pm UTC](https://discourse.processing.org/t/moving-a-ellipse-on-a-grid-with-arrow-keys/23987 "2020-09-20T17:10:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Reynaert98](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/reynaert98/32/7580_2.png) [@Reynaert98](https://discourse.processing.org/u/Reynaert98)\
**Post date:** [September 20, 2020, 5:10pm UTC](https://discourse.processing.org/t/moving-a-ellipse-on-a-grid-with-arrow-keys/23987/1 "2020-09-20T17:10:26Z")

</div>

I have an ellipse that can move on a grid by using the arrow keys. I can move the ellipse but since it’s a function called within draw it keeps creating circles after moving with it. I know using background() in draw can prevent this but this also means that my grid is gone. How can I make my ellipse move while also preventing new ones being created?

This is my code:

```auto
int rows = 40;
int cols = 60;
int[][] raster = new int[rows][cols];

int size = 25;
int xPos = 0;
int yPos = 100;

void setup () {
  
  size(1500, 900); 
  
};

void draw () {
  
  fill(225);
  rect(650, 70, 200, 60);
  maakRaster();
  duiker();
  
};

void maakRaster () {
  
  for (int i = 0; i < rows; i++) {
    for (int j = 0; j < cols; j++) {
      fill(0, 110, 180);
      rect(xPos, yPos, size, size);
      xPos += size;
    }
      xPos = 0;
      yPos += size;
  }
  
};

int radius = 30, directieX = 0, directieY = 0;
float xPositie = 750, yPositie = 30, speed= 1;

void duiker() {
  
  xPositie = xPositie + speed * directieX;
  yPositie = yPositie + speed * directieY;
  
  if ((xPositie > width-radius) || (xPositie < radius)) {   
    directieX=-directieX;
  }
  
  if ((yPositie > height-radius) || (yPositie < radius)) {   
    directieY=-directieY;
  } 
  
  fill (200); 
  ellipse (xPositie, yPositie, radius, radius);
  
}

void keyPressed() {
  
  if (key == CODED) {
    if (keyCode == LEFT) { 
      directieX=-2;
      directieY=0;
    }
      else if (keyCode == RIGHT) {
        directieX=2;
        directieY=0;
      }
      else if (keyCode == UP) {
        directieY=-2;
        directieX=0;
      }
      else if (keyCode == DOWN) { 
        directieY=2;
        directieX=0;
    }
  }
  
};

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 20, 2020, 5:26pm UTC](https://discourse.processing.org/t/moving-a-ellipse-on-a-grid-with-arrow-keys/23987/2 "2020-09-20T17:26:14Z")

</div>

I would draw the grid in a PGraphics in setup() and then use the image() in background().

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 20, 2020, 8:23pm UTC](https://discourse.processing.org/t/moving-a-ellipse-on-a-grid-with-arrow-keys/23987/3 "2020-09-20T20:23:26Z")

</div>

Hello,

You can use background() if you initialize xPos and yPos at the start of each draw() loop:

```auto
void maakRaster () 
  {
  xPos = 0;
  yPos = 0;
  //Rest of your code
  }

```

`:)`

---

<div class="post-metadata">

**Author:** ![Reynaert98](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/reynaert98/32/7580_2.png) [@Reynaert98](https://discourse.processing.org/u/Reynaert98)\
**Post date:** [September 21, 2020, 9:56am UTC](https://discourse.processing.org/t/moving-a-ellipse-on-a-grid-with-arrow-keys/23987/4 "2020-09-21T09:56:32Z")

</div>

That worked, thank you!