VJをprocessingでインタラクティブにしてみた

はじめに

この記事はOthloTech Advent Calendar 2016の13日目の記事になります。

今回はインタラクティブなVJをするためにprocessingとsyphonを用いてみようというお話をしたいと思います

VJとは

VJ(video jockey/visual jockey)とはクラブなどでDJの音に合わせて映像をリアルタイムに入れ替えて演出を行うことやその表現者のことです。
VDMX5などのソフトウェアを用いて映像を入れ替えてVJをするのもいいけど最近は体験型が流行りだよね、楽しいし。ってことでVDMXにprocessingでインタラクティブな映像作ってsyphonでその映像を送りましょう。

適当にコードを書く

インタラクティブに動くprocessingでコードを書いてみましょう。
とりあえず音とかに反応して色が変わるものをyoppaさんの記事を参考に書いてみました。

import ddf.minim.*;
import ddf.minim.analysis.*;

Minim minim;

AudioInput in;
FFT fft;


void settings() {
  size(980, 540, P3D);
  PJOGL.profile=1;
}
  
void setup(){
  minim = new Minim(this);
  in = minim.getLineIn(Minim.STEREO, 512);
  fft = new FFT(in.bufferSize(), in.sampleRate());
  fft.window(FFT.HAMMING);
  colorMode(HSB, 255);
}

void draw(){
  background(0);
  strokeWeight(2);
  fft.forward(in.mix);
  for(int i=0;i < fft.specSize();i++){
    float x = map(i, 0, fft.specSize(), 0, width);
    float col = map(i, 0, fft.specSize(), 0, 255);
    stroke(col, 255, 255);
    line(x, height, x, height-fft.getBand(i)*8-20);
  }
}

ちゃんと動いたら次にsyphonで映像を送ります。
syphonを使うにはsyphonのインストールとprocessing上でライブラリのsyphonをインストールしてください。
そして以下のようにコメントを書いたところにコードを追加する。

import codeanticode.syphon.*; // syphonを使うためのライブラリ

import ddf.minim.*;
import ddf.minim.analysis.*;

Minim minim;

AudioInput in;
FFT fft;
SyphonServer server; // syphonサーバーを立ち上げる

void settings() {
  size(980, 540, P3D);
  PJOGL.profile=1;
}
  
void setup(){
  
  minim = new Minim(this);
  server = new SyphonServer(this, "OthloTech");
  in = minim.getLineIn(Minim.STEREO, 512);
  fft = new FFT(in.bufferSize(), in.sampleRate());
  
  fft.window(FFT.HAMMING);
  colorMode(HSB, 255);
}

void draw(){
  background(0);
  strokeWeight(2);
  fft.forward(in.mix);
  for(int i=0;i < fft.specSize();i++){
    float x = map(i, 0, fft.specSize(), 0, width);
    float col = map(i, 0, fft.specSize(), 0, 255);
    stroke(col, 255, 255);
    line(x, height, x, height-fft.getBand(i)*8-20);
  }
  server.sendScreen(); // syphonサーバーに映像を送る
}

これでsyphonを用いて映像をVDMX5上に送ることができるようになりました。VDMX5で確認してみましょう。
VDMX5からuse_source > syphon > プロジェクト名　を選択して先ほどの映像がVDMX上で出力されるか試してみましょう。

無事出力されたら成功です！
これでVDMX上でインタラクティブな映像を使ってVJできるようになりました！！
プログラミングさえできればVJで声援や、スマホで投票して・・・みたいなインタラクティブなのも可能です。

実際にVJしてみる

実際に動かしているところを見てVJできるところを見せたほうがいいかと思ったのですが・・・
準備中です。ごめんなさい。。。

最後に

VJとか正直ニッチな上、求められているTech系かっていわれると微妙ですけどこんな記事を書かせていただきました。
ぜひVJみんなで始めましょう！！

(追記)めちゃくちゃレイアウト崩れたのを一瞬公開してしまいました。すみません。またギリギリの投稿すみません。

参考リンク

http://yoppa.org/geidai_music14/6109.html
http://mirror.boy.jp/?p=784