Purpose
This quite simple program was built and used during a Processing workshop at ECAL with the third year and first year students. Programming neofites could build an image-scape just by adding textures to the program, displaying them in a 3D space and travel trough with a camera. Some basic camera movement is implemented and also some basic input (mouse and keyboard). The participants could customize the whole program, in particular the controls and the camera movement but also add some extra objects (for example 3d meshes) by extending the main Form class. The workshop was also repeated at ProcessingParis. It works well with beginners as they can focus on image and narrative. expert programmers can take the whole to a next level and build more complex experiences.

Origins
The idea was inspired
by Bruno Munari’s book “Nella Nebbia di Milano”
and by Disneys MultiPlane Camera.
See also the “Plexigram” series by John Cage
and Norman McLarnes C’est l’aviron.

Examples
Five basic example landscapes are included with the sketch;
press keys from 1 to 5 to switch from one to another.
check the keyPressed() method for more mapped keys.

Future
Works only with Processing 1.5 (OpenGL fog functions)
A port to Processing 2.0 is planned
A WebGL port is also planned (maybe)
An interesting “accident” happened with James Paterson’s animations (contained in a Processing example) which we used as a demo sequence for animated textures – see example 4 below. I would like to explore this a bit more.

Feel free to use the concept and code for your own workshops or lectures:
→ github.com/ertdfgcvb/Brouillard

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

The choreography is unfinished (especially at the end), the color-scheme is inaccurate, the mouse interaction is kind of dull, and there is (or was) still work to do but you can enjoy my failure by watching the captured frames on Vimeo if you feel brave enough:

Rules:

1. Extend the SuperCreature class and build your own creature.
2. Allowed colors are white with alpha shades. Not a strict rule.
3. Each creature must implement the “move()” and “draw()” methods. (see the SuperCreature class for details).
4. Transforms should use the pos, rot, sca vectors.
5. Animations can be timed with frames or actual time.
6. The name of the new creature class is built with the authors initals and the creature name (not an optimal naming convention but it works with 10-20 people).
7. The .pde file must have the same name of the class (for example: AGCubus.pde).
8. Insert your name, the creature name and the version in the constructor (to do: annotations?).
9. Break all rules and build something new.

During a workshop in december 2010, students of the 1st and 3rd year at ECAL in Lausanne learned how to create and then extended a generic “SuperCreature” class. A creature manager took care of the creatures (via Java reflection) and added them to The Abyss. 52 different types of creatures populated the deep waters at the end of the five days workshop.

1. Pareidolia
2. Symmetry
3. Expression (not explored)
4. Proportion
5. Mirror
6. Mask (not explored)

In the last two days students were then asked to explore one of the subjects and to develop a personal project around it.

For more images and an overview of the five workshops held visit doc:LAB’s blog.

Read some user reviews.
Video below by CreativeApplications.net