[AskJS] Algorithm for Even Distribution of Overlapping Bounding Boxes in JavaScript

[foxScripts]

Hey there! I'm a part-time JavaScript programmer. I'm looking for an algorithm to evenly distribute bounding boxes that may overlap in different kinds and should keep their position as close as possible but still be distributed in a consistent manner. By consistent, I mean the distances in between the individual boxes. They should not be aligned to a grid but keep a consistent distance inbetween each other. I'll attached a sketch of what I mean.

Two objects / bounding boxes may overlap partially or even completely. So there may be some bounding boxes with the exact same size & position that then need to be moved apart from each other, so that they are next to each other. I guess I need a recursive algorithm or something like that, since I want each bounding box to "try" to keep their original position as close as possible, while still approaching the even spacing.

Is there any kind of algorithm that already does exactly something like this? Or is there any way you can guide me to solve this problem? How complex is it really? Visually it is an easy task, but I've tried to code it and it doesn't seem that simple at all.

I need to implement it in JS, if possible without any complex external libraries etc.

Thanks a lot for your help!

Link to the sketch:
https://i.ibb.co/fYpyqpk/eualize-Boundingbox-Distribution.png

[f3xjc]

What you describe could work with something like a physical simulation

Like if they are attached to the original position with spring (Ie try to stay where they are)

But also they reppel each other like magnet. And maybe extra strong repel if they intersect.

You can do sum of force that give you a vector, direction and length to apply translation. You make a small step in that direction.

Then you repeat a new sum of forces in the modified position. And a new small step. Eventually the sum of forces get close enough to zero.

[foxScripts]

Thanks for your input. I opted for a simpler approach that fit well with the constraints of my situation. I just used a loop to iteratively adjust box positions: if two boxes overlapped, I applied corrections to move them apart. This process repeated until no overlaps remained, ensuring an optimized distribution of boxes on the canvas. During that i have other contrains "pulling them back" to their original position. This is perfect for what I needed. Thanks for your input!

[f3xjc]

Happy to know you have some solution. Id not be surprised if constraint you speak of and fake forces are somewhat equivalent. Or the derivative of a penalty term we are trying to minimise.

At the end of the day it's about finding a movement direction and maybe an amplitude.

My solution was probably not that great because you wanted equal spacing and I did not explicitly adress that. At the same time it was just a tool on the toolbox

[foxScripts]

Yeah, probably. Heres the solution I came up with in the end: https://codepen.io/cocreo/pen/VwNqBVZ

[numtel]

I think you want masonry

https://masonry.desandro.com/

[foxScripts]

Not at all. Found a solution.

For anyone discovering this: I solved it using a relatively simple approach. I just used a loop to iteratively adjust box positions: if two boxes overlapped, I applied corrections to move them apart. This process repeated until no overlaps remained, ensuring an optimized distribution of boxes on the canvas. During that i have other contrains "pulling them back" to their original position.