WordCloud - I am Coming After Wordle

After playing around a bit with create word clouds I've decided to write an HTML 5 version of Wordle.net. I am calling it WordyClouds. I've started the beginnings of the code on github.

Also, here's the updated bookmarklet <-- drag to toolbar to install. It does a uniformly randomized algorithm rather than Wordle's advanced packing algorithm.

As for that algorithm, I've done some research to how I might implement something close to Wordle's algorithm. I need to be able to make the best use of space - e.g. allowing tiny words to go inside of the holes inside larger letters. To do that I need the actual shape representation of all of the characters for a given font. After looking at the Canvas api, typeface.js and some cursory research into SVG, I've settled - for now - on using Canvas's bitmap feature: I would render each character required for the word cloud on a temporary scratch-pad-canvas, and then read its bitmap representation via the Canvas interface. A prove-of-concept was done and the code is here: glyphshapes.js.

Obviously, still big challenges lie ahead. How will the algorithm work? I am not exactly sure.

Update: I have written a naive non-overlapping algorithm. Here's the new bookmarklet <-- drag to toolbar to install.


Update 2: Added vertical word placement: WordCloud <-- drag to toolbar to install.


blog comments powered by Disqus