# Can someone please help me with making the ball bounce off of the black square? I have been at this for days and have gotten nowhere

**URL:** <https://discourse.processing.org/t/can-someone-please-help-me-with-making-the-ball-bounce-off-of-the-black-square-i-have-been-at-this-for-days-and-have-gotten-nowhere/27779>\
**Category:** Coding Questions\
**Created:** [February 13, 2021, 12:19am UTC](https://discourse.processing.org/t/can-someone-please-help-me-with-making-the-ball-bounce-off-of-the-black-square-i-have-been-at-this-for-days-and-have-gotten-nowhere/27779 "2021-02-13T00:19:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![cocopuffs](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@cocopuffs](https://discourse.processing.org/u/cocopuffs)\
**Post date:** [February 13, 2021, 12:19am UTC](https://discourse.processing.org/t/can-someone-please-help-me-with-making-the-ball-bounce-off-of-the-black-square-i-have-been-at-this-for-days-and-have-gotten-nowhere/27779/1 "2021-02-13T00:19:43Z")

</div>

int x, y, vx, vy;  
void setup(){  
size(200,200);  
x = (int)random(10, 100);  
y = (int)random(10, 100);  
vx = (int)random(1, 1);  
vy = (int)random(1, 1);  
}  
void draw(){  
background(255);  
fill(0);  
rect(0, 0, 30, 30);  
x += vx;  
y += vy;

if(x \< 10 || x \> width - 10)  
vx = -vx;  
if(y \< 10 || y \> height - 10)  
vy = -vy;

// ellipse  
fill(0);  
ellipse(x, y, 20, 20);  
}

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [February 13, 2021, 10:02am UTC](https://discourse.processing.org/t/can-someone-please-help-me-with-making-the-ball-bounce-off-of-the-black-square-i-have-been-at-this-for-days-and-have-gotten-nowhere/27779/2 "2021-02-13T10:02:19Z")

</div>

For it you need to get collision detection (Circle - square interception)

> **[Collision Detection](http://jeffreythompson.org/collision-detection/circle-rect.php)**
>
> An online book about collision detection using Processing.

It is quite annoying to get it to bounce correctly.

---

<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:** [February 13, 2021, 11:07am UTC](https://discourse.processing.org/t/can-someone-please-help-me-with-making-the-ball-bounce-off-of-the-black-square-i-have-been-at-this-for-days-and-have-gotten-nowhere/27779/3 "2021-02-13T11:07:15Z")

</div>

> Can someone please help me with making the ball bounce off of the black square? I have been at this for days and have gotten nowhere

here

```auto
int x, y, 
  vx, vy;
int r=20; 

void setup() {
  size(200, 200);

  x = (int)random(93, 180);
  y = (int)random(93, 170);
  vx = (int)random(1, 3);
  vy = (int)random(1, 3);
}

void draw() {
  background(255);

  //display 
  fill(0);
  rect(0, 0, 80, 80);
  int sx=0, sy=0, sw=80, sh=80; 

  // move
  x += vx;
  y += vy;

  // walls 
  if (x < 10 || x > width - 10)
    vx = -vx;
  if (y < 10 || y > height - 10)
    vy = -vy;

  // ellipse
  fill(0);
  ellipse(x, y, r, r);

  // check for collision
  // if hit, change rectangle color
  boolean hit = circleRect(x, y, r/2, sx, sy, sw, sh);
  if (hit) {
    reflect (x, y, r, sx, sy, sw, sh);
  }
}

// ---------------------------------------------

//
// CIRCLE/RECTANGLE
boolean circleRect(float cx, float cy, 
  float radius, 
  float rx, float ry, 
  float rw, float rh) {

  // temporary variables to set edges for testing
  float testX = cx;
  float testY = cy;

  // which edge is closest?
  if (cx < rx) {
    testX = rx; // test left edge
  } else if (cx > rx+rw) {
    testX = rx+rw; // right edge
  }

  // 
  if (cy < ry) {
    testY = ry; // top edge
  } else if (cy > ry+rh) {
    testY = ry+rh; // bottom edge
  }

  // get distance from closest edges
  float distX = cx-testX;
  float distY = cy-testY;
  float distance = sqrt( (distX*distX) + (distY*distY) );

  // if the distance is less than the radius, collision!
  if (distance <= radius) {
    return true;
  }
  return false;
}

// CIRCLE/RECTANGLE
void reflect(float cx, float cy, 
  float radius, 
  float rx, float ry, 
  float rw, float rh) {

  // temporary variables to set edges for testing
  float testX = cx;
  float testY = cy;

  // which edge is closest?
  if (cx < rx) {
    testX = rx; // test left edge
    vx = -vx;
  } else if (cx > rx+rw) {
    testX = rx+rw; // right edge
    vx = -vx;
  }

  // 
  if (cy < ry) {
    testY = ry; // top edge
    vy = -vy;
  } else if (cy > ry+rh) {
    testY = ry+rh; // bottom edge
    vy = -vy;
  }
}
//

```

---

<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:** [February 13, 2021, 12:25pm UTC](https://discourse.processing.org/t/can-someone-please-help-me-with-making-the-ball-bounce-off-of-the-black-square-i-have-been-at-this-for-days-and-have-gotten-nowhere/27779/4 "2021-02-13T12:25:08Z")

</div>

Hey, and welcome to the community, great to have you here in the forum!

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![SNICKRS](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@SNICKRS](https://discourse.processing.org/u/SNICKRS)\
**Post date:** [February 13, 2021, 2:51pm UTC](https://discourse.processing.org/t/can-someone-please-help-me-with-making-the-ball-bounce-off-of-the-black-square-i-have-been-at-this-for-days-and-have-gotten-nowhere/27779/5 "2021-02-13T14:51:25Z")

</div>

There is no code that states what to do when the ball hits the rectangle. Here is what you should do:

```auto
PVector pos, vel;
void setup() {
  size(200, 200);
  pos = new PVector(width/2, height/2);
  vel = new PVector(random(-5, 5), random(-5, 5));
}
void draw() {
  background(255);
  fill(0);
  rect(0, 0, 30, 30);
  pos.add(vel);
  if (pos.x + 10 >= width || pos.x <= 10) {
    vel.x *= -1;
  } else if (pos.y + 10 >= height || pos.y <= 10) {
    vel.y *= -1;
  } else if(pos.y - 10 <= 30 && pos.x - 10 <= 30) {
    vel.y *= -1; 
  } else if(pos.x - 10 <= 30 && pos.y - 10 <= 40) {
    vel.x *= -1;
  }
  fill(0);
  ellipse(pos.x, pos.y, 20, 20);
}

```

Also, the velocity of the ball wasn’t random, it was always 1. I didn’t really focus on the collision detection, just focusing on showing how to do it.

---

<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:** [February 13, 2021, 3:06pm UTC](https://discourse.processing.org/t/can-someone-please-help-me-with-making-the-ball-bounce-off-of-the-black-square-i-have-been-at-this-for-days-and-have-gotten-nowhere/27779/6 "2021-02-13T15:06:16Z")

</div>

My approach does work

---

<div class="post-metadata">

**Author:** ![SNICKRS](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@SNICKRS](https://discourse.processing.org/u/SNICKRS)\
**Post date:** [February 13, 2021, 4:33pm UTC](https://discourse.processing.org/t/can-someone-please-help-me-with-making-the-ball-bounce-off-of-the-black-square-i-have-been-at-this-for-days-and-have-gotten-nowhere/27779/7 "2021-02-13T16:33:37Z")

</div>

I was replying to the first post, if there was any confusion

---

<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:** [February 13, 2021, 5:42pm UTC](https://discourse.processing.org/t/can-someone-please-help-me-with-making-the-ball-bounce-off-of-the-black-square-i-have-been-at-this-for-days-and-have-gotten-nowhere/27779/8 "2021-02-13T17:42:42Z")

</div>

my apologies, I thought you meant my post as well

😉