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

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

KORGのpadKONTROLというハードウェアMIDIコントローラーとProcessingのMIDIライブラリ「MidiBus」を使用します。
padKONTROLは古いコントローラーで中古で5,000円ぐらいで買えちゃう。
![51lgKWeZUYL._SX46_.jpg](https://qiita-image-store.s3.amazonaws.com/0/171957/e726b6f5-d9a5-c7e2-13bf-b26ae597b96f.jpeg)

前回記事にしたVScodeでやっていきます。
[ProcessingをVisual Studio Codeで動かしたい](https://qiita.com/jacynthe/items/d31eaa77496295c10556)


#1.MIDIライブラリ「MidiBus」の導入
・ライブラリは公式IDEより行います。
　まずは「ツールを追加」を選択。
![01.png](https://qiita-image-store.s3.amazonaws.com/0/171957/90c44eea-6fcb-5f0f-6f66-1a57de0a0433.png)

Librariesタグより「MidiBus」をインストールしましょう。
![02.png](https://qiita-image-store.s3.amazonaws.com/0/171957/960290cd-a605-0ddd-a019-72c5892e7338.png)


#2.MIDIデバイスの特定
・次にコードを以下の様に記述。

```java: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でビルドタスクを実行【[前の記事参考】](https://qiita.com/jacynthe/items/d31eaa77496295c10556)）
するとPCに接続されたMIDIデバイスの一覧がコンソール上に表示されます。
INPUT、OUTPUTからそれぞれ使用するコントローラーのデバイスNoを見つけます。
![03.png](https://qiita-image-store.s3.amazonaws.com/0/171957/7f8a1e70-0014-bd06-4a6a-19de96a0b8da.png)

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

```java:korgtest.pde
   //第２引数にinput,第３引数にoutputのデバイスNoを指定
   myBus = new MidiBus(this, 2, 5);    
```
#3.図形の描画とcontrollerChange関数実装
・図形の描画とMidiBusライブラリの関数controllerChangeを実装しましょう。

```java: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）
![51lgKWeZUYL._SX466_.jpg](https://qiita-image-store.s3.amazonaws.com/0/171957/4d6723af-e2b4-00e9-7b30-6c473bf4b5f9.jpeg)

#4.Processingを実行する
ではProcessingを実行してMIDIコントロールを操作してみましょう。
↓実際に動かしているgif動画です。
![test.gif](https://qiita-image-store.s3.amazonaws.com/0/171957/6e1aec75-53c7-bdd1-997a-527a781ecc9c.gif)


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

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