Processingを触ってみる ①

時間が無くて個人開発に手を付けられていませんが、
以前VJをやってくれと言われてProcessingでVJプログラムを組んだことがあったので、 今回はそれについて書いていこうとおもいます。

VJとは

Video Jockeyの略で、音楽に合わせて映像を流す（人の）ことです。
エレクトロ系のバンドで使われることが多いような気がします。
↓のdownyなんかはメンバーとしてVJが所属しています。

youtu.be

今回はD.A.N.というバンドのコピーに合わせることになったので
↓こんな感じ映像を作ることを目標に…

youtu.be

Processingとは

デジタルアートとビジュアルデザイン向けのオープンソースプロジェクトで、
Javaベースで作られているため、取っつきやすいかな～と思って採用しました。
どちらかというとC++ベースのopenFrameworksなんかがメジャーだと思います。

描いてみる

円を描いてみます。

void setup() {
  //描画領域サイズ
  size(400, 400);
  //背景色
  background(255);
}

void draw() {
  //線の色
  stroke(0, 0, 200);
  //描画する円（x軸始点, y軸始点, 幅, 高さ）
  ellipse(width/2, height/2, 250, 250);
}

setup()で描画する領域を設定し、draw()で描画します。
実行するとこんな感じ。

動かしてみる

円だけ描いても仕方ないので動かします。

void setup() {
  //描画領域サイズ
  size(400, 400);
  //背景色
  background(255);
}

float x = 10;

void draw() {
  //画面全体に白い四角を描画
  fill(255);
  noStroke();
  rect(0, 0, 400, 400);
  //円を描画
  noFill();
  stroke(0, 0, 200);
  //描画する円（x軸始点, y軸始点, 幅, 高さ）
  ellipse(x, height/2, 250, 250);
  //x始点をずらす
  x = x + 1;
}

円が右に動くだけのプログラムなのでこんな感じです。

こんな感じでアニメーションを付けて、影を付けて…ってやっていくと段々とそれっぽくなっていきます。

音に反応させる

せっかくバンド演奏と一緒に流す映像なので、
音に反応して動くようにしたい、ということでMinimというライブラリを導入します。
Minimの導入とオーディオインプットについてはこちらを大いに参考にさせていただきました
yoppa.org

とりあえず、オーディオ入力を波形にして描画してみます。

import ddf.minim.*;

Minim minim;
AudioInput in;

void setup() {
  size(800, 600);
  background(0);
  //minimインスタンスを生成
  Minim minim = new Minim(this);
  in = minim.getLineIn(Minim.STEREO, 512);
}
void draw(){
  background(0);
  stroke(255);
  
  //波形を描画
  for(int i = 0; i < in.bufferSize() - 1; i++){
    float x1 = map( i, 0, in.bufferSize(), 0, width );
    float x2 = map( i+1, 0, in.bufferSize(), 0, width );
    line( x1, height/2 + in.mix.get(i)*50, x2, height/2 + in.mix.get(i+1)*50 );
  }
}

こんな感じになります

さすがにこれだけだとつまらないので、冒頭で紹介したD.A.N.の映像に近づくように
音に合わせて大きさが変わる円なんかも描いていきます。
後はオーディオ入力のゲインを変えて変化量をリアルタイムに変えたり…
というところはまた次回…