クリエイティブコーディングのためのライブラリ、Pts.jsを触ってみた

Pts.js というライブラリが人気らしいので触ってみる。

GitHub: Pts.js

Pts.jsはビジュアライゼーションやクリエイティブコーディングのためのライブラリで、インタラクティブな点や図形を簡単に描くことができる。

このライブラリには「Space」、「Form」、「Point」という3つの概念があり、これらの概念は例えるならば「紙」、「ペン」、「絵のアイデア」のような役割をそれぞれ担っている。

Pts.js のシンプルなサンプルはこんな感じ。

import { CanvasSpace } from "pts";

// spaceとformの初期化
const space = new CanvasSpace("#app").setup({ retina: true });
const form = space.getForm();

// pointの追加
space.add((time, ftime) => {
  form.fill("#f03").point(space.pointer, 10, "circle");
});

// マウスとタッチイベントにバインドし、アニメーションをスタート
space.bindMouse().bindTouch().play();

わずか10行程度のコードでとても簡単。

Pts.js では名前の通りあらゆるものが Points（Pts）で表されるので、Pts のバリエーションが表現力を左右する。Pts の基本的な構造は以下の３つ。

• 数字を要素にもつ配列（ Pt ）
• Pt を要素にもつ配列（ Group ）
• Group を要素にもつ配列

これらを組み合わせることで多種多様な図形や模様を描画できる。

ずっと見てると気分が悪くなるので注意。

上のサンプルでは、それぞれの Pt に対して縮小・拡大・回転といった変形をしているが、そういった処理も簡単に行えるメソッドが用意されている。

pt.scale( 0.5 )
pt.rotate2D( Math.PI/3 )
pt.shear2D( [0.3, 1.2] )
pt.reflect2D( [p1, p2] ) 

もちろん上記のメソッド以外にも、Pts.js にはいろんな機能が備わっているのでとても便利。

この記事、最初から最後まで「簡単で便利！」としか言っていないが、本当に簡単で便利だったのでオススメ。