How do I know if two rectangles intersect in JavaScript or pseudo-code?

Question

I have two rectangles that I have to return to the function, regardless of whether they intersect or not.

They are represented by pairs [ x0, y0, x1, y1 ] which represent the upper left and lower right corners of the rectangles. Alternatively, your solution might be [ x0, y0, width, height ] if it is somehow simpler, I can adapt it to enter the parameters of the function.

I tried to see if any two corners from rectangle A are included in rectangle B, but if A is larger than B and B is partially included in A, he will say that it does not overlap. Now I can try A and B, but this is a bad way to do something.

I cannot create a large grid in advance and occupy the cells with rectangles because it is not known what the rectangles are. All I can say is that they are unsigned integers, min 0 and with unknown max.

Answer 1

Check for cases where the rectangles do not exactly intersect. If none of these cases is true, then the rectangles should intersect. i.e:

 public boolean rectanglesIntersect( float minAx, float minAy, float maxAx, float maxAy, float minBx, float minBy, float maxBx, float maxBy ) { boolean aLeftOfB = maxAx < minBx; boolean aRightOfB = minAx > maxBx; boolean aAboveB = minAy > maxBy; boolean aBelowB = maxAy < minBy; return !( aLeftOfB || aRightOfB || aAboveB || aBelowB ); } 

This illustrates the concept, but can be done a little faster if you enable booleans to take advantage of the short circuit ||

Answer 2

If you want to check if 2 rotated rectangles collide, you must project one corner of the rectangle on the axis of the other. If all rectA projections fall into rectB, and rectB projections fall into rectA, then two rectangles collide.

Some projections do not collide here, 2 rectangles do not collide.

4 projections fall into another rectangle, 2 rectangles collide.

I made a presentation on this JSFiddle for a better understanding.

You can check the is_collide function for more example.

Answer 3

Give rectangle 1 with points UL1 and LR1 and rectangle 2 with points UR2 and LR2 -

Check if UL1 is in r2 or LR1 is in r2 (case 1 and case 2 in the diagram). Finally, check if one of the UR2 / LR2 is in r1 (case 3 in the diagram).

You check if the point is in the rectangle by checking that x and y are between the min and max of the range x and y of the rectangles.

To clear?

Blue is R1, Purple is R2

Answer 4

Two rectangles overlap if both x and y are in the Overlap area. If any of the x-coordinates overlaps other rectangles, then it will be above the circle.

On the x axis, either the first point is inside two other rectangles, the second point is within the other two, or two points are on opposite sides of the other points.

 function checkRectOverlap(rect1, rect2) { /* * Each array in parameter is one rectangle * in each array, there is an array showing the co-ordinates of two opposite corners of the rectangle * Example: * [[x1, y1], [x2, y2]], [[x3, y3], [x4, y4]] */ //Check whether there is an x overlap if ((rect1[0][0] < rect2[0][0] && rect2[0][0] < rect1[1][0]) //Event that x3 is inbetween x1 and x2 || (rect1[0][0] < rect2[1][0] && rect2[1][0] < rect1[1][0]) //Event that x4 is inbetween x1 and x2 || (rect2[0][0] < rect1[0][0] && rect1[1][0] < rect2[1][0])) { //Event that x1 and x2 are inbetween x3 and x4 //Check whether there is ay overlap using the same procedure if ((rect1[0][1] < rect2[0][1] && rect2[0][1] < rect1[1][1]) //Event that y3 is between y1 and y2 || (rect1[0][1] < rect2[1][1] && rect2[1][1] < rect1[1][1]) //Event that y4 is between y1 and y2 || (rect2[0][1] < rect1[0][1] && rect1[1][1] < rect2[1][1])) { //Event that y1 and y2 are between y3 and y4 return true; } } return false; } 

Answer 5

Look at the question from another site.

The case turns out to be quite simple if we look at the problem (algorithm) from the other side .

This means that instead of answering the question: “Are the rectangles overlapping?”, We will answer the question: “Are the rectangles overlapping?”.

In the end, both questions solve the same problem, but the answer to the second question is easier to implement because the rectangles do not overlap only when one is under the other or when one is to the left of the other (this is enough for one of these cases , but, of course, it can happen that both happen simultaneously - here a good understanding of the logical condition is “or” important). This reduces many cases that need to be addressed on the first issue.

The whole question is also simplified by using the appropriate variable names :

 const areRectanglesOverlap = (rect1, rect2) => { let [left1, top1, right1, bottom1] = [rect1[0], rect1[1], rect1[2], rect1[3]], [left2, top2, right2, bottom2] = [rect2[0], rect2[1], rect2[2], rect2[3]]; // The first rectangle is under the second or vice versa if (top1 < bottom2 || top2 < bottom1) { return false; } // The first rectangle is to the left of the second or vice versa if (right1 < left2 || right2 < left1) { return false; } // Rectangles overlap return true; } 

Even if we have a different representation of the rectangle, it is easy to adapt the above function to it, changing only the section in which the changes to the variables are defined. A further part of the function remains unchanged (of course, comments are not really needed here, but I added them so that everyone can quickly understand this simple algorithm).

An equivalent but perhaps slightly less readable form of the above function might look like this:

 const areRectanglesOverlap = (rect1, rect2) => { let [left1, top1, right1, bottom1] = [...rect1], [left2, top2, right2, bottom2] = [...rect2]; return !(top1 < bottom2 || top2 < bottom1 || right1 < left2 || right2 < left1); }