You are here

penmachine dodging buses barcode video & HTML5 Web App

Submitted by Roland on Mon, 2011-04-25 00:54

in response to air's comment, here's a video version (select the HD version if your screen is big enough!) of the penmachine barcode which hopefully is more fun and more self-explanatory:

If you can't play the above YouTube video e.g. perhaps because your platform doesn't support flash, try the original quicktime version of the penmachine dodging buses barcode video

What the video displays

Boring tech stuff:

  1. In the middle, 4616 of derek's photos (75x75 pixel thumbnails of all photos >= 720 pixels high from flickr) are displayed
  2. while at the bottom their 1 pixel wide by 720 pixel high "barcode slice" is displayed.
  3. Finally at the top, a red dot shows where the latest 1 pixel slice is being displayed.

 All three lines wrap-around after 900 pixels.

Cool People in the video:

  • miller family-o-sphere
  • vancouver tech-o-sphere (if you are in Vancouver and you are in tech, you probably are in the video!)
  • gnomedex-o-sphere (chris, ponzi, etc)
  • northernvoice-o-sphere

Their is also a webapp version but due the network not being infinitely fast and zero latency it falls behind and out of sync

Here's the webapp version: http://dl.dropbox.com/u/361757/pm-bc-video/html5-barcode/drawbarcode.html

It's a pity zero latency and infinite bandwidth networks don't exist :-)

In order to create the video, I ran the webapp on my localhost to eliminate bandwith and latency problems!

Colophon:

photos by derek k miller:
http://www.flickr.com/photos/penmachine
music "dodging buses by derek k miller:
http://www.penmachine.com/podcast/2009/06/dodging-buses.html
4616 barcode images of derek's flickr photos generated by:
https://github.com/rtanglao/barcode
html5 web app code to generate the video :
https://github.com/rtanglao/html5-barcode/blob/master/drawbarcode.html

video made using: Snapz Pro X from ambrosia software

Known Bugs:

(tested on Mac OS X Safari,  Chrome 12 and Firefox Aurora and Firefox Mobile on Nexus S)

  1. the white space on the right side of the video
  2. The red dot should skip by 75pixels instead of 1pixel or perhaps we need a separate indicator pointing from the slice to the 75x75 thumbnail
  3. The red dot should be erased when it wraps around

Lessons Learned

I need to work more with cool music from people like Derek. Music + code indeed music + anything is fantastic