[FLEX 3] Placing images into a Collage Canvas

Question

I've got an array of different sized images. I want to place these images on a canvas in a sort of automated collage. Does anyone have an idea of how to work the logic behind this concept?

All my images have heights divisible by 36 pixels and widths divisible by 9 pixels. They have mouseDown functions that allow you to drag and drop. When dropped the image goes to the closest x point divisible by 9 and y point divisble by 36. There is a grid drawn on top of the canvas.

I've sorted the array of images based on height, then based on their widths.

imagesArray.sortOn("height", Array.NUMERIC | Array.DESCENDING); imagesArray.sortOn("width", Array.NUMERIC | Array.DESCENDING);

I'd like to take the largest image ( imageArray[0] ) to put in corner x,y = 0,0. Then randomize the rest of the images and fit them into the collage canvas.

Answer 1

What you are trying to do sounds like treemapping.

Answer 2

I think this is what's known as a "Packing problem" or maybe a "2D bin packing problem". Googling those should find you some information, doing it efficiently is not a simple task. If you only have a small number of images, the easy methods would be:

1. Random...just randomly place images until no more can fit. Run this random placement 10..100..1000 or more times, and pick the best result (where "best" is determined by some criteria like least amount of wasted space, or most pictures fit, etc)

2. Brute force...try every single possible combination, one by one, and pick the "best" one. Downside to this method is that as number of items scale up, the amount of computation scales up very quickly.

Answer 3

I researched treemapping and packing problems. .... and eventually decided to create an array of all the points on the canvas, then assign them a value of empty. I then looped through my array of images and placed them on the points that were "empty" and reassigned all the points it occupied with the source name of the image. It worked beautifully. But definitely takes time to create the array.