# This ball goes through the rectangle rather than hitting it or bouncing it

**URL:** <https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783>\
**Category:** Coding Questions\
**Created:** [November 28, 2020, 9:08am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783 "2020-11-28T09:08:45Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Waka](https://avatars.discourse-cdn.com/v4/letter/w/f14d63/32.png) [@Waka](https://discourse.processing.org/u/Waka)\
**Post date:** [November 28, 2020, 9:08am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/1 "2020-11-28T09:08:45Z")

</div>

Hi, Can you please help to make the ball hit the rectangle rather than go through the rectangle

```auto
float ballx,bally,xspeed=5,yspeed=8;

void setup() {
size(displayWidth,displayHeight);
stroke(255);
strokeWeight(100);
}

void draw() {
background(0);
point(ballx,bally); //draw the ball
if(sideCollision(ballx)) {
xspeed = xspeed * -1; //reverse horizontal speed
}
if(topOrBottomCollision(bally)) {
yspeed = yspeed*-1; //reverse vertical speed
}
ballx = ballx + xspeed;
bally = bally + yspeed;
rect(810,100,300,75);
rect(mouseX,880,300,75);
}

boolean sideCollision(float x) {
if(x<0 || x>width) {
return true;
} else {
return false;
}
}

boolean topOrBottomCollision(float y) {
if(y<0 || y>height) {
return true;
} else {
return false;
}
}

```

---

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 28, 2020, 9:33am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/2 "2020-11-28T09:33:14Z")

</div>

Hi, I used to struggle with collision too but it is not that hard if you make a lot of them.

I don’t know how your program looks or what it is supposed to do and I dont see any other values for the balls appart from ballx and bally. Usually when I make collisions I write an If statement:

if( ballx \> 810 || balx \< 1110){  
xspeed = xspeed\*-1  
}

I usually try to think about the square it has to hit. The left side value is 810, the right side value is 810+300=1110. The ball has to change direction if it comes between those two values so change direction if: the right side of the ball (ballx) is bigger than the left side value of the box (810) or the other way around, if the left side of the ball (ballx) is smaller than the right side value of the box (1110)

---

<div class="post-metadata">

**Author:** ![Waka](https://avatars.discourse-cdn.com/v4/letter/w/f14d63/32.png) [@Waka](https://discourse.processing.org/u/Waka)\
**Post date:** [November 28, 2020, 9:34am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/3 "2020-11-28T09:34:20Z")

</div>

thank you, but can you write the whole thing in codes, so I can understand better. As it gives me a error that ballx cannot be resolved to a variable.

---

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 28, 2020, 9:36am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/4 "2020-11-28T09:36:31Z")

</div>

