Random distribution of objects in space, with no overlap

@bobocel : Is it really a few hundred object ? That screenshot doesn't show over 100 objects I believe

That’s a sample. The words will move, and their number can be up to 600.

This is what I'm trying to achieve, and before using the grid solution, I want to make sure the organic positioning of elements is impossible, or too difficult to bother.

How about using the grid solution first, then apply a random x and y for the item inside the cell it is in? It wouldnt go outside its cell then, so wont touch others. But in the mean time itll be random, as it has been placed randomly in its own area.

You mean something like this: http://reclipse.net/kirupa/randomPlacementGrid.swf

But the issue is that I would still not position the elements organically.

but if you removed the larger grid and just showed the child objects you wouldn’t know it was on a grid…

^ exactly. Making it more ‘organic’ would mean overlapping

You would, because two objects from different columns, would never be one under the other. But in the sample I posted, the randomizing effect is organic. (eye placed :D)

I say give it a try with the hidden grid + limited random position. You can even skip some grid nodes, randomly, so it will look even more random. :stuck_out_tongue:
I used this thing before and worked pretty well.

I say give it a try with the hidden grid + limited random position. You can even skip some grid nodes, randomly, so it will look even more random. :P
I used this thing before and worked pretty well.

Yeah will do. This also looks similar:

You would, because two objects from different columns, *would never be one under the other*. But in the sample I posted, the randomizing effect is organic. (eye placed :D)

But, that would mean they overlap?..

you can start with the random grid, then compute distance between all adiacent nodes (grid).



after that, compute average distance and start moving nodes so that they each distance is closer to average value.



on each move, make sure you don’t overlap adiacent nodes

Or how about using a Random Walk?

I take it that flash has certain methods to spawn random coordinates? You could use those as seeds, then through a random recursive proces you can plot out random movement which appears to be organic. Then you just need to run a hit test to see if there are any collisions, if there is a collision, proceed with another iteration of the random walk.

So here’s some very very rough pseudocode.

for i = 0 ; i < 5 ; i++:
    spawn random seed points

while x = True:
    foreach seed:
        offset.x = Random(range 1,500)
        offset.y = Random(range 1,500)
        
        if the object does not collide with another object:
            continue with next object.

So the trick is that you start with a random spot, then get a random offset etc. If the offset is constantly random there won’t be a structure in there anywhere.

Ofc you will need some way to check canvas bounds.

But doesn’t flash simply have some kind of rand() function??? I don’t code in AS, so I wouldn’t know…I can’t believe it doesn’t though, why can’t you just a random seed function and then check for collisions and bounds??

Yep, I know I can use a grid, but I want a more organic solution, not evenly positioned elements. There must be some math theories to do that. :(

It is a right decision that you expect already existing theory on this rather than taking the risk of finding quick solution. If you can find a well matured algorithm (means less number of loops etc), you can just work towards making it more flexible and userfriendly to fit your project/product. Not sure if this can help but I would suggest you to search on java or c++ resources / forums for help. In the past I had better help from those kind of forums than AS communities.

I’m also interested in the same math theory, but for 3D. :silly:

I'm also interested in the same math theory, but for 3D. :silly:

Seriously most complex tasks we face are within 2D :smiley:

why can't you just a random seed function and then check for collisions and bounds??
Because is a problem when you have many items. Too much calculations to spent on collision detection. Not to mention that those calculation may be needed on every screen resize event or item interaction.
why can't you just a random seed function and then check for collisions and bounds??
Because is a problem when you have many items. Too much calculations to spent on collision detection. Not to mention that those calculation may be needed on every screen resize event or item interaction.

Gotcha.

why can't you just a random seed function and then check for collisions and bounds??
Because is a problem when you have many items. Too much calculations to spent on collision detection. Not to mention that those calculation may be needed on every screen resize event or item interaction.

There is a way for that too. Once you have found each items position, just save it as a percentage of stageWidth and stageHeight, somewhere in the properties of the item. When resized, just use that percentage to see where it should be placed.

For example, take item1:

// Position
item1.x = Math.random()*stage.stageWidth;
item1.y = Math.random()*stage.stageHeight;

// Store
item1.pos = [item1.x/stage.stageWidth, item1.y/stage.stageHeight];

// And on resize:
item1.x = item1.pos[0]*stage.stageWidth;
item1.y = item1.pos[1]*stage.stageHeight;

Or:

// Store first
item1.pos = [Math.random(), Math.random()];


// Position at start or on resize:
item1.x = item1.pos[0]*stage.stageWidth;
item1.y = item1.pos[1]*stage.stageHeight;

The biggest problem is creating what you want. Im not sure what it is that bobocel wants. Overlap or not? Because that 3D-ish example is overlapping (obviously, when items are behind others, they overlap)

@Emroni … i used that trick too. But I had times when I needed to restructure the grid live. Because, for example, on width the items got too crowded.

No overlapping, no movement. :slight_smile:

No overlapping, no movement. :)

Is this what you’re trying to achieve?

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

Obviously you can download the siurce code to check the math behind this.

^ I cant wait to see him at FOTB :slight_smile:

Sounds interesting

If your objects’ size are the same ? rect or round ? rotation ?

There is an easy way , you can use BOX2D to do that (get rid of gravity) though it’s a bit extravagant :smiley: