Clipping a Rectangle in JavaScript?

Question

I'm trying to write a function that takes two possibly overlapping rectangles and returns an array of rectangles that cover the area of rectangle A, but exclude area of rectangle B. I'm having a hard time figuring out what this algorithm looks like as the number of possible collisions is huge and difficult to account for. How would you do this in Javascript?

Answer 1

It sounds like you're trying to calculate what points are left on rectangle A when it is being overlapped by rectangle B, you can't upload pictures on here but I think I get the idea.

So it seems 2 rectangles would need to be calculated, if rectangle B is colliding on a corner, for example, but if its colliding only on rectangle A's side, then if B is greater than A, there is only 1 rectangle (just the remainder of A) but if B is smaller than A, then there should be at least 3 rectangles, and maximum of 4 rectangles (if B is in the middle of A), although I just realized that it depends how you count the rectangles in the case of B being entirely inside A (and also the case where B is colliding on a corner), because you can count either the entire width for the top to bottom remainder of A, on each side of B (if B and A are both wider than taller), and then calculate the remaining rectangles for the length that are, on either side, in between the two upper rectangles, or you can count the full length of the remaining rectangles on either side, and then for the width, only calculate the width in between those two rectangle-areas, or you can only calculate the width and length each up until the corners of the rectangle, and then calculate 4 more separate mini rectangles from the corners of rectB out into rectA, so it seems there is no universal way to do this.

Might I ask, why exactly do you need to calculate all of the remaining rectangles in A? Is there something else you are trying to do? Are you trying to accomadate all possible inner rectangle configurations for the case of B being inside A also, or only when its overlapping on the sides? Can you give me mroe context for what you're trying to do?

Well either way, it seems like we should at least attempt to get what points of one rectangle are inside of the other, this can be useful for collision detection or other things:

So you basically need to just calculate an array of rectangles (which is itself an array of points) for the remaining space in A.

so lets say

var rectA = [[0,0],[0,10],[10,0],[10,10]], //technically this can be any shape but we will treat it explicitly like a rectangle

rectB = [[2,2],[2,8],[8,2],[8,8]];

So rectB is in the center of rectA, now we just need a function to calculate an array of arrays [rectangles] of arrays [points] that represent the rectangles on the side, for example, of B, that make up the area of A.

In order to start we first need to calculate what points from B are actually inside of A, and from there get the rest of the rectangles of A. I think the most straightforward way of doing this is simply using if statements for each point. So lets make 2 functions #1 to check if a point exists in a rectangle and #2 to get all points in a rectangle

function isPointInRectangle(point, rectangle) {

return point[0] >= rectangle[0][0] && //to the left of top left corner

point[0] <= rectangle[3][0] && //to the right of bottom right corner (assuming its only in rectangle shape)

point[1] >= rectangle[0][1] &&// is it below (greater is lower) than top left corner?

point[1] <= rectangle[3][1] //is it above the bottom right corner?

}

function getPointsOfRectBInRectA(rectB, rectA) {

var result = [];

for(var i = 0; i < rectB.length; i++) {

if(isPointInRectangle(rectB[i], rectA)) result.push(rectB[i]);

}

return result;

}

Now if you run the function getPointsOfRectBInRectA(rectB, rectA); you should get an array of all 4 points, and if you try changing the points of rectB and try again, you should only get the points that are inside of the new rectangle.

Again, let me know what exactly you are trying to accomplish and why for better context.