Video Delay : Ed Tannenbaum, Recollections

Adrien

Hi,

I try to create something like this : https://www.youtube.com/watch?v=YBKkVpRxUfs, using a kinect. At the moment I made some test with something like this :

class User {
  PGraphics pgBodyBg; 
  PImage bodyImg; 
  float colorIndexCounter; 
  int id; 
  ArrayList<DelayImg> bodyImageList = new ArrayList<DelayImg>();
  PGraphics pgTotal; 
  DelayImg[] buffer;

  User(int i) {
    colorIndexCounter=random(10); 
    pgTotal=createGraphics(512, 424);  
    pgTotal.beginDraw(); 
    pgTotal.background(0, 0); 
    pgTotal.endDraw(); 
    buffer=new DelayImg[50];
  }


  void delayEffect() {
    fillBuffer(); 
    changeColor(); 
    display();
  }

  void fillBuffer() {
    PImage bi= bodyImg.copy(); 
    DelayImg di=new DelayImg(bi); 
    for (int i = buffer.length-1; i > 0; i--) {
      buffer[i] = buffer[i-1];
    }
    buffer[0]=di;
  }



  void changeColor() {
    pgTotal.beginDraw(); 
    pgTotal.clear(); 
    pgTotal.pushStyle(); 
    for (int j=buffer.length-1; j>=0; j--) { 
      if (buffer[j]!=null) buffer[j].changeColor(pgTotal);
    }
    pgTotal.popStyle();
    pgTotal.endDraw();
  }

  void display() {
    image(pgTotal, 0, 0);
  }
}



class DelayImg {
  PImage img; 
  float alf=255; 
  PShape shape; 
  PGraphics pgBg; 
  int partSize=200; 
  DelayImg(PImage _img) {
    img=_img; 
    img.filter(THRESHOLD); 
    pgBg=createGraphics(512, 424);
  }

  void display(PGraphics pg) {
    pg.tint(255, alf); 
    pg.image(img, 0, 0); 
    if (alf>0)alf-=0.5;
    else alf=0;
  }

  void changeColor(PGraphics pg) {
    pgBg.beginDraw(); 
    pgBg.background(random(255), random(255), random(255));  
     pgBg.mask(img);
    pgBg.endDraw();
    pg.image(pgBg, 0, 0);
  }
}

bodyImg is update each frame, coming from kinect.

I want to be able to change the color everytime, that why pgTotal is clear every frame and display fresh new images, but the way I do it is very slow (10 fps). Do you have any suggestion, different kind of algorithm to improve frameRate? I try to use some vertex and textures aswell, but no real improvement...

Thanks for your help!

A.

jeremydouglass

First -- there is a new forum, I suggest re-posting this there:

https://discourse.processing.org/

Second -- I would suggest a very different approach. Instead of accumulating a big stack of DelayImg (in your example, 50), just have a single image. Each frame, draw a silhouette on it in grayscale, and let the results accumulate.

The minimum gray value, maximum gray value, and increment (how much the gray value steps up each frame) or time scale (how often it should loop) will be configurable.

When you walk across the screen, your single source image in memory will look something like this:

Now the way to create color effects is through a mapping algorithm that pseudo-colors the grayscale values and produces your visual output. The cycling, chasing, blackouts gaps etc. can all be done on top of that simple grayscale buffer as mapping operations. Each frame, copy the buffer, then march through the pixels array and replace each pixel value according to your color map. If you are cycling, at the end rotate the map array values by one position (e.g. move lowest to highest, or highest to lowest).

That should give you incredible performance compared to the approach above.

You should either reserve true black as transparent in a grayscale / RGB buffer or make your buffer type RGBA and initialize it as transparent.

Adrien

Whoo, that's a very funny synchronisation : I just found this approch 30 min ago! Still have to work on it, but it's definitly better ;-) And yeah, I posted my question in the new forum aswell... But thanks very much to take time to help me jeremydouglass ! A.