# Ball bouncing on a grid

**URL:** <https://discourse.processing.org/t/ball-bouncing-on-a-grid/8688>\
**Category:** Coding Questions\
**Created:** [February 24, 2019, 4:18pm UTC](https://discourse.processing.org/t/ball-bouncing-on-a-grid/8688 "2019-02-24T16:18:27Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![pritesh](https://avatars.discourse-cdn.com/v4/letter/p/43a26b/32.png) [@pritesh](https://discourse.processing.org/u/pritesh)\
**Post date:** [February 24, 2019, 4:18pm UTC](https://discourse.processing.org/t/ball-bouncing-on-a-grid/8688/1 "2019-02-24T16:18:27Z")

</div>

Hello,

I recently started learning processing and I have been trying to write a code in which a ball is bouncing off the four corners of a grid.  
Can someone plz help me with this?

> float x = 150;  
> float y = 150;
> 
> void setup() {  
> size(800, 800);  
> }
> 
> void draw() {  
> background(0, 0, 255);  
> stroke(255);
> 
> //VERTICAL LINES  
> for (float x = 150; x \< 700; x = x + 50) {  
> line(x, 150, x, 650);  
> }  
> //HORIZONTAL LINES  
> for (float y = 150; y \< 700; y = y + 50) {  
> line(150, y, 650, y);  
> }
> 
> //Ball  
> noStroke();  
> ellipseMode(CENTER);  
> ellipse(x, y, 20, 20);  
> x = x + 5;
> 
> if (x \> 650) {  
> x = 650;  
> y = y + 5;  
> }  
> if (y \> 650) {  
> x = x - 10;  
> }
> 
> if (x \< 150) {  
> x = 150;  
> y = x + 5;  
> }  
> }

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [February 24, 2019, 5:30pm UTC](https://discourse.processing.org/t/ball-bouncing-on-a-grid/8688/2 "2019-02-24T17:30:18Z")

</div>

What do you mean the ball bounces from the four corners? Please provide more details.

What does your code do at the moment?

Kf

---

<div class="post-metadata">

**Author:** ![pritesh](https://avatars.discourse-cdn.com/v4/letter/p/43a26b/32.png) [@pritesh](https://discourse.processing.org/u/pritesh)\
**Post date:** [February 24, 2019, 6:06pm UTC](https://discourse.processing.org/t/ball-bouncing-on-a-grid/8688/3 "2019-02-24T18:06:53Z")

</div>

Hello thank you for your reply,

Yes you are correct. I made a grid and then on that grid right now the ball starts moving from x and y axis 150 towards x axis 650 and then from 650 it bounces and starts moving down and then once it reaches 650 on y axis, here the ball slightly goes off the grid and starts moving towards the left, after that the ball stops.

I have looked at all the tutorials on youtube but I am not being able to figure the movement. The movement which I am trying to achieve is right, down, left and up and this keeps going on in a loop.

---

<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 24, 2019, 6:08pm UTC](https://discourse.processing.org/t/ball-bouncing-on-a-grid/8688/4 "2019-02-24T18:08:48Z")

</div>

[Studio.ProcessingTogether.com/sp/pad/export/ro.9DEx177ceWoBc](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9DEx177ceWoBc)

---

<div class="post-metadata">

**Author:** ![pritesh](https://avatars.discourse-cdn.com/v4/letter/p/43a26b/32.png) [@pritesh](https://discourse.processing.org/u/pritesh)\
**Post date:** [February 24, 2019, 6:24pm UTC](https://discourse.processing.org/t/ball-bouncing-on-a-grid/8688/5 "2019-02-24T18:24:36Z")

</div>

Thank you so much for the link, this is the movement which I am trying to achieve but the code looks a bit complicated. I am still at the beginners level. Would you know if there is a basic code to achieve this movement?

---

<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 24, 2019, 6:36pm UTC](https://discourse.processing.org/t/ball-bouncing-on-a-grid/8688/6 "2019-02-24T18:36:08Z")

</div>

> [@pritesh](#):
>
> Would you know if there is a basic code to achieve this movement?

That’s the only code I’ve come up w/ in replying to this very old forum thread: 🥴

- [Forum.Processing.org/two/discussion/12995/ellipse-moving-in-a-square-pathway-continuously](http://Forum.Processing.org/two/discussion/12995/ellipse-moving-in-a-square-pathway-continuously)

> [@pritesh](#):
>
> … but the code looks a bit complicated.

Well, you can simply ask which parts of the code you’re confused about. 🕶

---

<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:** [February 24, 2019, 6:36pm UTC](https://discourse.processing.org/t/ball-bouncing-on-a-grid/8688/7 "2019-02-24T18:36:25Z")

</div>

some things are just needed, like the limit check,  
other things, like PVector are optional, but you are here for learning?

```auto
int start = 150, stop = 650, x, y;
int br = 10, step = 5, dirx = 1, diry = 1;

void setup() {
  size(800, 800);
  ellipseMode(CENTER);
  stroke(255);
  x = (int)random(start,stop);
  y = (int)random(start,stop);
}

void draw() {
  background(0, 0, 255);
  for (float x = start; x <= stop; x = x + 50) line(x, start, x, stop); //VERTICAL LINES
  for (float y = start; y <= stop; y = y + 50) line(start, y, stop, y); //HORIZONTAL LINES
  ellipse(x, y, 2*br, 2*br); //Ball
  move();
}

void move(){
   x += step*dirx;
   y += step*diry;
   if ( x <= start+br+step ) dirx = 1;
   if ( y <= start+br+step ) diry = 1;
   if ( x >= stop-br-step ) dirx = -1;
   if ( y >= stop-br-step ) diry = -1;
}

```

---

<div class="post-metadata">

**Author:** ![pritesh](https://avatars.discourse-cdn.com/v4/letter/p/43a26b/32.png) [@pritesh](https://discourse.processing.org/u/pritesh)\
**Post date:** [February 24, 2019, 6:52pm UTC](https://discourse.processing.org/t/ball-bouncing-on-a-grid/8688/8 "2019-02-24T18:52:44Z")

</div>

Okay, let me go through the link which you sent. I will try to fix this by myself first and still if I don’t get the movement right, I will get back to you. 🙂

---

<div class="post-metadata">

**Author:** ![pritesh](https://avatars.discourse-cdn.com/v4/letter/p/43a26b/32.png) [@pritesh](https://discourse.processing.org/u/pritesh)\
**Post date:** [February 24, 2019, 7:02pm UTC](https://discourse.processing.org/t/ball-bouncing-on-a-grid/8688/9 "2019-02-24T19:02:33Z")

</div>

Hi, thank you for your reply. Its been few weeks that I started learning Processing, I am gonna go through the code which you sent and try to work on it again. I have been looking at tutorials on youtube and still trying to figure a better platform to learn. 🙂

---

<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 24, 2019, 7:06pm UTC](https://discourse.processing.org/t/ball-bouncing-on-a-grid/8688/10 "2019-02-24T19:06:24Z")

</div>

> [@pritesh](#):
>
> Okay, let go through the link which you sent…

You can use the 1st version 1.0 from the forum thread link, which doesn’t have _isClockwise_. So it’s easier to understand. 👼