MIDIコントローラーでProcessingをコントロールする


今回はMIDIコントローラーでProcessingの値を操作する方法をメモします。
※MIDIとは音楽に特化した通信プロトコルの事です。もう30年ほど続く世界共通規格です。
知ってる人多いかな。

KORGのpadKONTROLというハードウェアMIDIコントローラーとProcessingのMIDIライブラリ「MidiBus」を使用します。
padKONTROLは古いコントローラーで中古で5,000円ぐらいで買えちゃう。

前回記事にしたVScodeでやっていきます。
ProcessingをVisual Studio Codeで動かしたい

1.MIDIライブラリ「MidiBus」の導入

・ライブラリは公式IDEより行います。
 まずは「ツールを追加」を選択。

Librariesタグより「MidiBus」をインストールしましょう。

2.MIDIデバイスの特定

・次にコードを以下の様に記述。

korgtest.pde
    import themidibus.*;

    // MidiBusインスタンス
    MidiBus myBus;

    void setup() {
        size(300, 300);
        background(255);
        //MIDIデバイスのリストを表示
        MidiBus.list();
        myBus = new MidiBus(this, 0, 0);
    }

    void draw(){
    }

これで一度実行します。(Ctrl+Shift+Bでビルドタスクを実行【前の記事参考】
するとPCに接続されたMIDIデバイスの一覧がコンソール上に表示されます。
INPUT、OUTPUTからそれぞれ使用するコントローラーのデバイスNoを見つけます。

今回のpadKONTROLは2がinputとなるので以下の様に編集します。(今回outputは使わないのですが一応追加)

korgtest.pde
   //第2引数にinput,第3引数にoutputのデバイスNoを指定
   myBus = new MidiBus(this, 2, 5);    

3.図形の描画とcontrollerChange関数実装

・図形の描画とMidiBusライブラリの関数controllerChangeを実装しましょう。

korgtest.pde
import themidibus.*;

MidiBus myBus;    // MidiBusインスタンス

void setup() {
    size(300, 300);    //ウインドウのサイズ
    background(255);   //ウインドウ背景の色

    MidiBus.list();                     //MIDIデバイスのリストを表示
    myBus = new MidiBus(this, 2, 5);    //MIDIデバイスのinput,outputを指定
}

float x = 150;    //図形の基準位置x
float y = 150;    //図形の基準位置y
int r = 180;      //図形の半径

void draw(){       
    background(255);        //背景塗りつぶし(図形を削除する目的)
    stroke(0, 0, 0);        //図形の描画線に色を付ける
    ellipse(x, y, r, r);    //円の描画(x座標, y座標, 幅, 高さ)
}

void controllerChange(int channel, int number, int value){

    if(number == 20){      
      x = map(value,0,127,0,width);
    }else{
      y = map(value,0,127,0,width);
    }

    //動かしたコントロールの値を表示
    println("channel:" + channel + " number:" + number +" value:"+ value);
}
解説

1.controllerChange関数はコントロールの値が変更された時に働きます。(字のまんま)
2.動かしているツマミの値を知る為にprintlnで表示してコントロールの情報を調べましょう。(今回の例では20と21を使います)
3.コードは「動かされたコントロールのNumber値により図形の描画位置を変更する」事を行っています。
4.map関数は【valueの範囲「0~127」を「0~width(ウインドウ幅いっぱい)」に変換】しています。

割り当てられたpadKontrolのコントロール値(number)

4.Processingを実行する

ではProcessingを実行してMIDIコントロールを操作してみましょう。
↓実際に動かしているgif動画です。


なかなか簡単にMIDIを扱えましたね。
元々はminimライブラリで音楽とProcessingを同期させる事を楽しんでいたのですが、
「自分でもリアルタイムに動かしたいな」という事でMidiBusライブラリの存在に気付いた次第です。

やってる事ってコントローラーの値を図形の要素(今回は図形の位置)に割り当ててるだけですが、
応用してVJとか色々な事が出来そうですね。