ProcessingとKinectを使って縦線２本で立体感が出るGIFアニメを作ろう

最近巷で「GIFアニメに縦線を２本入れると立体感が出る」と話題ですね。「元画像との比較ないの？」とか「縦線入れる"だけ"じゃないだろ」みたいなツッコミが散見されるので、Kinectを使って自分で縦線GIFアニメを作れるコードを書きました。科学的な検証にも興味がありますし。

　
こういうのが作れます。

作り方

Kinectで取得した奥行き情報（デプスマップ）を元に、各ピクセルが縦線の手前か奥かを判断して、縦線を描画します。縦線の空間的な配置は、シーンに応じて適当に決めます（例えば、カメラから１ｍのところ）。以前、ARにおいてCGに対して人がかぶった時の遮蔽を表現する方法を紹介しましたが、あれと同原理です。

使用するライブラリ

インストール方法やAPIの使い方はリンク先を参照してください。

simple-openni （ProcessingでKinectやXtionを使うためのライブラリ）
GifAnimation （ProcessingでGIFアニメを作るためのライブラリ）

Processingのコード

PCにKinectをつないで実行してください。プログラム起動後、すぐに動画キャプチャが始まります。プログラムを終了したタイミングで、ローカルにGIFファイルが保存されます。比較用に、縦線なしのオリジナル画像（original.gif）と縦線ありの画像（withLines.gif）の２つが出力されます。

import SimpleOpenNI.*;
import gifAnimation.*;

SimpleOpenNI kinect;
int[] depthMap;

GifMaker gifExp1;
GifMaker gifExp2;

void setup() {  
  size(320, 240);
  kinect = new SimpleOpenNI(this);
  kinect.enableRGB();
  kinect.enableDepth();
  kinect.alternativeViewPointDepthToImage();

  gifExp1 = new GifMaker(this, "original.gif");
  gifExp1.setQuality(20);  
  gifExp1.setRepeat(0);

  gifExp2 = new GifMaker(this, "withLines.gif");
  gifExp2.setQuality(20);  
  gifExp2.setRepeat(0);
} 

void draw () {
  kinect.update();
  image(kinect.rgbImage(), 0, 0, width, height);
  gifExp1.addFrame();
  
  depthMap = kinect.depthMap();
  float depth = 1000;  // 1000 mm from Kinect
  int lineWidth = 10;
  int x1 = width/4 - lineWidth/2;
  int x2 = width*3/4 - lineWidth/2;

  loadPixels();
    drawLine( x1, lineWidth, depth );
    drawLine( x2, lineWidth, depth );
  updatePixels();

  gifExp2.addFrame();
}

void exit() {
  gifExp1.finish();
  gifExp2.finish();
  super.exit();
}

void drawLine(int pos, int lineWidth, float depth) {
  for (int y=0; y<height; y++){
    for (int x=pos; x<pos+lineWidth; x++){
      int px = x * kinect.depthWidth()/width;
      int py = y * kinect.depthHeight()/height;
      int d = depthMap[ px + py*kinect.depthWidth() ];
      if ( d>depth || d==0 ) {
        pixels[x+y*width] = color(255, 255, 255);
      }
    }
  }
}