Check if a rectangle overlaps another one

Two rectangles overlap when they overlap on both axes.

JavaScript Version 1.0.0 · MIT · .md

function overlaps({ a, b }) { return a.x1 < b.x2 && b.x1 < a.x2 && a.y1 < b.y2 && b.y1 < a.y2; }

Input & expected output

{
  "a": {
    "x1": 0,
    "y1": 0,
    "x2": 4,
    "y2": 4
  },
  "b": {
    "x1": 2,
    "y1": 2,
    "x2": 6,
    "y2": 6
  }
}

true

The edge case

{
  "a": {
    "x1": 0,
    "y1": 0,
    "x2": 4,
    "y2": 4
  },
  "b": {
    "x1": 5,
    "y1": 0,
    "x2": 6,
    "y2": 4
  }
}

false

Know the limits

• The original combined the axes with ||, so rectangles side by side at different heights counted as overlapping. Both axes must overlap.
• Touching edges do not overlap.

The function above is the implementation used by the lab. The lab validates JSON types and caps size before execution; include equivalent validation when accepting untrusted input in your application.

Keep exploring

• Convert degrees to radians — Multiply by π and divide by 180.
• Check if a rectangle contains another one — Compare corners: a contains b when b’s corners sit inside or on a’s edges.
• Calculate the angle of a line defined by two points — Use Math.atan2 for the angle from the x axis, in radians or degrees.