How to achieve constant dissolve between photographs? (example)

prismspecs

I'm creating something similar to http://selfiecity.net/ which cycles through a bunch of images, sort of blending them together. The blending on Selfie City is amazing, and I can't seem to replicate it. I think it might have to do with switching the blending mode to additive, but I'm curious if anyone has some helpful ideas.

_vk

It looks like regular dissolve to me. Not additive. The thing is that they try to keep the eyes registered between shots, at least levelled... Like every pic goes in and out in about 1 or 2 secs...

prismspecs

I tried a few regular dissolves, maybe I'm not conceptualizing it right. Is there a need to render more than one image at a time to the canvas, or can I just do one and rely on gradual fade of a semi-transparent black rectangle?

prismspecs

Thanks to _vk I made another version that works. New problem: it's very laggy! My computer is 4 years old now, but maybe there is a simple optimization someone could point out?

import java.io.File;

PImage currImg;

PGraphics canvas;
int index = 0;  // which image?

// array to store image paths
ArrayList<String> imgPath;
// array of photo objects
ArrayList<Photo> photo;

void setup() {
  size(1920/2, 1080/2, OPENGL);
  canvas = createGraphics(1920, 1080, OPENGL);

  // set up canvas
  canvas.beginDraw();
  canvas.smooth();
  canvas.noStroke();
  canvas.background(0);
  canvas.endDraw();

  // arraylist of strings to hold image paths
  imgPath = new ArrayList<String>();

  // arraylist of photo objects
  photo = new ArrayList<Photo>();

  // load in image files
  File dir = new File(dataPath(""));

  File[] files = dir.listFiles();

  for ( int i=0; i < files.length; i++ ) { 
    String path = files[i].getAbsolutePath();

    // check the file type and work with jpg/png files
    if ( path.toLowerCase().endsWith(".png") || path.toLowerCase().endsWith(".png") ) {
      // populate image array
      imgPath.add(new String(path));
    }
  }

  // get an image in there first
  photo.add(new Photo());
}


void draw() {

  canvas.beginDraw();
  canvas.background(0);

  // iterate thru photo array backwards
  for (int i = photo.size ()-1; i >= 0; i--) {
    Photo p = photo.get(i);
    if (p.opacity < 0) {
      photo.remove(i);
    } else {
      p.update();
    }
  }

  canvas.endDraw();

  //scale(.5);
  image(canvas, 0, 0, width, height);
}

void keyPressed() {
  photo.add(new Photo());
}


class Photo {

  float opacity = 0;
  float acc = 7;        // acceleration (direction and amount) of opacity change
  boolean apex = false;

  PImage img;

  Photo() {
    // load in a random image
    String s = imgPath.get(int(random(imgPath.size())));
    img = loadImage(s);
  }

  void update() {
    // change opacity
    opacity += acc;
    // have we hit the apex of opacity?
    if (!apex && opacity >= 255) {
      apex = true;
      acc = acc * -1;    // reverse direction
    }

    // show image
    canvas.tint(255, opacity);
    canvas.image(img, 0, 0);
  }
}

GoToLoop

Have you already tried to use the default's renderer JAVA2D?
It'd be nice if your app would open a folder select window as the example in this thread does:

http://forum.processing.org/two/discussion/6004/how-to-make-a-movie-array