Question

Here is the problem. I have rectangular canvas that have size of 1. So it have coordinate sistem of (0.0 … 1.0 – x and 0.0 … 1.0 – y).

I also have some tiles. Tiles are also rectangles. They have diffrent size and amount of tiles is a variable.

I want to stack tiles in rectangular canvas, from 0.0 to 1.0 (from left to right, from top to bottom):

1) tiles have to fit in canvas (but fill as much space as they could)

2) tiles have to be scaled (if they don’t fit), each tile should be scaled by the same amount (they have to remain same proportions).

3) imagine that you have this ’tiles’ in your hand, and you placing them into this canvas one after another

4) it almost like “TreeMap algorithm” but – shape of tiles have to be the same (rectangles) and i don’t need to fill all space of canvas

Is there anybody who can show me an algoritm in any C alike language (C, C++, Java, C#)?

*I tried this.

1) i calculated area of tile, then i calculate a sum of tile’s areas (for example: i have two tiles, one have area of 2, other area of 1, them it’s mean i have total sum of 3)

2) then i calculate what “proportion” each tile have in “total sum of areas” (for example: 2/3 and 1/3)

3) then calculate size of rectangle tile by Math.sqrt(x) (for example: Math.sqrt(2/3))

4) then draw tile one by one…

But this dosen’t work always. Sometimes i get tiles to be out of canvas..*

Answer 1

As others pointed – problem description is not very clear. But i’m assuming that you can scale each tile as you need (at least your examples shows that tile scaling is possible). So my solution will be simple (but maybe not what you want nor optimal):

• Scale each tile by factor :

  EDGEspace / (EDGEtile * N ½)

• Place each tile in current row, if tile gets out of space limits – advance to next row.

Here N is nearest perfect square greater or equal to the total number of tiles.

p.s. If you need some spacing between tiles – just make above scale factor a little bit smaller.

Hope that helps.