Vezér + Processing でキーフレーム

概要

• Processing は便利だが，キーフレーム・音同期のハードルが高い
• キーフレームだけ別のソフトから送ってあげればよいのでは?
• Vezér を使って Processing にキーフレームだけ送る

処理全体の流れ

---

1. Vezer 側の準備

ダウンロードと初期設定

• Vezér の体験版をダウンロードします．
• 起動したら New Project をクリックします．
• メニュー > Vezér > Preferences > OSC
• OSC Outputs の Port を 8000 に設定します*1．

送り先のポート番号を確認

トラックを作る（レイヤーのようなもの）

• 画面下・中ほどの [+] ボタン（図の赤丸）から，新しいトラックを作成します．OSC Value を選びましょう．
• OSCアドレス（図の赤枠）に /video/key1 と入力します*2．

キーフレームを打つ

• トラックの適当な場所をダブルクリックすると，キーフレームを打つことができます．
• キーボードでスペースバーを押すと，カーソルが動いて再生されていることがわかります．

---

2. Processing 側の準備

ダウンロードと初期設定

• Processing 3 をダウンロードします．
• 起動して，OSCP5 をインストールします．
  • メニュー > Sketch > Import Library > Add Library…
  • 検索窓に oscp5 と入力して，出てきたライブラリをインストール（右下のボタン）

左上の検索窓からライブラリを検索する

Processing のコード

/* OSCP5を使うための準備 */
import oscP5.*;
OscP5 oscP5;

/* 受信したキーフレームを入れておく変数 */
float oscKey1 = 0.0f;

void settings() {
  size (200, 200);
}

void setup() {
  oscP5 = new OscP5(this, 8000);
  rectMode(CENTER);
}

void draw() {
  background(0);
  // フレームごとに，受信した値の大きさで四角形を描く
  rect(width/2, height/2, width*oscKey1, height*oscKey1);
}

/* キーフレームを受信したときの処理 */
void oscEvent(OscMessage message) {
  if (message.checkAddrPattern("/video/key1")) {
    // 先の変数に受信した値を書き込む
    oscKey1 = message.get(0).floatValue();
  }
}

---

3. 実行してみる

• Processing の再生ボタンを押します．
• Vezér の再生ボタンを押します．
• うまくいけば，添付画像のように，四角形が打ったキーフレームにしたがって伸縮するはずです．

*1:実際には，何でもかまいません．ただし， Vezer と Processing で同じ番号を使う必要があります

*2:これも任意に決めて構いません．ただし， Vezer と Processing で同じ文字列にする必要があります