CODEWITHSUNDEEP
apache-flexactionscript-3arraysimage
Bridget
Bridget

Reputation: 21

Placing images into a Collage Canvas

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.

Upvotes: 1

Views: 913

Answers (4)

JJMack
JJMack

Reputation: 11

I did a different take on that I just fits all images to a tile size and tile the into a document. Image are virturly center croped to the file size via a layer mask. Paste Image Roll Script http://www.mouseprints.net/old/dpr/PasteImageRoll.html http://www.mouseprints.net/old/dpr/PasteImageRoll.jsx

Upvotes: 0

Bridget
Bridget

Reputation: 21

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.

Upvotes: 0

davr
davr

Reputation: 19137

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.

Upvotes: 1

ilikeorangutans
ilikeorangutans

Reputation: 1763

What you are trying to do sounds like treemapping.

Upvotes: 1

Related Questions