🐒

Paper.jsの使い所

2020/09/24に公開1件

JavaScript

Paper.jsは２Dグラフィックのためのcreative codingライブラリです。同様の機能を提供するライブラリに

p5.js (processing.js)
Three.js
PIXI.js
Raphael.js

などがあります。このなかではp5.jsが圧倒的にシェアがあります。2Dの描画ではドキュメント、拡張性、メンテナンス状態ではp5.jsが最も優れていると言えます。

p5.jsを使わずPaper.jsを使う理由は以下の２つです

2Dのcreating codingをシンプルに書きたい
セグメントを動かしたい

セグメントというのはAdobe Illustratorの用語で図形のパスを構成する点のことです。
Paper.jsはステートフルなオブジェクトを操作することでインタラクティブな2Dを表現します。

var path = new Path();
path.add(new Point(100, 100)); //ここがセグメント
path.add(new Point(200, 200)); //ここもセグメント
path.strokeColor = 'pink';

このようにpathを定義したらpathのsegments要素に点（セグメント）を追加していきます。このpathの形を変える時もsegmentsを変更します。

path.segments[0].x = 200;

この辺りはp5.jsに慣れていると使い勝手が悪いように感じると思います。p5.jsはデータと表現が分離されているのでクラスで明示的にオブジェクトを残さない限り描画後の状態を保存することはありませんが、Paper.jsの場合は状態を保存せずに描画だけする操作は基本的にしません。

下の例はチェーンのようにセグメントを１つ動かすと連続してセグメントが動くプログラムのサンプルです。

var path = new Path();
path.strokeColor = 'pink';
for (var i = 0; i < 10; i++) {
    path.add(new Point(i * 10, i * 10));
}
path.strokeWidth = 10;
path.strokeCap = 'round';
path.selected = true;

function onMouseMove(event) {
    var segs = path.segments;
    for (var i = 0; i < segs.length - 1; i++) {
        var seg = segs[i];
        var nex = seg.next;
        var vec = seg.point - nex.point;
        vec.length = 30;
        nex.point = seg.point - vec;
    }
    segs[0].point = event.point;
    path.smooth();
}

また、Paper.jsはAdobe Illustratorのようなパスを基本としたデータ構造に強く影響を受けておりパスに関連した計算がとても素直にかけます。

circle.position += circle.vector

残念ながらpaper.jsはES6を2020.9時点でサポートしておらず、classやアロー演算子を使い慣れている人は大規模な開発に躊躇すると思います。

Paper.jsはScriptographerと呼ばれるAdobe Illustrator + Adobe Photoshopのスクリプティングツールを基礎にしています。したがってこれらのツールを使い慣れている方ならもしかしたらp5.jsよりPaper.jsの方がわかりやすいかもしれません。しかし多くの場合ではp5.jsを使うことが多いでしょう。

Discussion

neko

jjjjj