Does anyone have a good reference for laying out non-rectangular user elements? I don't just mean circular buttons which are laid out as if they were in a square box, and I don't mean placing them exactly - I need an automated way to lay out a number of circular or oval shapes, taking into account their exact shape, in different container objects.

To clarify, I am look for research on this subject or ideas for principles on how to do it. I'm not looking for code examples or implementation details. This is not something I've seen, so any indication that it exists would be helpful. The closest thing to this I've seen is the "cloud layout" used by some "associated topic" interfaces.

To clarify again, this does not have to be related to web design, or even to currently available systems. I'll settle for any work, no matter how theoretical.

My last attempt to clarify for those who keep asking. Sorry for those who understand the issue. Taking Java as an example, the Java UI toolkits have LayoutManager which is used to control the placement of components, buttons or images or text boxes. There are many implementations of LayoutManager, which place the components in different ways. However all the implementations rely on the underlying mechanisms of components which assume they are rectangular, having a width and a height. The question is: what would a LayoutManager paradigm look like if we didn't need to assume that the components were rectangular, but could be circular or oval.

  • I'm unclear on what you're asking. What type of configuration do you need them to be laid out in? What is the goal or purpose of the positioning?
    – lori.lee
    Oct 6, 2010 at 17:35
  • I'm looking for a general technique of laying out such elements, or references to work or studies about that subject. Oct 7, 2010 at 15:17
  • @DJClayworth: are you looking for a solution to the optimal packing problem?
    – akonsu
    Oct 10, 2010 at 4:46
  • 2
    might try to have a look at "cutting instries" (textile, wood, metal) as their machines have software algortimes that will calculate the best fit on a certain piece or how much is needed for certain forms. Oct 12, 2010 at 23:27
  • 1
    @DJClayworth given that you've received no useful answers in a week, it might be a good idea to expand your question by adding visual examples or links to something similar to what you're talking about. You might try rephrasing the question to remove the "how", as people seem to think you're asking an implementation question.
    – Rahul
    Oct 13, 2010 at 7:59

2 Answers 2


Jared Tarbell might lead you in the right direction.

He has done some research in the area.


Otherwise there is Ben Fry or Casey Reas the two guys behind Processing http://processing.org/exhibition/

  • Interesting and thought provoking. Thanks Thom. Or is it Pete? Oct 19, 2010 at 14:56
  • It's Thomas :) now push that up arrow so I can get a point :)
    – ThomPete
    Oct 19, 2010 at 18:07
  • Glad to oblige. Oct 20, 2010 at 14:00

Aha! now it starts to make a little sense. Perhaps you can use algortime thoughts like how colors are placed in histograms?

First you analyse the amount and spikes, then you find patterns and ajust the elements accordingly.

I would give every element a sort of "weight/value" (or more variables/attributes even) then spread them out by various patterns.

Giving the user the options perhaps to use patterns/filters like: mirroring, repeating, rotating, flipping etc.

So if you need to spread out in two columns, then you divide the contents into two groups or figure out how many "large" elements there is and then places them in smallere and smaller sizes from that. The size of the elements could be calculated from the amount of usages or weighting in other parameters.

Do you follow this idea?

  • @DJClayworth have you read this one? Nov 5, 2010 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.