Mac OS Screensaver in JavaScript

08 Dec 2009 | By Alex Young | Tags animation canvas

Bean by Ed Spencer is an animated slideshow that uses Canvas to display images in a similar way to a well-known Mac OS slideshow. Here’s a video example:

Bean – OS X screensaver using JavaScript & Canvas from Ed Spencer on Vimeo.

You can download the code and add your own images. The API looks like this:

var bean = new Bean({
  imageUrls: [
    'images/DoubleCluster_cs_fleming.jpg',
    'images/NGC660Hagar0_c900.jpg',
    'images/filaments_iac.jpg',
    'images/m78wide_tvdavis900.jpg',
    'images/sunearthpanel_sts129.jpg',
    'images/NGC253_SSRO_900.jpg',
    'images/Ophcloud_spitzer_c800.jpg'
  ],
  canvasId : 'main',
  fillBody : true
});

bean.onReady(function(bean) {
  setTimeout(function() {bean.start();}, 2000);
});

Read more in Ed’s blog post and view Bean here.


blog comments powered by Disqus