trjhtr

This is my solution to find the coordinates of 2 overlapped rectangles implemented in JavaScript. Each rectangle is represented by 2 points, each with 2 (x,y) coordinates.

Can this code be improved?

const maxOfX = (rec) => (Math.max(rec.x1, rec.x2));
const maxOfY = (rec) => (Math.max(rec.y1, rec.y2));
const minOfX = (rec) => (Math.min(rec.x1, rec.x2));
const minOfY = (rec) => (Math.min(rec.y1, rec.y2));
const comBinedRectangle = (rec1, rec2) => 
const rectangle1 = x1: 2, y1: 2, x2: 4, y2: 4 ;
const rectangle2 = x1: 3, y1: 3, x2: 6, y2: 2 ;
console.log(comBinedRectangle(rectangle1, rectangle2));
// x1: 3, y1: 2, x2: 4, y2: 3 

• Document/comment
  
  I have no idea whether there are agreed standards for ECMAScript, e.g. JSDoc.


• 
  If I used what you called OverX I'd call it OverlapX and invert it.
  OverlapX = minOfX(rec1) <= maxOfX(rec2) && minOfX(rec2) <= maxOfX(rec1);
  


• precomputing booleans the way of OverX and OverY precludes short-circuiting the evaluation of the combined no-overlap-condition.


• One could use "nomalised" rects: minx/miny/maxx/maxy.


• (I'd prefer plain function definitions over arrow functions if they are going to get a name, anyway.)


• (There is bound to be a way to have, e.g. Math.min(values) operate on all x-coordinates of a shape, my ignorance thereof notwithstanding.)

/**
 * Returns intersecting part of two rectangles
 * @param object r1 4 coordinates in form of x1, y1, x2, y2 object
 * @param object r2 4 coordinates in form of x1, y1, x2, y2 object
 * @return boolean False if there's no intersecting part
 * @return object 4 coordinates in form of x1, y1, x2, y2 object
 */
const getIntersectingRectangle = (r1, r2) => r2.y[1] < r1.y[0];

 return noIntersect ? false : 
 x1: Math.max(r1.x[0], r2.x[0]), // _[0] is the lesser,
 y1: Math.max(r1.y[0], r2.y[0]), // _[1] is the greater
 x2: Math.min(r1.x[1], r2.x[1]),
 y2: Math.min(r1.y[1], r2.y[1])
 ;
;

/* ↓ DEMO ↓ */

const rectangle1 = x1: 2, y1: 2, x2: 4, y2: 4 ;
const rectangle2 = x1: 3, y1: 3, x2: 6, y2: 2 ;

console.log(getIntersectingRectangle(rectangle1, rectangle2));
// x1: 3, y1: 2, x2: 4, y2: 3 

First, both rectangles get transformed into object with keys x and y and sorted arrays of two of corresponding them coordinates as values.

r1 = 
 x: [2, 4], // x1, x2
 y: [2, 4] // y1, y2

r2 = 
 x: [3, 6], // x1, x2
 y: [2, 3] // Y2, Y1 !

That's because for this job it is important to know which of xs and ys is lesser and which is greater. Rather than Math.max() and Math.min() a single .sort() can be used.

Alternative would be to declare that (x1, y1) is assumed to always be top-left corner, but as I see in rectangle2 in your question, that is apparently not always the case.

Now, noIntersect is negated

!(a.left > b.right || b.left > a.right || a.top > b.bottom || b.top > a.bottom);

which tests if in both axes sides from one end of one figure exceed opposite-direction end side of the other figure, e.g. if left side of figure a is more to the right than the right side of figure b.

At the end we return false if there is no intersection of our rectangles, or an object with coordinates if there is. Intersecting part will always span from:

the greater of the 2 lesser xs of both rectangles

to

the lesser of the 2 greater xs of both rectangles.