I have rectangles that are being drawn vertically in a SVG element (e.g. blue box on top and green box on bottom) and am trying to maintain a padding of 10 between the between the bottom of blue box and the top of green box, without blue bottom ever going under green top.

let minPadding = 10;//min difference to maintain and not pass between blueBottom and topGreen;
let blueBottom = (-20);//coordinate of bottom of blue box;
let greenTop = (-12);//coordinate of top of green box;

let diff = Math.sqrt(Math.pow((blueBottom-greenTop),2));
if (diff < minPadding) {
    console.log('collision');
}

The above detects if the blueBottom gets within 10 of the greenTop, the problem I have ran into is blueButtom maybe pushed down below 10 of greenTop (e.g. blueBottom (-1), greenTop (-12)).

Additionally, I am having to account for blueBottom and greenTop maybe both positive x, negative x or both. Any help would be appreciated!

0 Answers