If you have used the tools such as code map, you may have liked the display of the organization of items as objects which float around to new locations as new ones are added and old ones are removed.  While the default layout of the objects are such that each is evenly spaced and clustered around the center of the canvas, you can drag any object to a new position and the connectors that connect the moved object with others are automatically redrawn avoiding any objects that may be in the path between the moved object and others. This post talks about how to implement the logic that makes these objects float around to an appealing visual display. First, each item as it is added on the canvas finds its starting position. This is typically the center of the canvas for the first item. The next item is placed such that the centers of both these objects are at an equidistance from the center. As more and more vertices are added, the objects occupy the vertices of the corresponding polygons. This is true when the objects are all equal and the items appear uniformly spread around the canvas. But sometimes objects are represented as hierarchy in which there are multiple levels, each level appearing as a line of items. In such a case, the object occupy positions on the line such that their centers are equidistant. If there were a graph of objects, then the node with the maximum number of edges could occupy the center of the canvas, and the other nodes could be arranged around it in increasing circles such that the ones with more number of edges are closer. No matter how we choose to position the centers, the objects themselves can be visualized as a square or rectangle so that some space is left around the objects when they are rendered. Now we can talk about the connectors such which connect between the center of the edges of this square or rectangle bounding the objects. These connectors are drawn as straight lines when there are no obstructions and as curves when they have to avoid other objects in their path. The curves are drawn with no particular preference for left or right of the obstruction and chosen such that the distance covered is minimum. This can be easy to find given the x and y co-ordinates of the start and end of connectors. When the object is moved, all the connectors to that object are redrawn based on the new destination. This redrawing does not affect the other objects. The curvature of the connectors are dependent on the size of the obstruction. Both the connectors and the objects make use of their centers for finding positions on the canvas. Since the strategy for spacing out their centers on the canvas are interchangeable, the code to implement them could consider using the design patterns.