M4Lでp5.jsを使う - P5.jsでサウンドツールのビジュアルを拡張する

#p5 .js #M4L #Max #AbletonLive

はじめに

p5.jsとMax for Liveをつないでみようということで、
いろいろやり方はあると思いますが、[jWeb]オブジェクトを使って繋ぐのが
一番いい感じだったので紹介します。

注意点

Maxか、M4Lが必要になります。

テンプレート

Githubリポジトリにサンプルコードを置いてみました。
参考にどうぞ！

TaitoOtani-NINETEEN95STUDIO/P5M4L

 使い方

Githubからフォルダごと入手すると、
以下のようなファイルがあると思います。

基本的にいじっていくのは、『sketch.js』と『template.maxpat』です。

Max側(M4L)

template.maxpathをダブルクリックして開いてみてください。
※Maxをお持ちでない方は、先にインストールする必要があります。
（無料版でも開くことできます！保存ができない！）

以下のような画面が表示されます。

黒い大きな領域にオンマウスすると、領域が動くと思います。
こちらの領域にP5.jsで作った描画結果が表示されています。

右側にある赤・緑・青色のスライダーは、[pak]オブジェクトを伝って、値をp5.jsに渡しています。

黒い領域の下側に[route output]オブジェクトがあり、何やら数字が動いていると思います。

p5.js側でoutputと言う名前で指定した変数の値が返ってきています。
こちらのサンプルでは、p5.jsの組み込み変数であるframeCountが返ってきています。

P5.js側

次にsketch.jsを開いてみてください。

var s = function(p) {
       var v1,v2,v3;
//--------------- Setup ---------------------
   p.setup = function() {
       p.createCanvas(innerWidth, innerHeight);
       window.max.bindInlet('set_value', function(_v1, _v2, _v3) {
           v1 = _v1;
           v2 = _v2;
           v3 = _v3;
   });
 };
//--------------- Draw ---------------------
   p.draw = function() {
       p.background(0);
       let mx = p.mouseX;
       let my = p.height / 2;
       p.rect(0, 0, mx, my);
       window.max.outlet('output', p.frameCount);
       p.fill(255);
       p.text(v1, 10, p.height - 20);
       p.text(v2, 10, p.height - 40);
       p.text(v3, 10, p.height - 60);
   };
   p.mousePressed = function(){
    
   }
//--------------- ReSize---------------------
 p.windowResized = function() {
       p.resizeCanvas(innerWidth, innerHeight);
 }
 
};
const myp5 = new p5(s);

こちらは、p5.jsのインスタンスモードと呼ばれる書き方で記述してあります。

[インスタンスモードの解説](https://youtu.be/Su792jEauZg)は、The Cording Trainシリーズの中で、Daniel shiffman先生が行ってくれていますので楽しく勉強できると思います！

Setup関数内で以下のような記述があることが確認できると思います。

window.max.bindInlet('set_value', function(_v1, _v2, _v3) {

           v1 = _v1;
           v2 = _v2;
           v3 = _v3;
   });

こちらでMax側からの値を受け取っています。
「window.max.bindInlet()」関数で
先ほど確認した赤・緑・青色のスライダーから[pak]オブジェクトから入力されている
3つの値を受け取って、変数に代入しています。

次に出力ですが、「window.max.outlet()」関数でMax側に出力することができます。

window.max.outlet('output', p.frameCount);

以上が簡単なP5.jsをMaxの中で利用する方法になります。

M4Lデバイスでp5.jsを使う

M4Lデバイスの中で活用したい場合は、
Ableton Liveを立ち上げ、M4Lの新規デバイスを任意のトラックにドラッグアンドドロップします。

そのデバイスを任意のフォルダに保存して、
先ほどのテンプレート一式を同じファルダ内にコピーして、
「template.maxpat」をコピーアンドペーストすることで、同じように始めることができます。

さいごに

p5.jsとM4Lをつなげることで、M4Lでは手を伸ばしにくい2DグラフィックスやWEBGLのような3DCG、カメラや機械学習を使った画像解析などをかなり簡単に始めることができるのが最大のメリットだと思っています。

何よりもアイディアをすぐに形にできる感じがとても気に入ってます！
ではでは！！