检查相邻矩形两侧的“重叠”量

Question

I have two rectangles that are guaranteed not to overlap.

However, I need to know if they are next to each other and if they are that they touch each other by two or more units. For example, the following rectangles touch at 4 units.

In the above example I am comparing the following:

rect1 = {
   x: 4,
   y: 4,
   width: 3,
   height: 5
}

and

rect2 = {
   x: 7,
   y: 1,
   width: 4,
   height: 7
}

I am currently trying to accomplish this by several nested if/else statements, but I know there would be a more adequate way.

What is an efficient way of accomplishing this?

Disclaimer:

I used the term overlap in the title as I wasn't sure how else to describe it even though they do not actually overlap.

Answer 1

Here's a simple version:

function rectOverlaps2(r1, r2) {
    let overlapX, overlapY;

    if ( r1.x <= r2.x ) {
        overlapX = r1.x + r1.width - r2.x;
    } else {
        overlapX = r2.x + r2.width - r1.x;
    }

    if ( r1.y <= r2.y ) {
        overlapY = r1.y + r1.height - r2.y;
    } else {
        overlapY = r2.y + r2.height - r1.y;
    }

    return (overlapX == 0 && overlapY >= 2) || (overlapY == 0 && overlapX >= 2);
}

Added: Just realized that there is an edge case - if the overlapping dimension (width or height) of one rectangle is just 1 unit, then the overlap should not be counted. Since this looks like a homework question, fixing this will be left as an exercise to the reader.

Answer 2

here's my solution for this problem. My idea is to create an array that contains all numbers between the start of the rectangle and its end in the Y direction, for example. Then if the other rectangle contains any of the indices in between, that means they are 'overlapping'

I didn't try any performance optimization, but that's the general idea.

rect1 = {
   x: 4,
   y: 4,
   width: 3,
   height: 5
}

rect2 = {
   x: 7,
   y: 1,
   width: 4,
   height: 7
}


function createMap(start, end) {
  return Array(end - start + 1).fill().map((_, idx) => start + idx)
}

function getEndPoints(rect){
  const endX = rect.x + rect.width;
  const endY = rect.y + rect.height;
  return {endX, endY}; 
}

function getOverlap(r1, r2){
  const r1Range = createMap(r1.y, r1.endY);
  const r2Range = createMap(r2.y, r2.endY);
  const verticalOverlap = r1Range.filter(val => !r2Range.includes(val));
  console.log(`These two rectangles overlap by: ${verticalOverlap.length} squares`)
  // Then just do the same for horizontal
}

rect1 = {...rect1, getEndpoints(rect1)}
rect2 = {...rect2, getEndpoints(rect2)}

getOverlap(rect1, rect2);