Tiles and the packing problem

On more than one occasion in the past I’ve been wishing to create a custom component that is totally dynamic so that I don’t have to worry about hardcoding any sizes.
So lets just say I have a list/tilelist and it contains pictures. Normally what I’d do is make sure that the pictures are a set size and I’d just make the list dynamic in one direction so it may end up showing 4.5 tiles which is normally fine as it’s a scrollable list.

But what if you have a list that will only ever contain say 10 items and you wish to use as much of the users screen as possible then each time the user changes the screen size you need to work out the optimal size of a tile/item.

Check out the demo here. This actually took me quiet a while to figure out how to do, I think the function to work out the size has gone through several iterations. (the example is based on the Tile class as that handles the layout and lets me do the nice animation moves when one tile moves around the screen on resize)

Here is the actionscript code that will work out the optimal size. I know that this function can be optimised further, but this will do to show you how its done. (possible optimisations: SQRT is not a nice function to call for the processor, use it sparingly, reducing number by just -1 each time isn’t great either, could reduce it by larger amounts then swing back a forth until I get the best fit).

//total number of tiles
var tile_count : Number = numberOfSlides;
//height of rectangle
var b : Number = unscaledHeight;
//width of rectanlge
var a : Number = unscaledWidth;
//divide the area but the number of tiles to get the max area a tile could cover
//this optimal size for a tile will more often than not make the tiles overlap, but
//a tile can never be bigger than this size
var maxSize : Number = Math.sqrt((b * a) / tile_count);
//find the number of whole tiles that can fit into the height
var numberOfPossibleWholeTilesH : Number = Math.floor(b / maxSize);
//find the number of whole tiles that can fit into the width
var numberOfPossibleWholeTilesW : Number = Math.floor(a / maxSize);
//works out how many whole tiles this configuration can hold
var total : Number = numberOfPossibleWholeTilesH * numberOfPossibleWholeTilesW;
//if the number of number of whole tiles that the max size tile ends up with is less than the require number of
//tiles, make the maxSize smaller and recaluate
while(total < tile_count){
	numberOfPossibleWholeTilesH = Math.floor(b / maxSize);
	numberOfPossibleWholeTilesW = Math.floor(a / maxSize);
	total = numberOfPossibleWholeTilesH * numberOfPossibleWholeTilesW;
return maxSize;

If anyone else has a solution or knows of a better solution using actionscript (or anything else for that matter) I’d love to see it as although this works I’m thinking there must be a faster solution.

Looking at links like the following http://www.combinatorics.org/Surveys/ds7.html these problems can be pretty complicated!

[ad name=”ad-1″]

4 thoughts on “Tiles and the packing problem

  1. hmmm probably not as the code is pretty messy as I refactored it quite a few times to get it just right (and I was only prototyping. The above snippet will replicate working out of the max size a tile can be which was the main point.
    Other than that its just the basic tile class that comes with flex. I may however make another post soon to show how to do the effect as other than that there isn’t much more to the demo.

    watch this space 🙂

  2. Kenneth, I am trying to do something similar to this but I need to pack rectangles and maintain their aspect ratio. Any clues for me. I can get the squares working but am having trouble with the height of the rectangles. I can post what I have so far if you’d have time to look at it.


Leave a Reply

Your email address will not be published. Required fields are marked *