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

テンプレート

Githubリポジトリにサンプルコードです。

こちら!
download

使い方

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

• README.md　　　　　　　
• index.html
  
• sketch.js
• template.maxpath

基本的にいじっていくのは、『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 = 0;
       var v2 = 0;
       var v3 = 0;
//--------------- 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のインスタンスモードと呼ばれる書き方で記述してあります。

インスタンスモードの解説は、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」をコピーアンドペーストすることで、同じように始めることができます。

まとめ

今回は、Mac for LiveからP5.jsを呼び出すという飛び道具的なノウハウの共有になりました。クリエイティブコーディングのスキルを横展開したり、逆にP5.jsやProcessingで遊んでいるみなさんがMaxに興味を持ってくれたらいいな、なんて思いながら記事を書いてみました。それではまた！

Taito Otani