今回は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デバイスの特定
・次にコードを以下の様に記述。
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は使わないのですが一応追加）
//第２引数にinput,第３引数にoutputのデバイスNoを指定
myBus = new MidiBus(this, 2, 5);
#3.図形の描画とcontrollerChange関数実装
・図形の描画とMidiBusライブラリの関数controllerChangeを実装しましょう。
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とか色々な事が出来そうですね。