How to create a grid based on random shapes?

Question

How to create a "grid" using actionscript like the image below?

Basically you have an area of 1100x615 which should be filled with shapes that could be rotated and scaled...

Collision detection perhaps or something less cpu intensive for flash (as3) to manage?

Answer 1

(1) You may be able to adapt an algorithm used for creating word clouds.

Here's one example algorithm, based on Wordle's strategy. This works by choosing a start position/size/orientation for each object (generally starting with the biggest/most important ones), and trying to place it there. If it collides with an already-placed object, move it incrementally along a spiral expanding outward from the start position, and try again until you find a valid placement or you run out of places on the canvas.

This trial-and-error approach is slow, so you'll want a good way to accelerate your collision tests (some ideas at the links above), and possibly do the work in the background - say by generating level 2 off-screen while the player works on level 1.

(2) Another approach would be to use a force-directed graph to make objects jostle each other out of the way until a locally optimal spacing is found. Doing this with irregularly-shaped objects is nontrivial though. Once again this is a time-intensive iterative process, although you might be able to show it to the player before it's fully settled, turning the jello-like bobbing of the objects into an element of your game's style.

(3) A more experimental method would be to break your play space into polygonal cells (say, using a Voronoi tesselation), then assign an object to each cell. You then try to fit each object within its cell confines as best you can by rotating & scaling within tolerances. This is likely to produce more gaps than either option above, but has the advantage that it can be done in one pass without massive iteration, or collision tests between two arbitrary shapes.