Puddle Builder 09

The tool used to create the image for the April edition of the Puddle flyer.
Built with Processing and initially inspired by an engraving of Albers.
Designed with Sidi Vanetti.

Sequencer

A tiny JavaScript library to display fullscreen image sequences in the browser.
To keep the library light and simple there are actually 5 different versions
of it plus a benchmark test. They were built to test speed and will eventually
be dropped in future versions in favor of a single one.
The library consists of five files:

1. sequencer.bg.js
   Displays the images as the body background. The images are stretched with
   the CSS “auto”, “cover” and “contain” modes.
   I didn’t find a way to pass an image object to the CSS background so this
   version relies heavily on the browser’s cache.
   → Launch in a new window
2. sequencer.div.js
   Displays the images as a stack of divs hiding and showing the corresponding
   layer. This version relies a bit on the browser cache, but once loaded
   the images are stored as a div background.
   → Launch in a new window
3. sequencer.canvas.js
   Displays the images on a canvas object the size of the browser window.
   The images are preloaded and then stretched and cropped on the canvas.
   → Launch in a new window
4. sequencer.canvas2.js
   Displays the images on a canvas object the size of the first loaded image.
   The canvas is then stretched and positioned correctly via css.
   → Launch in a new window
5. sequencer.canvas.async.js
   Loads the sequence asynchronously.
   It’s a messy work in progress right now, but loading times are 4-5 times faster.
   This will eventually become the final version.
   → Launch in a new window
6. sequencer.benchmark.js
   Image sequencer benchmark.
   Not sure if this is reliable: it looks as though some browsers skip frames
   to keep up with the interval event.

Best results so far on OS X are on Safari with the canvas version.
Firefox is very fast (99.8 fps!) with canvas on small windows sizes (smaller than 1000px wide); becomes very slow with bigger windows. It’s also slow with the background & div versions; slow DOM-manipulation I guess.
Chrome and Opera are surprisingly slow with both the canvas versions.

Some examples using Sequencer:
→ Stopmotion Experiments 1
→ Stopmotion Experiments 2

→ Download from github
→ View on github