Joel Verhagen

a computer programming blog

Flickr Tree

What Is It?

Note: the published date on this post is when I started this project, not the timestamp on the publication of this post.

The basic idea behind Flickr Tree goes as follows:

  1. Start with a seed image from Flickr.
  2. Get the tags for this image and find another image on Flickr with the same tag.
  3. Connect these two images with a line and aesthetically place them on the page.
  4. Continue linking different images to each other based on common tags until your browser crashes.

The real fun part of this program is the "aesthetically" placing the images on the page. My hope and dream was for the different nodes of the resulting tree to be spread out evenly across the page without any lines crossing.

Physics!?

Well, ladies and gentlemen, here's a kicker: the oh-so rued Accelerated Physics I took in high school have finally come in handy. There's actually an entire Wikipedia article dedicated to this topic. Clearly, I wasn't the first to think of this.

The physics behind it basically this: I set each image as a point charge and use Coulomb's Law to find the forces between any two images. As we all know, force equals mass times acceleration so I gave all the images the same mass (1 kg) so that the output of Coulomb's Law would be exactly the acceleration due to the force between the two points. I did that for every pair of images to find the total acceleration for each image would.

Looping this process over and over would eventually put the images in equilibrium position. Once it's in equilibrium position, we add another image and start all over.

Try It Out

Anyways, enough with the yadda-yadda and jibber-jabber. Here's a working example.

Technologies

Flickr Tree is written in JavaScript and it uses jQuery to do all of the little annoying tasks things jQuery is meant for. To query for the images based on tag, I wrote a little PHP script that uses the Flickr API. I use wz_jsgraphics.js (I think the project is abandoned now) to draw the lines between the images and to create the tag lables.

If you want to take a look at the source code, it's available on my GitHub profile