Processing2.0で射影変換しながら壁に映像を投影する

Processing2.0で射影変換しながら壁に映像を投影する方法メモ。



Processing2.0で射影変換しながら映像を投影する


Processingで手抜きプロジェクションマッピング」のコードを99%そのまま使ったんですが、Processing2.0だとちょっとだけ手直しする必要があります。


動画の映像をコールバックする部分です。そこだけ修正してProcessing2.0で動くようにしたコードを公開します。


動作した状態の映像は下記の通りです。マウスで四隅をドラッグすることで射影変換を行なっています。




import processing.video.*;
import processing.opengl.*;

Movie mov;            // 動画
int   selected = -1;  // 選択されている頂点
int   pos[][] = {{0,0},{400,0},{400,300},{0,300}}; // 頂点座標

void setup() {
  size( 1024, 768, P2D);              // 画面サイズ(適宜調整)
  mov = new Movie(this,"movie.mov");  // 動画ファイルの読み込み
  mov.loop();                         // 動画ループ再生
}

// このメソッドを追加しました
void movieEvent(Movie m) {
  m.read();
}

void draw() {
  background(0);

  // ビデオテクスチャの描画
  beginShape();
    texture(mov);  
    vertex(pos[0][0], pos[0][1], 0, 0);
    vertex(pos[1][0], pos[1][1], mov.width, 0);
    vertex(pos[2][0], pos[2][1], mov.width, mov.height);
    vertex(pos[3][0], pos[3][1], 0, mov.height);
  endShape(CLOSE);

  // マウスによる頂点操作
  if ( mousePressed && selected >= 0 ) {
    pos[selected][0] = mouseX;
    pos[selected][1] = mouseY;
  }
  else {
    float min_d = 20; // この値が頂点への吸着の度合いを決める
    selected = -1;
    for (int i=0; i<4; i++) {
      float d = dist( mouseX, mouseY, pos[i][0], pos[i][1] );
      if ( d < min_d ) {
        min_d = d;
        selected = i;
      }      
    }
  }
  if ( selected >= 0 ) {
    ellipse( mouseX, mouseY, 20, 20 );
  }
}


参考リンク


Processingで手抜きプロジェクションマッピング

便利なコードを公開してくださりありがとうございます!


著者プロフィール
Webサイトをいくつか作っています。
著者プロフィール