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

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);
}

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

It is quite annoying to get it to bounce correctly.

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

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;
  }
}
//

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

Warm regards,

Chrisir

1 Like

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

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.

My approach does work

1 Like

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

1 Like

my apologies, I thought you meant my post as well

:wink:

1 Like