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 started writing my “Secret Stash” php script as a simple DirectoryIndex skin and evolved it to a full-featured entity of its own. My client needed an aesthetic way of showing their assets. Previously, they would either send them to an open directory on their web server, or write a new HTML page every time they needed something more. Even though they had their workflow down to a series of copy and pastes, it was a lot of work every time there was a change. Especially compared to the system I gave them.

What I did was create a php script that created a parallel version of the open directory. The script used the same CSS and design cues from the main site, scraped the open directory and its subdirectories, and presented the clients files in a context-appropriate way. Subdirectories were grouped together, there was a widget to play audio files from the browser, videos could be played in-line, and images were thumbnailed and loaded in a lightbox. And the best part is that just maintaining the files was all it took to create the corresponding client site.

I added more features beyond that– like simple file maintenance through the web interface, and the ability to add comments to each file.

The script was flexible enough to be used for different kind of clients, significantly reduced the maintenance time, and also made it possible for anyone with an FTP client to create client sites.

July 21st, 2009 | Case Study, Portfolio | No comments