I have one problem at the line 20-23. What I need is when the blue box touches the red rectangle, the blue box gets resetted (it goes back to where it starts). However, the problem is, it doesn't touch the red rectangle area properly. Any suggestions? Thanks in advance.

float moveX, moveY;
float speed = 2;
float controlX, controlY;
int square = 50;
float rectHori = 120;
float rectVert = 20;

void setup() {
  size(400, 400);
  background(255);
  moveX = width/2;
  moveY = 50;
  reset();
}

void draw() {
  background(255);
  rectMove();
  rectControl();

  if (dist(controlX, controlY, moveX, moveY) <= rectHori/2 + rectVert/2) // THIS METHOD IS NOT WORKING!
    reset();
}

void rectMove() {
  rectMode(CENTER);
  noStroke();
  fill(255,0,0);
 rect(moveX, moveY, rectHori, rectVert);
  moveX += speed;
  if (moveX <= square/2 || moveX >= width-square/2)
    speed *= -1;
}

void rectControl() {
  fill(0,0,255);
  rect(controlX, controlY, square, square);
}

void reset() {
  controlX = width/2;
  controlY = height-100;
}

void keyPressed() {
  if (keyCode == RIGHT)
    controlX += 10;

  else if (keyCode == LEFT)
    controlX -= 10;

  else if (keyCode == DOWN)
    controlY += 10;

  else if (keyCode == UP)
    controlY -= 10;
}

Dani AI

Generated

The sketch is doing a circular (distance) test while both actors are axis-aligned rectangles, so collisions trigger too early. A rectangle-vs-rectangle check should test overlap on X and Y separately (an axis‑aligned bounding box, AABB). This assumes both shapes are drawn with their centers as coordinates (rectMode(CENTER)).

Replace the single dist(...) test with a two-axis overlap check. Example:

if (abs(controlX - moveX) <= (square/2 + rectHori/2)
 && abs(controlY - moveY) <= (square/2 + rectVert/2)) {
  reset();
}

This checks that the half-widths overlap on X and the half-heights overlap on Y; both must be true for a collision.

Notes and troubleshooting:

  • Ensure rectMode(CENTER) is set before drawing either shape (put it in setup()), so the centers used above match the drawn rectangles.
  • If keyboard steps are large, a fast-moving object can "tunnel" through another between frames. Mitigation options: reduce step size, run multiple smaller movement steps per frame, or test the swept segment against the other rectangle.
  • If rectangles ever rotate, use a separating-axis or SAT-based test instead of AABB.
  • This approach addresses the algorithmic issue mentioned by and rules out the window-border suspicion raised by ; the observable symptom (collision happening outside the visible red bar) comes from using a distance-circle approximation rather than axis-aligned rectangle overlap.

Reference implementation of the overlap test above will fit directly into the existing sketch and should make the blue box reset only when the rectangles actually overlap.

Recommended Answers

All 6 Replies

Your windows probably have an invisible border which is what the contact detection is triggered on. Check on the options for creating your windows to set the width of the border to 0 if possible, or 1 (pixel) if 0 is not an option. Optionally, if you can determine the pixel width of the border area, you can adjust your contact algorithm accordingly.

Um sorry I think my question confused you. I'll make it clear, there are two boxes - one red which is moving from left to right and vice versa by itself and the blue box is movable which can be controlled by an user. So when this blue box touches the red box, it goes back to where it starts.

So the problem is, the blue box resets when it touches almost outside of the red box. You can test it here

It seems like you've narrowed down the problem to dist(controlX, controlY, moveX, moveY) <= rectHori/2 + rectVert/2, but it's difficult to know for certain if there is a problem there without knowing what dist is exactly. Even so, rectHori/2 + rectVert/2 seems like a strange calculation to be doing. Can you explain the exact purpose of it? What does the value mean in this situation?

dist(controlX, controlY, moveX, moveY) is the distance between the blue box (controlX and controlY) and the red rectangle (moveX and moveY). So then

<= rectHori/2 + rectVert/2 is the size of the area between the distance so when they touch each other within this certain area, then the blue box get resetted.

But the major problem is that the red rectangle is NOT a perfect square, but the blue box itself thinks that the red box is a square.

I'm not sure how to create a rectangle size in this specific code after <= in <= rectHori/2 + rectVert/2

When you say "the distance between the blue box and the red rectangle", do you mean the distance between the centers of those shapes, or the upper-left corners, or do you mean the distance between the edges of the shapes? If it's the edges of the shapes then dist(controlX, controlY, moveX, moveY) should be zero when they touch, so that would be easy.

"The size of the area between the distance" doesn't mean anything to me. I understand that it is an area, but it's not the area of the blue box or the red rectangle. It is very puzzling.

Thank you for sharing to us.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.