Ptsというライブラリが面白そうなので、公式チュートリアルを触ってその感想などをレポートしたいと思います。
初見としては、デモサイトにあるとおり、複雑な計算式による図形描画が簡単なメソッドで高速で動くのかなという印象です。
この3つの概念で描きたいものを考えるようです。3Dプログラミングをする際のライトやカメラ、シーンのような物事の捉え方の概念でしょうか。詳しくはここ(英語)に書かれています。
まずはコードペンでPtsライブラリを追加しましょう。
Settings -> JavaScript -> 検索欄でPtsで検索し、追加します。
まずはhtmlのcanvas作成します。これがPtsでいうスペースですね。
これには、通常版と簡易版が用意されています。
まず通常版から、グローバルスコープ(window)にPtsの関数を定義します。
Pts.namespace(window)#hello箇所はcanvas要素のidになり、setup関数では背景の他に、オフスクリーンレンダリング、リサイズ、retina対応の有無を設定できます。
const space = new CanvasSpace("#hello");
space.setup({ bgcolor: "#fff" });
const form = space.getForm();以上の簡易版として、quickStart関数を使い一行で書けます。
この場合、グローバルスコープにPtsのメソッドや変数、さらにspaceとform変数が作成されます。
Pts.quickStart("#hello", "#fff");quickStart関数の戻り値の関数の引数が毎フレーム実行される関数です。
これは標準のrequestAnimationFrame関数やProcessingのdraw関数に非常によく似ています。
const run = Pts.quickStart("#hello", "#fff");
run((time, ftime) => {
// ここに毎フレーム実行する描画処理を記述します。
});他にも、スペースに対して関数を追加(space.add(() => { }))するとその関数が毎フレーム実行されるようです。
form.pointは、指定した座標に図形を追加します。
デフォルトでは幅5pxの赤い四角が追加されます。
また、space.pointer変数にはマウス座標が格納されています。
以下のコードでは、マウス座標に追従して、幅10pxの円を描画しています。
form.point(space.pointer, 10, 'circle')アニメーションフレーム関数の引数timeにはフレーム数が格納されています。
以下のように書くと円が伸縮するアニメーションが実行されます。
space.add((time) => {
const radius = 5 + Num.cycle(time%1000/1000) * 5;
form.point(space.pointer, radius, 'circle');
})2行目のNum.cycle(time%1000/1000)の部分を少し解説しておきましょう。
まずtime%1000/1000の部分から解説します。
timeはフレームなので、毎フレームずつ1が追加された整数が入ります。
それを1000で割り、その余りをえることで 0~1000の値にフレームの値を制限します。
最後にそれを1000で割、0~1の値に変換します。
つまり0からはじまり徐々に増え続け、1に近づくとまた0からはじまる数値になります。
Num.cycleは引数に円の角度をラジアン(0~1の値)単位で渡すsin関数です。
サイン関数はイージングの動きを得るときなどに使用します。
ここにtime%1000/1000を渡すことで、イージングのついた0から1の増え続ける値を得ることができます。
この記事の内容は公式ドキュメントのGet startedから抜粋したものです。
基本的な構造は以下のように完結にかくことができ、非常に簡単です。
const run = Pts.quickStart("#hello", "#fff");
run((time, ftime) => {
// ここで以下にアニメーションを記述するかがキモ
});あとは、Ptsの関数を使い、いかに描画を記述していくかがキモになります。
2章のPt以降は様々な描画方法(命令的なアニメーション手法など)が紹介されていますので、興味があればぜひご覧ください。