Collision Based Layout

December 31, 2007
You might also like:
  • Dynamic Colour (Color) Harmony with Actionscript
  • Flash 8 Bitmap Data
  • McGoogle
    • Other content in Sketches

    this couldn’t be more relevant to something I’m working on if you tried any harder. good job I’m sad enough to dodge the family and check mxna on this grim new years eve.

    although a link to ape and your source would save me googling and experimenting. not that I’m complaining.. I’m all up for facilitated learning and epistemology (how to figure shit out for yourself).

    tbm / 31/12/2007

    Thanks Mike. There was a link to Ape in there but I’ve added it again at the bottom. As for the source, I often prefer people to go out and build these things for themselves, which like you say means you end up learning a whole bunch of stuff!

    One thing to mention is along with Ape I also used the excellent Tweener tweening engine.

    bren / 31/12/2007

    Hey Brendan,

    This is awesome. Any chance you could share your python-ported vogel spiral actionscript?

    Zeke Sikelianos / 03/01/2008

    No probs - there’s now a link to an AS3 Vogel Spiral class together with CS3 example.

    bren / 04/01/2008

    I know very little about how it works, but it looks and feels great. Thanks Bren ;o)

    Philip / 04/03/2008

    Comment

    One of the things I’m always keen to explore are systems for dynamic layout of content - whether that be the positioning of photographs, type or sections of an interface.

    I’ve played around with Treemap algorithms, which can look really great and can cope with lots of objects that always fit inside a predefined space. Below you’ll see between 10 - 50 of the latest public photos from Flickr, all neatly placed using a Treemap inside a 450 x 300 space. What’s nice about this is I don’t have to worry about the amount of pictures - they always fit inside the specified dimensions. Click on it to reload a random number of images.

    I also chanced upon a thing called Vogel Spirals, which while I’m yet to use this algorithm in any actual project I think it could prove interesting. Click on the image below to display a random number of objects all neatly placed as a Vogel Spiral. The code I used here was simply an actionscript port of some Python code.

    But I’m always interested in randomness. So in the case of displaying photos it’s nice to show a gallery in some situations as if they’ve just been scattered around. But the problem with scattering is things can get hidden. This is where a collision based system using a physics engine can really come into play. Luckily we don’t have to worry about making an actual physics engine because Alex Cove has a wonderful open source physics engine for AS3 called Ape (thanks to Branden Hall for pointing it out).

    Now I’m not really interested in making physics based games or anything like that. But as I played around with the engine I realised that if you randomly placed a load of objects and each had collision detection abilities, they would magically sort themselves out so to speak. So now we had total randomness coupled with a built in ability for every picture to jostle for space creating a lovely random layout!

    Here’s a little Flickr engine I’ve built which is kind of fun as you click on each picture. Click on the background to load the pictures in again and get another random layout. Notice how they jostle for position then settle down.

    Of course things get bumped off screen but you could easily stop that happening. And you could remove the bouncy nature of the images. It could all be static once the objects are positioned. The point is this kind of approach may be useful when laying out large numbers of data whilst trying to retain a random feel.

    Get hold of Ape and give it a go.

    Popularity: 55% [?]