DJプレイをProcessingでビジュアライズしてVJごっこ

概要

DJをしている最中に、映像や光なども自分で操りたくなるタイミングが人間誰しもあると思います。
ちょうど最近Processingで遊んでいたので、せっかくならとDJコントローラのMIDI信号をProcessingで処理してVJごっこをしてみたいと思います。

2年前に、Pioneer社製のDDJ-400というDJコントローラーから操作情報を取り出すプログラムは書いていました。
今回はそれをさらにアップグレードしてビジュアライズしていきます。

コード

今回使用した、ビジュアライズ用のメソッド（divideRect()）はこちらの記事から拝借しました。
https://note.com/outburst/n/na98a31f0b2cb

行っていることはシンプルで、サーバーを立てて入力を受け付けるごとにフラクタル図形を描画するだけです。
暫定的に、受け付けた入力の文字列が「action」であれば描画を実行する実装になっています。
ここを後述する入力用のpythonスクリプト側で上手いこと調整して、数字の羅列ではなくいい感じの操作名を受け付けられると良さそうですが、体力が尽きたのでまたの機会にします。

visualize.pde

import processing.net.*;

int port = 50000; // 適当なポート番号を設定
Server server;

void setup() {
  server = new Server(this, port);
  println("server address: " + server.ip()); // IPアドレスを出力
  
  size(700, 700);
  stroke(2);
  noFill();
}

void draw() {
  Client client = server.available();
  if (client !=null) {
    String action = client.readString();
    if (action != null) {
      background(250);
      divideRect(10, 10, width-20, height-20, 8);
    } 
  }
}

//(x座標, y座標, 幅, 高さ, 再帰回数)
void divideRect(float x, float y, float w, float h, int n) { 
  rect(x, y, w, h);

  n--;
  
  if (n>=0) {   
    //幅が高さよりも大きい、または幅と高さが等しい場合
    if (w>=h) {
      //ランダムな値を得る
      float randomW = random(w*0.1, w*0.9);
      //ランダムな値から2つのdivideRectを呼び出す
      divideRect(x, y, randomW, h, n);    //左側の四角形
      divideRect(x+randomW, y, w-randomW, h, n);    //右側の四角形
    }

    //幅が高さよりも小さい場合
    if (w<h) {
      float randomH = random(h*0.1, h*0.9);
      divideRect(x, y, w, randomH, n);    //上側の四角形
      divideRect(x, y+randomH, w, h-randomH, n);    //下側の四角形
    }
  }
}

DJコントローラからMIDI信号を取得してソケットサーバー（Processing側で立てている）にデータを投げるpythonコード。
DJコントローラーの操作情報は下記のように、数字の羅列になっているので一旦「action」という文字列を固定で送るようにしている。

[[[151, 53, 127, 0], 1062196]]
[[[151, 54, 127, 0], 1062364]]
[[[151, 53, 0, 0], 1062396]]
[[[151, 54, 0, 0], 1062446]]
[[[151, 55, 127, 0], 1062667]]
[[[148, 71, 0, 0], 1062797]]
...

observer.py

import socket
from pygame import midi as m

client = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
client.connect(('127.0.0.1', 50000))
m.init()
i = m.Input(1)

try:
  while True:
    if i.poll():
      midi_input = i.read(1)
      print(midi_input)
      client.send("action".encode("utf-8"))
except KeyboardInterrupt:
    print("\nTerminating Observation...")
finally:
    client.close()
    i.close()

結果

DJコントローラーを操作してみた時の挙動はこんな感じです。

操作ごとにフラクタルが描画されていることがわかります。

これによって雰囲気だけでもVJを感じることができましたが、とても素朴な見た目になっているので、
音の波形に合わせて描画内容を変えたりしてみたいです。

また、Processingよりも高速に動作するアプリがあるらしいのでそちらも使ってみたいですね。
最後までお付き合いいただいてありがとうございました。