I’m creating a tag cloud using JavaScript. It takes an unordered list of 'tags', and then distributes them randomly from the centermost-point of the div (Gaussian distribution).
The trouble I'm having is finding an efficient metric to determine if any of my tags are overlapping.
Ultimately I came up with 2 approaches:
(1) position each tag, taking into account the positions of the ones already placed. (I’m not exactly sure how I’d do this but, it doesn’t seem like the most elegant solution anyway, so whatever).
(2) Store the absolute position (top/left) and the width and height of each item in an array, generate a position randomly; check for overlaps, and then either place, or randomly regenerate a position accordingly.
Since this sounds like a common problem in game development, I figured I would post it and see if anyone knew of a best practice approach.
EDIT: Now I'm toying with the idea of determining center-point for each list item and distance to any corner, then comparing the distance between 2 center-points. Still further advice would be appreciated though.