lunar0 log

(転載禁止/許可したものはそれとわかるように書きます)

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

概要

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

f:id:lunar0:20170919015941p:plain
処理全体の流れ


1. Vezer 側の準備

ダウンロードと初期設定

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

f:id:lunar0:20170919022130p:plain
送り先のポート番号を確認

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

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

f:id:lunar0:20170919024630p:plain

キーフレームを打つ

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

f:id:lunar0:20170919024844p:plain


2. Processing 側の準備

ダウンロードと初期設定

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

f:id:lunar0:20170919023038p:plain
左上の検索窓からライブラリを検索する

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 の再生ボタンを押します.
  • うまくいけば,添付画像のように,四角形が打ったキーフレームにしたがって伸縮するはずです.

f:id:lunar0:20170919025122p:plain

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

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