3

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.

DJClayworth
  • 684
  • 4
  • 12
  • 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 06 '10 at 17:35
  • I'm looking for a general technique of laying out such elements, or references to work or studies about that subject. – DJClayworth Oct 07 '10 at 15:17
  • @DJClayworth: are you looking for a solution to the optimal packing problem? – akonsu Oct 10 '10 at 04:46
  • "optimal" is not a requirement, especially in the traditional sense of maximizing the number of elements in a given space. I'm looking for any work done on this issue, ideally with a reference, and/or suggestions for how it might have been done before or might be done in the future. – DJClayworth Oct 12 '10 at 15:25
  • 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. – BerggreenDK Oct 12 '10 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 '10 at 07:59
  • @BerggreenDK I'm not looking for "optimal layout" in the sense of adding as many non-rectangular shapes as possible into a limited space - I'm looking for a good way to make a pleasing layout when the UI components are non-rectangular. – DJClayworth Oct 13 '10 at 17:52
  • Laying out where? On paper? In a wireframe? In HTML? – DA01 Oct 13 '10 at 18:05
  • so this is a design question, and not an algoritmic kinda question? its more like: how do I produce something pretty with fluffy form? :o) – BerggreenDK Oct 15 '10 at 00:21
  • I think one of the problems here is that there is no such thing as non-rectangular elements in web design. Everything is a box. If you want something other than a box, you need to use vector graphics via SVG or use a canvas element. Both would still have a rectangle, but its a rectangle that can hold curves. – LoganGoesPlaces Oct 17 '10 at 00:22
  • I didn't say this was web design. – DJClayworth Oct 18 '10 at 16:07
  • @BerggreenDK I'm looking for ways to go good design, but more specifically to write a system to allow others to go good design - what would a layout manager look like if it had to deal with non-rectangular objects? – DJClayworth Oct 18 '10 at 16:09
  • I'm still not sure what you are asking. By 'layout manager' are you referring to some sort of IDE? If so, consider looking at interfaces for drawing irregular shapes (such as Adobe Illustrator). – DA01 Oct 18 '10 at 17:08
  • Hmm, I not sure, but I dont think anyone can make such an algortim for every purpose as thats why we have designers. I've co-worked with quite a few of them over the years, and they all have their own favorite ways of working + experience also counts when it comes to good design and lastly, things changes over the years. Suddenly its Glossy gradient/reflections, then its retro boxes, then its cartoonish layout etc. As I understand, it sounds like you are trying to automate artist jobs(?) or did I get it all wrong? The problem is the medium and assignment. Different jobs needs different design. – BerggreenDK Oct 18 '10 at 20:30
  • Most designers I know (for paper and webdesigns) work by grids as it helps making balance in things. Eg. 960 Grid is a "template" for todays websites. But thats not so usefull for smartdevices such smartphones and some tablet computers. The 960 grid is pixelbased its meant for webdesign, not paper... but the matrix/table/grid thought is what makes good designs with it. – BerggreenDK Oct 18 '10 at 20:35
  • This question is too vague. You want to distribute visual controls? Icons? Silhouettes? What is the distribution criteria? "Prettiness"? – Leonardo Herrera Oct 18 '10 at 23:27
  • I want to allow programmers to decide these things as far as possible, Leonardo. But I need to give them some structure to work with. – DJClayworth Oct 19 '10 at 14:55
  • I don't think we're going to get anywhere with this. 17 comments and we're still lacking clarification. – DA01 Oct 19 '10 at 16:38
  • Well, there was always the possibility that there was simply nothing out there. Maybe we'll just have to invent the paradigms ourselves. – DJClayworth Oct 20 '10 at 13:59
  • You write an "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." .... WHAT OBJECTS??? clearify please... and by what rule? color? size? shape? cant make algoritmes without rules, perhaps you need to make a "language" instead of a design tool? – BerggreenDK Oct 22 '10 at 23:10
  • Don't worry if this can't be answered. I was looking for references and ideas, rather than a definite concrete algorithm. If there aren't any then I'll take another path. – DJClayworth Oct 23 '10 at 22:18

2 Answers2

3

Jared Tarbell might lead you in the right direction.

He has done some research in the area.

http://levitated.net/daily/levEmotionFractal.html

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

ThomPete
  • 1,247
  • 8
  • 10
0

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?

BerggreenDK
  • 101
  • 2