いろいろ

エンジニアっぽい事と音楽っぽい事を主に書く予定です。

MIDIキーボードとProcessing

概要

MIDIキーボードの入力に合わせて図形を描画するおもちゃ?を作ってみました。

youtu.be

※ 2020.7.4 ソースコード微修正。

※結構なCPUリソースを使う贅沢なシステムになってしまった。ProcessingとDAWを同時に立ち上げているので当然といえば当然か。MacBookのFANが唸りを上げているし、筐体も熱々。もし万が一試される方がいらっしゃったら自己責任でお願いします。 改善の余地はいろいろありそうですが、今回はいったんこれで。。。

※最初はWindowsのデスクトップPCでやろうと思ったのですが、ProcessingからDAWへのMIDI信号の送り方がわからず早々に断念しました。

環境

動機

「0歳の娘と自治体の乳幼児施設に行ったらピアノ絵本で楽しそうに遊んで(叩いて?)いた」という話を妻から聞く

やっぱり視覚と聴覚と触覚と複数の感覚に訴えるものが良いみたいだな

そういえば以前Generative Art / Processingの本読んだことがあったけど、なんか作れないだろうか

www.bnn.co.jp

そういえば「ごぶごぶ ごぼごぼ」という、丸い形がたくさん出てくる絵本にとても興味を示していたなあ

www.fukuinkan.co.jp

!!!


作り方

1.Processingをインストールする。

公式サイトからダウンロードしてインストールする。

https://processing.org/


2. MidiBusを導入する。

processingを起動する。

"ツール" > "ツールを追加" > "Libraries"

"MidiBus"で検索 > Install


3.コーディング

本書中の図版のほとんどは、とりあげているトピックと関連した私のジェネラティブな作品 の図ですが、それ以外のものは、息抜きとしてランダムに添えられています。これらのイメー ジのソースコードの多くは、http://abandonedart.orgと出版社のWebサイトhttp://www.manning.com/GenerativeArt からダウンロードできます。これらもまたクリエイティブ・コモ ンズ・ライセンスのもとに公開されているので、あなたがこれら作品を利用し、分析し、変更し、 ごちゃまぜにしたり、壊したりすることも大歓迎です。

-[普及版]ジェネラティブ・アートProcessingによる実践ガイド:「本書について」より

http://abandonedart.orgはリンク切れのようです。(2020.6現在)


再利用可との事なので6章の例題のコードを改変して作りました。ありがたや~


MidiBusの部分についてはこちらを参考にさせていただきました。

ProcessingでMIDIコントローラーを使う | Music Theory Workshop Japan


という事で書いたのがこちら↓

import themidibus.*;

MidiBus myBus;

int _num =3;
ArrayList<Circle> _circleArr = new ArrayList<Circle>();

void setup(){
  size(1440, 800);
  frameRate(30);
  background(255);
  smooth();
  MidiBus.list();
  myBus = new MidiBus(this,"Keystation Mini 32","PROCESSING_TO_DAW");
}

void draw(){
  background(255);
  int circArrSize = _circleArr.size();
  for(int i = 0; i< circArrSize; i++){
    Circle thisCirc = _circleArr.get(i);
    if(!thisCirc.updateMe()){
      _circleArr.remove(i);
      i--;
      circArrSize--;
    }
  }
}

void drawCircles(int pitch, int velocity){
  for(int i=0;i< _num; i++){
    Circle thisCirc = new Circle(pitch, velocity);
    thisCirc.drawMe();
    _circleArr.add(thisCirc);
    //println(_circleArr.size());
  }
}

void noteOn(int channel, int pitch, int velocity) {
  // Receive a noteOn
  //println();
  //println("Note On:");
  //println("--------");
  //println("Channel:"+channel);
  //println("Pitch:"+pitch);
  //println("Velocity:"+velocity);

  int pitchOneOct = pitch % 12;

  drawCircles(pitchOneOct, velocity);
}

//=============================== objects

class Circle {
  float x, y;
  float radius;
  color linecol, fillcol;
  float alph;
  float xmove, ymove;
  int r,g,b;

  Circle(int pitch, int velocity){
    x = (width-50)/11 * pitch + 25;
    y = height;
    radius = random(100) + 10;
    r = pitch * 255 / 12;
    g = (12 - pitch) * 255 / 12;
    b = ((pitch * 255)/12 + 128) % 255;
    fillcol = color(r,g,b);
    alph = (velocity-1)*2;
    xmove = random(2) - 1;
    ymove = -random(10);
  }

  void drawMe(){
    noStroke();
    fill(fillcol,alph);
    ellipse(x, y, radius*2, radius*2);
  }

  boolean updateMe(){
    x += xmove;
    y += ymove;
    if(x > (width+radius)){x=0-radius;}
    if(x < (0-radius)){x = width + radius;}
    if(y < (0-radius)){return false;}
    if(y > (height+radius)){return false;}

    drawMe();
    return true;
  }
}
setup

MidiBusのインスタンス生成時にMIDIINとOUTを指定します。 直前の関数のMidiBus.list();でコンソールに使用可能なmidiバイスが表示されるので、 一度実行して表示された中から選択するようにします。

私の環境の場合は以下のように設定しました。 MIDI IN: "Keystation Mini 32" →使用するmidiキーボード MIDI OUT: "PROCESSING_TO_DAW" →macmidi設定が必要なので事項で説明します。

noteOn

MIDIキーボードからNoteOnでnoteOn関数が実行されます。 pitch(音程)とvelocity(強さ)を drawCircles関数に渡して描画してもらいます。 pitchは12で割って、どのオクターブでも共通にします。

drawCircles

1回のnoteOnに対して_numの数だけ丸を生成します。 pitchによって丸の発生場所と色が変わり、velocityによって丸の透過度が変化するようにしました。

この辺はいろいろ自由にできそうですね。


4. ソフトシンセの準備

今回Processingからは音は出しません。それなりに良い音を出したかったので、手っ取り早くDAWのソフトウェアシンセを使うことにしました。

まず、processingからのMIDI OUT をDAWに入力するようにします。 こちらが参考になりました。 Sending MIDI information to my DAW - Electronics (Arduino, etc.) - Processing Foundation

  1. Ran MidiBus.list() and confirmed that the standard default output devices [0] Gervill and [1] Real Time Sequencer were showing up in the console
  2. Went to audio midi setup on my mac -> Window -> show MIDI studio
  3. Clicked in to the IAC driver -> ticked box for “Device is online”
  4. Renamed the port to Processing to DAW
  5. Ran MidiBus.list() again in Processing, and saw the new option Processing to DAW in the console

今回はmacMIDI studio で"PROCESSING_TO_DAW"という名前に設定しています。

次にDAWを開いて好きなソフトウェアシンセを立ち上げます。GarageBandMIDI入力は自動で認識してくれるみたいですね。


5. 実行

Processingに戻ってコードを実行します。キーボードを弾くと冒頭の動画のような動作をします。


感想

仕事だとハードウェアかOSより下のレイヤを扱っているので、自分で書いたコードで絵が動くと楽しい。

娘も何だかよくはわからないだろうけど、画面見ながらバシバシキーボード叩いてくれているので良しとする。

CPU負荷軽くしたい…

余力があれば色んなバリエーション作ってみようかな...


参考

[普及版]ジェネラティブ・アート | 株式会社ビー・エヌ・エヌ新社

ProcessingでMIDIコントローラーを使う | Music Theory Workshop Japan

Sending MIDI information to my DAW - Electronics (Arduino, etc.) - Processing Foundation