Monday, January 23, 2012

twitter feelings visualization with html5

I wanted to do some little project with html5 for some time now and finally I had the motivation to do it.

Using an almost unchanged version of my twitter feelings script as data source I visualize feelings from twitter and make them drop from to top to the bottom of the screen using html5 canvas elements.

If you look at the source code you'll notice that I generate an invisible div tag for every word, save the current location variables in the tag and delete it when it moves out of the canvas. This is a pretty dirty hack but saved me a lot of time figuring out how to parse multidimensional arrays in js. I am so php5 spoiled :)

The feelings posted on twitter are still pretty depressing. Also if the same words are dropping it's because no (new) feelings are posted right now.. just wait a little :)

Here it is (note that you need a modern, html5 compatible browser like Google Chrome or Firefox)
http://chr1s.at/feelings/feelingdrop.html 

[edit] I added use of the visibility API so that new feelings are not pulled if the window is not visible

2 comments:

  1. Poor people! But twitter folks tend to stick together with their depression... At least something :-)

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete