21. Rectangle Overlap
mediumAsked at FigmaDetermine whether two axis-aligned rectangles overlap. Figma uses this as the building block for viewport culling and marquee-selection hit-testing.
By Alex Chen, Founder, InterviewChamp.AI · Last verified
Problem
An axis-aligned rectangle is represented as [x1, y1, x2, y2]. Two rectangles overlap if their intersection has positive area (touching on an edge or corner does not count). Given two rectangles, return true if they overlap.
Constraints
-10^9 <= x1 < x2 <= 10^9-10^9 <= y1 < y2 <= 10^9
Examples
Example 1
rec1 = [0,0,2,2], rec2 = [1,1,3,3]trueExample 2
rec1 = [0,0,1,1], rec2 = [1,0,2,1]falseApproaches
1. Enumerate non-overlap cases
Check each of the four 'rec1 is entirely left/right/above/below' cases and negate.
- Time
- O(1)
- Space
- O(1)
function isRectangleOverlap(a, b) {
if (a[2] <= b[0]) return false;
if (b[2] <= a[0]) return false;
if (a[3] <= b[1]) return false;
if (b[3] <= a[1]) return false;
return true;
}Tradeoff:
2. Project onto axes
Two AABBs overlap iff their 1D projections on both x and y overlap. Cleaner to reason about and trivially generalizes to a viewport-culling pass over thousands of nodes.
- Time
- O(1)
- Space
- O(1)
function isRectangleOverlap(a, b) {
const xOverlap = Math.min(a[2], b[2]) > Math.max(a[0], b[0]);
const yOverlap = Math.min(a[3], b[3]) > Math.max(a[1], b[1]);
return xOverlap && yOverlap;
}Tradeoff:
Figma-specific tips
Figma cares whether you can extend this to a batch viewport-cull over a scene graph — be ready to verbally describe how you'd index rects in a quadtree or R-tree once the count exceeds 10^4.
Solve it now
Free. No sign-up. Python and JavaScript run instantly in your browser.
Practice these live with InterviewChamp.AI
Drill Rectangle Overlap and other Figma interview questions under real-loop conditions with instant feedback on your reasoning, complexity claims, and code.
Practice these live with InterviewChamp.AI →