I have an array of 10+ numbers. They represent the coordinates in a circle - in degrees, i.e. Each number is between 0 and 359.999999...
The problem I'm trying to solve is that when I draw my objects on a circle (via the html5 canvas api), sometimes they are grouped together, and this leads to the elements being drawn on top of each other.
So, I would like to create an algorithm that evenly distributes the elements around their initial cluster position. Let them say (and I would like this to be a custom option) the minimum distance between two elements is 5 degrees.
So, if the initial array is [5, 41, 97, 101, 103, 158, 201, 214, 216, 217, 320] , then I would like the algorithm to appear with something like [5, 41, 95 , 100 , 105 , 158, 201, 211, 216, 221 , 320] (in this case, items in bold are distributed around their original “center of gravity”, regardless of whether these two or more items are).
It would also be necessary for the algorithm to recognize 0 and 359 only at a distance of 1 unit (degree), and also to evenly distribute such elements around.
Has anyone ever created such an algorithm or had a good idea how this could be achieved? Even some general thoughts are welcome. I am sure that I can achieve this with a lot of trial and error, but I would like to hear some educated guesses, if you want, first.