Visualization Project
Facebook photos project.
This project prompts the user for his facebook account credentials, and fetches their photos, in chronological order. Then, these photos are scaled depending on the number of comments they have (larger if they have more comments). The photos are then arranged on the canvas using a distance minimization function.
Implementation Details:
Images from facebook are placed onto a discrete grid with a resolution of 10 pixels/cell. The application keeps a list of used cells and perimeter cells. When a new image is to be placed, the algorithm iterates through the list of perimeter cells, performing a hit test on each perimeter cell with the image to be placed, and the images that already exist. If the hit test returns false, then the image is placed there and the respective lists are updated.
You can view the source code by the view source option in your browser.
btw’s: You’ll need to use the browser that has full support of HTML 5 canvas tags…Like chrome and safari. Firefox 3.x and IE 8.x don’t work…
Link to full site
Comments from PiratePad A:
Please use the wordpress categories (Project2), etc.
FB hax finallly
wheres the data coming from from his fb account? i meant how, but he answered, fb api
That is pretty cool Ray. Maybe a white background with small gray frames around the images? Give it some FB feel.
I like how it uses live data to create the visualization. Using canvas is also a good tool.
lol ray lol
I like how much HTML5 canvas our class is using.
This is called the cutting stock problem. The technique you’re using is more or less the state of the art algorithm. I think there might be some other heuristics that could speed things up a little, but not much. It’s NP-hard. http://en.wikipedia.org/wiki/Cutting_stock_problem
Making them arange in a circle is pretty cool. Kind of like a globe of pictures, Interesting use of the Facebook API
Interesting idea, but I’m not sure if I would visually “get” it with out your explanation. Size to comments makes sense, but I’m not sure I’m sold on spiralling to the center. That being said, I think I would like to see it run with a larger photoset, because then maybe the relationships would be more apparent.
This would be really great with some zoom and pan action. (i agree) Or at least some way to look at the small photos if you want to. The friendbuzz photo kind of annoys me… it doesn’t look like it fits.
I was just about to say that… May want to add a filter to your api that pulls ads.
Nice job – A little self indulgence don’t hurt.
Simple, cool, personal. Works well, pretty polished.
Very cool implementation online. The ability to make comparisons with different amounts of images is an interesting concept. The personal aspect is nice too, I could see people wanting to play around with this with their own facebook images. It might help to have some visual cue to show how recently the photo was added (middle to outer circle), so the organization is clearer.
Comments from PiratePad B:
Hey, Ray – this is an actually useful tool, and attractive, too.
Very impressed that you registered your project as a facebook app.
I remember that you were really sweating how to do the automatic placement — you found a totally acceptable answer!
The pictures are presented like tree rings. It’s awesome.
Nice
I want to try! Me too (but don’t remember my fb pass) oh nos! HOW DO YOU LIVE! lol
It would be interesting to try to determine what makes a pic the most popular
I like this a lot! I wish facebook would impliment it yeah!, I always found their photo albums a little boring.
This would totally work with the facebook/general social networking narcissism thing. I remember the status word frequency Cloud app being huge – that with pictures seems like it’d be big as well.
Image size is a strong visual cue. For this project scope (exposing the relationship), it works very well. Kudos for actually getting it live online.