2009/02/16 – 09:50

Road to tag cloud 1

I stumbled some weeks ago into wordle. To me wordle is the kind of tag cloud I always wanted to see on blogs. Also for mine. Archiving that with JavaScript is still off limits. So I decided to give it a try with Flash.

In a certain hope of geniousity I kind of hoped that the new text engine would provide me with outline shapes for fonts I gave it a first try using them: Unfortunatly that didn’t work at all. So I had to step back to the good old collision detection to see whether or not two texts overlap.
I think i optimized the collision detection to its max. Yet the tricky part of the tag cloud is: How to actually arrange the tags. Well: I have to admit: The guys from wordle are way ahead of me by now. I have no idea what they do that it works so fast, perhaps their math skills are just way above mine.

Anyway: I choose to implement two kinds of algorithms: In the first one the words are checked in circles, every circle check consists of a few angle checks. The second algorithm consists of a random based angle. So I choose a angle for a object at the beginning and then move them along this angle until they have enough space.
On a reasonable machine and without any overhead, I was able to position 40 objects in 3 seconds, acceptable but not good.

To try out the various parameters of the algorithms, I created a kind of sandbox which allowed me easier tweaking, until I finished some furbishing of the code I can give you this as example for try-out, have fun!

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

It lacks some features, but I think its a good start. If you have any suggestions for different algorithms: please let me know. I will open source this as soon as the documentation is on a acceptable level.

PS.: I use the Random Number Generator from Polygonal that allows me to positionate the text always in the same way.

Tags: , ,


  1. LukeNo Gravatar


    I’m trying to make word clouds that fill shapes (like http://www.imagechef.com/ic/word_mosaic/).

    I’m looking to accomplish this either in actionscript or in illustrator javascript. Can you give me some pointers or help with source code?

    Kind regards


  2. Martin HeideggerNo Gravatar

    Hi Luke, in my second post http://www.leichtgewicht.at/436/road-to-tag-cloud-2/ you can find a link to the source @ google code.

    But one of the biggest problems with this tag cloud is to maintain the scale relationship. Imagine you have your “heart-shape” and try to fit in all the words, with which size do you start? Say you found a good, matching position for all but the last word: then you need to rescale everything to match properly.

    The ImageChef works differently. In that approach its possible to use as much words as he wants. The advantage of this is that he can “fill” the heart shape until its filled enough (using smaller font every step). That is not just faster but also allows to create the shape.

    A brute force method for this would be to just randomly check 40 times (just a number) for each size if a random position is free and positionate it there.

Leave a Reply

Site informations

Martin Heidegger – Web Developerskype:mastakanedaxing:martin.heideggertwitter:leichtgewicht