How much do two rectangles overlap?

While the accepted answer is correct, I think it's worth exploring this answer in a way that will make the rationale for the answer completely obvious. This is too common an algorithm to have an incomplete (or worse, controversial) answer. Furthermore, with only a passing glance at the given formula, you may miss the beauty and extensibility of the algorithm, and the implicit decisions that are being made.

We're going to build our way up to making these formulas intuitive:

intersecting_area = 
max(0, min(orange.circle.x, blue.circle.x) 
  - max(orange.triangle.x, blue.triangle.x)) 
  * max(0, min(orange.circle.y, blue.circle.y) 
  - max(orange.triangle.y, blue.triangle.y)
)
percent_coverage = intersecting_area 
   / (orange_area + blue_area - intersecting_area)

First, consider one way to define a two dimensional box is with:

  • (x, y) for the top left point
  • (x, y) for the bottom right point

This might look like:

Example Rectangle

I indicate the top left with a triangle and the bottom right with a circle. This is to avoid opaque syntax like x1, x2 for this example.

Two overlapping rectangles might look like this:

Two Rectangles

Notice that to find the overlap you're looking for the place where the orange and the blue collide:

Rectangle Overlap

Once you recognize this, it becomes obvious that overlap is the result of finding and multiplying these two darkened lines:

Defining Overlap

The length of each line is the minimum value of the two circle points, minus the maximum value of the two triangle points.

Here, I'm using a two-toned triangle (and circle) to show that the orange and the blue points are compared with each other. The small letter 'y' after the two-toned triangle indicates that the triangles are compared along the y axis, the small 'x' means they are compared along the x axis.

Finding Overlap

For example, to find the length of the darkened blue line you can see the triangles are compared to look for the maximum value between the two. The attribute that is compared is the x attribute. The maximum x value between the triangles is 210.

Another way to say the same thing is: The length of the new line that fits onto both the orange and blue lines is found by subtracting the furthest point on the closest side of the line from the closest point on the furthest side of the line.

Showing Overlap

Finding those lines gives complete information about the overlapping areas.

Demonstrate The Calculation

Once you have this, finding the percentage of overlap is trivial:

Find Percent of Overlap

But wait, if the orange rectangle does not overlap with the blue one then you're going to have a problem:

Final Note: Broken Example

With this example, you get a -850 for our overlapping area, that can't be right. Even worse, if a detection doesn't overlap with either dimension (neither on the x or y axis) then you will still get a positive number because both dimensions are negative. This is why you see the Max(0, ...) * Max(0, ...) as part of the solution; it ensures that if any of the overlaps are negative you'll get a 0 back from your function.

The final formula in keeping with our symbology:

The Formula

It's worth noting that using the max(0, ...) function may not be necessary. You may want to know if something overlaps along one of its dimensions rather than all of them; if you use max then you will obliterate that information. For that reason, consider how you want to deal with non-overlapping bounding boxes. Normally, the max function is fine to use, but it's worth being aware what it's doing.

Finally, notice that since this comparison is only concerned with linear measurements it can be scaled to arbitrary dimensions or arbitrary overlapping quadrilaterals.

To summarize:

intersecting_area = 
max(0, min(orange.circle.x, blue.circle.x) 
  - max(orange.triangle.x, blue.triangle.x)) 
  * max(0, min(orange.circle.y, blue.circle.y) 
  - max(orange.triangle.y, blue.triangle.y)
)
percent_coverage = intersecting_area 
   / (orange_area + blue_area - intersecting_area)

Compute the area of the intersection, which is a rectangle too:

SI = Max(0, Min(XA2, XB2) - Max(XA1, XB1)) * Max(0, Min(YA2, YB2) - Max(YA1, YB1))

From there you compute the area of the union:

SU = SA + SB - SI

And you can consider the ratio

SI / SU

(100% in case of a perfect overlap, down to 0%).