# Moving circle with arrow keys

**URL:** <https://discourse.processing.org/t/moving-circle-with-arrow-keys/10586>\
**Category:** Coding Questions\
**Created:** [April 24, 2019, 1:30am UTC](https://discourse.processing.org/t/moving-circle-with-arrow-keys/10586 "2019-04-24T01:30:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![S.L.C.S](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@S.L.C.S](https://discourse.processing.org/u/S.L.C.S)\
**Post date:** [April 24, 2019, 1:30am UTC](https://discourse.processing.org/t/moving-circle-with-arrow-keys/10586/1 "2019-04-24T01:30:56Z")

</div>

hello everyone,  
I have an assignment that says i have to make a circle that moves when the arrow keys are pressed and it shouldn’t leave the canvas, but i’m having a problem with keeping the circle within the canvas…i need help

here is what i have so far.

```auto
float x;
float y;
int rad;

 
void setup(){
  size (200, 200);
  x = width/2;
  y = height/2;
}
 
void draw(){
  background(0,255,0);
  fill(255,0,255);
  ellipse(x, y, 50,50);
}
 
void keyPressed() {
  if ((keyPressed == true) && (key == CODED)) {
    if (keyCode == UP){
     y --;
    } else if (keyCode == DOWN && y-rad <= 175) {
      y ++;
    } else if (keyCode == LEFT && x-rad >= 27){
      x --;
    } else if (keyCode == RIGHT) {
      x ++;
    }  
  } 
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 24, 2019, 2:04am UTC](https://discourse.processing.org/t/moving-circle-with-arrow-keys/10586/2 "2019-04-24T02:04:11Z")

</div>

hi,  
somehow the concept with the radius is not functional.  
try:

```auto
float x;
float y;
int rad = 25;

void setup() {
  size (200, 200);
  x = width/2;
  y = height/2;
}

void draw() {
  background(0, 255, 0);
  fill(255, 0, 255);
  ellipse(x, y, 2*rad, 2*rad);
}

void keyPressed() {
    if (keyCode == UP && y-rad >= 0 ) y --;
    else if (keyCode == DOWN && y+rad <= height) y ++;
    else if (keyCode == LEFT && x-rad >= 0 ) x --;
    else if (keyCode == RIGHT && x+rad <= width ) x ++;
}

```

you notice how good my code is formatted

- in the IDE by [ctrl][t]
- here at the forum editor with using the

```auto
</> code tag

```

---

<div class="post-metadata">

**Author:** ![S.L.C.S](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@S.L.C.S](https://discourse.processing.org/u/S.L.C.S)\
**Post date:** [April 24, 2019, 2:06am UTC](https://discourse.processing.org/t/moving-circle-with-arrow-keys/10586/3 "2019-04-24T02:06:42Z")

</div>

Thank you for your help.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 24, 2019, 4:43am UTC](https://discourse.processing.org/t/moving-circle-with-arrow-keys/10586/4 "2019-04-24T04:43:41Z")

</div>

I think your main error was just that rad was 0 ! You forgot to give it a value

Also you don’t use rad in ellipse() command

Also you can give x and y initial values

---

<div class="post-metadata">

**Author:** ![Samakin](https://avatars.discourse-cdn.com/v4/letter/s/4af34b/32.png) [@Samakin](https://discourse.processing.org/u/Samakin)\
**Post date:** [February 3, 2020, 1:50pm UTC](https://discourse.processing.org/t/moving-circle-with-arrow-keys/10586/5 "2020-02-03T13:50:44Z")

</div>

Using this code, is there a way to increase the speed of the object moving, and make it smoother?

Thanks!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 3, 2020, 6:16pm UTC](https://discourse.processing.org/t/moving-circle-with-arrow-keys/10586/6 "2020-02-03T18:16:57Z")

</div>

> [@Samakin](#):
>
> increase the speed of the object

Well, the location of the object is defined by x and y. Changing the values of x and y are how it moves – how _fast_ it moves is controlled by how much you change x and y – by 1, by 5, by 10 etc.

Can you currently see where x and y are changed in the code, so that you could adjust the speed?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 3, 2020, 7:37pm UTC](https://discourse.processing.org/t/moving-circle-with-arrow-keys/10586/7 "2020-02-03T19:37:29Z")

</div>

[Studio.ProcessingTogether.com/sp/pad/export/ro.91tcpPtI9LrXp](http://Studio.ProcessingTogether.com/sp/pad/export/ro.91tcpPtI9LrXp)