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
→ Stopmotion Experiments 360

→ Download from github
→ View on github

import java.nio.FloatBuffer;
import javax.media.opengl.GL;
import processing.opengl.*;

public void setup() {
  size(1280, 720, OPENGL);
  hint(DISABLE_DEPTH_SORT);
  hint(DISABLE_OPENGL_ERROR_REPORT);
  hint(ENABLE_OPENGL_4X_SMOOTH);
  frameRate(100);
  fog(100, 1200, 0.25f, color(0)); //just put the fog in the setup
}

public void draw() {
  background(0); //same color of the fog
  lights();
  translate(width/2, height/2, -500);
  rotateX(frameCount*0.011f);
  rotateY(frameCount*0.012f);
  rotateZ(frameCount*0.013f);
  noStroke();
  fill(255);
  box(300,500,700);
}

void fog(float near, float far, float density, int col) {
  float[] fogColor = new float[4];
  fogColor[0] = (col >> 16 & 0xFF) / 255.0f; //R
  fogColor[1] = (col >> 8 & 0xFF) / 255.0f;  //G
  fogColor[2] = (col & 0xFF) / 255.0f;       //B
  fogColor[3] = 1.0f;                        //A

  PGraphicsOpenGL pgl = (PGraphicsOpenGL) g;
  GL gl = pgl.beginGL();
  gl.glEnable(GL.GL_FOG);
  // gl.glFogi (GL.GL_FOG_MODE, GL.GL_EXP); // exp2 FOG
  gl.glFogi(GL.GL_FOG_MODE, GL.GL_LINEAR);  // Linear FOG
  gl.glFogf(GL.GL_FOG_START, near);
  gl.glFogf(GL.GL_FOG_END, far);

  gl.glFogfv(GL.GL_FOG_COLOR, FloatBuffer.wrap(fogColor));
  gl.glFogf(GL.GL_FOG_DENSITY, density);
  gl.glHint(GL.GL_FOG_HINT, GL.GL_NICEST);
  pgl.endGL();
}

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 by CreativeApplications.net