移転しました。

約3秒後に自動的にリダイレクトします。

p5.js : p5.jsを触ってみた

Processing (Proce55ing) p5.js

Processingで適当な作品を細々と公開している私ですが、やっとp5.jsを小一時間ほど触ってみましたのでノートしておきたいと思います。

私の視点からp5.jsを見た特徴としては、

  • Processingの文法（図形の書き方とか、setup/drawによるフレームワークとか）の知識が使える
  • Processing.jsよりも、JavaScriptとしてかけるので書きやすい
  • SoundやCameraなどのライブラリが使える！

といったところです。

Processing.jsで作品をWeb上に公開するときは、Processingとして作成したものを「移植する」感覚が強かったですが、p5.jsではその辺の敷居が下がっていると思います。

Processingだと、Javaとして取り込んでいたライブラリが使えないとか、そもそもブラウザ上だとキャンバスサイズの変更が起きうるのでその辺の配慮とか、そういったブラウザ上で動くようにするための諸々が必要でしたが、その辺が不要、もしくはやりやすくなっています。 そもそも、mimimとか使っているともうWebには上げられなかったですし。（Audioタグとかでゴリゴリ書けばできるかもしれませんが）

ファーストインプレッションですが、p5.jsはProcessingの文法をそのままに、JavaScriptで作り直したような印象で、そもそもWebに公開するつもりなら最初からこちらを使った方が色々と便利だと思います。

実際には、Processing.jsをロードしたscriptタグの中ではProcessingとJavaScriptが両方使えるので、JavaScriptでも一部は書けるんですけど、Javaっぽい文法とJavaScriptが混ざって気持ち悪いんですよね…

Processingをはじめよう (Make: PROJECTS)

Processingをはじめよう (Make: PROJECTS)

Processing.jsとp5.js

公式サイトに違いについての記載があります。

Processing transition · lmccart/p5.js Wiki · GitHub

JavaScriptで置き換わっていることによる違い以外でのポイントは、

  • createCanvas()は、他のタグと共存を意識している
  • リソースのloadに対して配慮されている（load関数にcallbackがある、preload()の用意）
  • PShapeやPFontがない（PFontないの…）。でも鋭意作成中。

といった所だと思います。

Processing.jsの場合はこんな感じで作品を公開しているんですが、canvasを書いてそこにProcessingのコードを反映させています。

<body>
    <canvas id="processing-canvas"></canvas>
    
    <script type="text/javascript" src="../js/processing.min.js"></script>
    <script>
    window.onload = function() {
      var canvas = document.getElementsByTagName("canvas")[0];
      var codeElm = document.getElementById("processing-code");
      var code = codeElm.textContent || codeElm.innerHText;
      new Processing(canvas, code);
    }
    </script>
    <script type="text/processing" id="processing-code">
    /* @pjs preload="./plane.png"; */
    ...
    int HEIGHT = 0;
    void setup() {
      size(window.innerWidth,window.innerHeight);
      HEIGHT = window.innerHeight;
      window.onresize = function()
      {
        size(window.innerWidth, window.innerHeight);
        HEIGHT = window.innerHeight;
      }
      ...

    }
    ...

Canvasの作成と、Windowサイズに応じて作品のレンダリングを再計算するところをp5.jsで置き換えるとこんな感じでできます。

function setup() {
    // put setup code here
    createCanvas(windowWidth, windowHeight);
}

function draw() {
    // put drawing code here
    background(0, 100, 200);

    noFill();
    stroke(200, 100, 0);
    strokeWeight(5);
    ellipse(windowWidth/2, windowHeight/2, 100, 100);
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

簡単！

また、canvasをcreateCanvas()で作っているのは、他にタグ要素の追加をする可能性があると言っています。例えば

function setup() {
    createCanvas(windowWidth, windowHeight);
    createGraphics(200,200);
}

みたいなコードを書いて、実行してみると、以下のような要素が作成されていると思います。

<body>
    <canvas id="defaultCanvas" class="  p5_hidden" width="1403" height="468" style="width: 1403px; height: 468px;"></canvas>
    <canvas width="200" height="200" style="display: none; width: 200px; height: 200px;"></canvas>
</body>

createGraphics()は、off-screenのグラフィックを作るためのメソッドですが、この挙動をみてみると 実際にはcanvasをもう一つ作成しそこに描画していくことができるようです。ただし、style="display:none;"とあるので、これは実際には描画されません。Referenceにあるように、このcanvasにDrawをしたものをimageに入れることで描画することになります。

なんかあまりケースとしてパッとしないんですが、他にどういうケースがあるんだろう…

（追記） p5.domライブラリがありました。

あと、PFontないのはちょっと痛いですね。でもtextFont()でフォントの指定はできます。Webフォントの使い方とかは後で調べてみようと思います。

まとめ

ざっと見てみましたが、全部JavaScriptで書けるぜ！っていうところに尽きるのかなと思います。 そのおかげで、SoundやCameraのライブラリとかが使えるので拡張性を得られます。

あと公式サイトにもNode.jsとsocket.ioについて記述がありますが、こういったWeb技術と組み合わせる敷居は下がったと思います。WebアプリのフロントエンドとしてJavaScriptで提供されているライブラリやWebアプリとの融合はProcessing.jsに比べてとても簡単になっていると思いました。

socket.ioとかと組み合わせて、ちょっとしたゲームとかブラウザを介したインタラクションアプリなんかも簡単に作れそうで、ワクワクしますね！

ジェネラティブ・アート -Processingによる実践ガイド

ジェネラティブ・アート -Processingによる実践ガイド