This one comes with a live demo!

One of the biggest problems with my  last Canvas experiment is that if you put text labels over points of interest, they quickly clutter up and become difficult to read. In this demo, I take a list of labels and the coordinates they belong, then I treat each label as a like-charged ion and they automatically repel each other and find their own non-overlapping positions. I also put a spring force between each label (visualized by the red line) to its original position so they don’t stray too far. There are also some visual embellishments specific for the application.

In my next iteration, I’m going to try and properly attach events to each particle. I have rudimentary drag and drop now, but it’s not robust enough for other ideas I want to add. I also want to be able to add uncharged particles and have wind and gravity. So I can make the whole thing a proper particle playground.

Note: since the code was ripped from a Greasemonkey script, it’s FireFox only.

Update 18 July, 2010: I’ve made it a little more interactive, re-ported a more up to date version of the code, and made it somewhat compatible with Safari and Chrome.

November 12th, 2009 | Mental Note: Add Category, Nerd, Portfolio | No comments

I rewrote some JavaScript of mine to use <canvas> instead of a <pre> block to display some data from a database scraped from a webpage. So far, it’s looking a lot nicer:
I can do all sorts of other cool visualizations of the data too. Some things I learned that weren’t in the Mozilla documentation:

save(), restore(), scale(), and translate() are useful, but when you want to do operations about a point other than the origin, setTransform() does a much nicer job when you use a point other 0,0 for the origin. I could have sworn there was a way that didn’t involve me doing math to do it, but I couldn’t find it and ended up just doing the math to get setTransform to work.

scale() does a really horrible job. I abandoned using tiled images and scaled Text. As you can see, I went with a solid background, and in that picture I removed for aesthetics — but I ended up writing my own custom method for scaling text (I had to do more math!).

I’m not sure how far I’ll take this, or in what direction, but I’ll have fun along the way.

September 16th, 2009 | Nerd | No comments