> [@yanze03](#):
>
> if( ballx \> 810 || balx \< 1110){  
> xspeed = xspeed\*-1  
> }

That is the code for the X-side of the box repeat this proces for the Y-side of the box and it should work

---

<div class="post-metadata">

**Author:** ![Waka](https://avatars.discourse-cdn.com/v4/letter/w/f14d63/32.png) [@Waka](https://discourse.processing.org/u/Waka)\
**Post date:** [November 28, 2020, 9:37am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/5 "2020-11-28T09:37:20Z")

</div>

but it isnt working, and where exactly should i put it

---

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 28, 2020, 9:39am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/6 "2020-11-28T09:39:24Z")

</div>

Put this in the void draw() , it will only work when the ball hits the square.

---

<div class="post-metadata">

**Author:** ![Waka](https://avatars.discourse-cdn.com/v4/letter/w/f14d63/32.png) [@Waka](https://discourse.processing.org/u/Waka)\
**Post date:** [November 28, 2020, 9:39am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/7 "2020-11-28T09:39:46Z")

</div>

I aready put it in void draw but it did not work

---

<div class="post-metadata">

**Author:** ![Waka](https://avatars.discourse-cdn.com/v4/letter/w/f14d63/32.png) [@Waka](https://discourse.processing.org/u/Waka)\
**Post date:** [November 28, 2020, 9:41am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/8 "2020-11-28T09:41:33Z")

</div>

It says ballx cannot be resolved to a variable

---

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 28, 2020, 9:41am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/9 "2020-11-28T09:41:40Z")

</div>

I found the problem,

> [@Waka](#):
>
> `rect(mouseX,880,300,75);`

if the ball has to hit this rectangle you have to put the mouseX variable in the if statement:  
if( ballx \> mouseX || balx \< mouseX+300){  
xspeed = xspeed\*-1  
}

---

<div class="post-metadata">

**Author:** ![Waka](https://avatars.discourse-cdn.com/v4/letter/w/f14d63/32.png) [@Waka](https://discourse.processing.org/u/Waka)\
**Post date:** [November 28, 2020, 9:42am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/10 "2020-11-28T09:42:07Z")

</div>

can you do it yourself on your proccessing app and then paste in the whole thing

---

<div class="post-metadata">

**Author:** ![Waka](https://avatars.discourse-cdn.com/v4/letter/w/f14d63/32.png) [@Waka](https://discourse.processing.org/u/Waka)\
**Post date:** [November 28, 2020, 9:42am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/11 "2020-11-28T09:42:50Z")

</div>

Please, because it is confusing for me

---

<div class="post-metadata">

**Author:** ![Waka](https://avatars.discourse-cdn.com/v4/letter/w/f14d63/32.png) [@Waka](https://discourse.processing.org/u/Waka)\
**Post date:** [November 28, 2020, 9:44am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/12 "2020-11-28T09:44:05Z")

</div>

Becuase on my codes it still says ballx cannot be resolved to a variable

---

<div class="post-metadata">

**Author:** ![Waka](https://avatars.discourse-cdn.com/v4/letter/w/f14d63/32.png) [@Waka](https://discourse.processing.org/u/Waka)\
**Post date:** [November 28, 2020, 9:44am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/13 "2020-11-28T09:44:41Z")

</div>

are you there?? Please Help Me

---

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 28, 2020, 9:48am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/14 "2020-11-28T09:48:02Z")

</div>

put the code inside the void draw() you made the variable ballx

---

<div class="post-metadata">

**Author:** ![Waka](https://avatars.discourse-cdn.com/v4/letter/w/f14d63/32.png) [@Waka](https://discourse.processing.org/u/Waka)\
**Post date:** [November 28, 2020, 9:53am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/15 "2020-11-28T09:53:35Z")

</div>

I know look this is what I did, and the reason why I was getting that error was because you wrote the wrong spelling for ball you wrote balx instead of ballx but also after doing that it is the same as before:  
…  
float ballx,bally,xspeed=5,yspeed=8;

void setup() {  
size(displayWidth,displayHeight);  
stroke(255);  
strokeWeight(100);  
}

void draw() {  
background(0);  
point(ballx,bally); //draw the ball  
if(sideCollision(ballx)) {  
xspeed = xspeed \* -1; //reverse horizontal speed  
}  
if(topOrBottomCollision(bally)) {  
yspeed = yspeed\*-1; //reverse vertical speed  
}  
ballx = ballx + xspeed;  
bally = bally + yspeed;  
rect(810,100,300,75);  
rect(mouseX,880,300,75);  
if( ballx \> 810 || ballx \< 1110){  
xspeed = xspeed\*-1;  
}  
}

boolean sideCollision(float x) {  
if(x\<0 || x\>width) {  
return true;  
} else {  
return false;  
}  
}

boolean topOrBottomCollision(float y) {  
if(y\<0 || y\>height) {  
return true;  
} else {  
return false;  
}  
}  
…

---

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 28, 2020, 10:16am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/16 "2020-11-28T10:16:21Z")

</div>

The ball will now bounce between the X sides you have to make the if statement for the Y side as well

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [November 28, 2020, 11:03am UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/17 "2020-11-28T11:03:14Z")

</div>

You started this conversation in another thread (your first post) and members of the forum responded to you. Since then you have deleted the discussion title and all your comments making the whole conversation useless to anyone wanting to read it.  
_ **This is extremely disrespectful to the members who responded and goes against forum etiquette. Please do not do that again here** _

---

<div class="post-metadata">

**Author:** ![Waka](https://avatars.discourse-cdn.com/v4/letter/w/f14d63/32.png) [@Waka](https://discourse.processing.org/u/Waka)\
**Post date:** [November 28, 2020, 12:19pm UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/18 "2020-11-28T12:19:07Z")

</div>

@yanze03, I also did the other side you ballx and bally but it is still not bouncing on it Here are my codes:

```auto
float ballx,bally,xspeed=5,yspeed=8;

void setup() {
size(displayWidth,displayHeight);
stroke(255);
strokeWeight(100);
}

void draw() {
background(0);
point(ballx,bally); //draw the ball
if(sideCollision(ballx)) {
xspeed = xspeed * -1; //reverse horizontal speed
}
if(topOrBottomCollision(bally)) {
yspeed = yspeed*-1; //reverse vertical speed
}
ballx = ballx + xspeed;
bally = bally + yspeed;
rect(810,100,300,75);
rect(mouseX,880,300,75);
if( ballx > 810 || ballx < 1110){
xspeed = xspeed*-1;
}
if( bally > 810 || bally < 1110){
xspeed = xspeed*-1;
}
}

boolean sideCollision(float x) {
if(x<0 || x>width) {
return true;
} else {
return false;
}
}

boolean topOrBottomCollision(float y) {
if(y<0 || y>height) {
return true;
} else {
return false;
}
}

```

Please Help as Soon as Possible

---

<div class="post-metadata">

**Author:** ![Waka](https://avatars.discourse-cdn.com/v4/letter/w/f14d63/32.png) [@Waka](https://discourse.processing.org/u/Waka)\
**Post date:** [November 28, 2020, 12:21pm UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/19 "2020-11-28T12:21:08Z")

</div>

Continuing the discussion from [TfGuy44 (Please Help) - This ball goes through the rectangle rather than hitting it or bouncing it](https://discourse.processing.org/t/tfguy44-please-help-this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/18):

@yanze03, I also did the other side you ballx and bally but it is still not bouncing on it Here are my codes:

```auto
float ballx,bally,xspeed=5,yspeed=8;

void setup() {
size(displayWidth,displayHeight);
stroke(255);
strokeWeight(100);
}

void draw() {
background(0);
point(ballx,bally); //draw the ball
if(sideCollision(ballx)) {
xspeed = xspeed * -1; //reverse horizontal speed
}
if(topOrBottomCollision(bally)) {
yspeed = yspeed*-1; //reverse vertical speed
}
ballx = ballx + xspeed;
bally = bally + yspeed;
rect(810,100,300,75);
rect(mouseX,880,300,75);
if( ballx > 810 || ballx < 1110){
xspeed = xspeed*-1;
}
if( bally > 810 || bally < 1110){
xspeed = xspeed*-1;
}
}

boolean sideCollision(float x) {
if(x<0 || x>width) {
return true;
} else {
return false;
}
}

boolean topOrBottomCollision(float y) {
if(y<0 || y>height) {
return true;
} else {
return false;
}
}

```

Please Help as Soon as Possible

---

<div class="post-metadata">

**Author:** ![yanze03](https://avatars.discourse-cdn.com/v4/letter/y/e9a140/32.png) [@yanze03](https://discourse.processing.org/u/yanze03)\
**Post date:** [November 28, 2020, 12:43pm UTC](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783/20 "2020-11-28T12:43:43Z")

</div>

you do realise that you just coppied the code for the X-sides and pasted them for the Y-sides?

I suggest you check out:

> **[Coordinate System and Shapes \\ Processing.org](https://processing.org/tutorials/drawing/)**

[Next page](https://discourse.processing.org/t/this-ball-goes-through-the-rectangle-rather-than-hitting-it-or-bouncing-it/25783.md?page=2)