Scatter images without overlap

[Mpjraaij]

Hi,

I am creating a flash website and I want to scatter images all over the screen. Now doing this part isn't that hard, as it seems simply as giving them random coordinates. However I do not want them to overlap each other nor certain areas.

http://biisiin.com/scatter_images.png

I haven't scattered them yet, I've tried though with hitobject etc. How can I solve it so they won't overlap each other?

Thank you.

[5TonsOfFlax]

Depending on your actual requirements, this could range from easy to impossible.

How many pictures? how much whitespace will be left? Are they a uniform size? Uniform aspect ratio? is randomly selecting a predefined grid square acceptable?

[Mpjraaij]

Images will have the same size, the amount of pictures is flexible (i.e. I decide how many I will use). I don't need whitespace (a small overlap is allowed). The images all have the same size and a grid is certainly acceptable!

[5TonsOfFlax]

In that case, the easiest solution would be to divide your space into a grid with the right number of places, then select random grid spots without replacement. Or select random images while you fill the grid sequentially, which is probably easier.

Assuming you've got a 5x4 grid in a 1000x800px space, and 20 images in an array, something like this might work for you:

var gridHeight:int = 4;
var gridWidth:int = 5;
var gridSpaceHeight:int = 200;
var gridSpaceWidth:int = 200;

for (var j:int = 0; j < gridHeight; j++){
  for (var i:int = 0; i < gridWidth; i++){
     var image:DisplayObject = getRandomImage();
     image.x = i*gridSpaceWidth;
     image.y = j*gridSpaceHeight;
     addChild(image);
  }
}

function getRandomImage():DisplayObject{
  //choose random index of remaining images
  var index:int = Math.floor(Math.random()*images.length);
  //get and remove image at that index
  var selected:Array = images.splice(index, 1);
  //return it.
  return selected[0];
}

[Mpjraaij]

Thanks that works. Now if you look at the image, I still have the problem with those two green bordered objects, they grid is not allowed to cover these areas. It should skip these.

[5TonsOfFlax]

Ah, I didn't get that requirement before. Well, if those areas occupy grid squares relatively well, you could just disallow those squares as they are already taken. If not, then back to the drawing board. You could manually determine valid points to place a picture, and then choose among those points as you iterate over your pictures. To manually determine points, you can either put invisible clips on the stage, or somehow calculate the points.

If your space is rather sparsely populated, you could also just place things randomly, checking that the placement is valid. I would not recommend this if your space will be more than half-filled.