Avoid overlapping images

I am currently working on a project where I will be displaying anywhere from 10-30 images on screen to the player. These images are displayed in random locations on the screen.

My question is what is the most efficient way to display these images on screen an make sure that they do not overlap each other as well as have at least a small gap in between them?

I have bounced around a few ideas in my head but nothing seems to work very well to this point. I am sure this is something that many people have done before so I thought I would ask around.

One of my ideas was to simply give them all physics and allow them to sort of bounce out of each others way. [import]uid: 69531 topic_id: 12689 reply_id: 312689[/import]

adding physics is one way

another way is to setup a grid and snap the image to a grids region. then marked the region as used if it is empty and an image falls. if a new image tries to fill that region and that region is used, try a new region.

another one is to keep a list of the image “drop zone x,y” and when a new image drops compare the newly drop image to the x,y with some offset for widht/height/gap of the old image- if the offset is a hit (the old image region and new image region) then bail. look for a new region.

another more complex way is to use BSP - binary space partitioning.

c.
[import]uid: 24 topic_id: 12689 reply_id: 46499[/import]