✍️

p5.jsで『描画プロセス』そのものをアニメーションにする新ライブラリ p5.lerpShape を作って公開した話

に公開
JavaScript
npm
ライブラリ
p5.js
ジェネレーティブアート
tech

作ったもの

https://github.com/tkyko13/p5.lerpShape

p5.js の標準的な図形描画を、0.0 から 1.0 の進捗値（Progress）でスルスルと補間（Lerp）しながら描画できるようにするライブラリです。

「図形を描く過程」をアニメーションにしたい時、複雑な計算をすることなく既存のコードを囲むだけで動かせます。

p5jsで作品を作っていた人も、UIなどに手軽にアニメーション付けたい人も是非使ってみてください。

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);

  let p = (frameCount % 100) / 100; // 0.0 ~ 1.0 の進捗

  // この関数で囲むだけで、中の図形が progress に応じて描画されます
  withLerpShape(p, () => {
    strokeWeight(2);
    noFill();

    rect(50, 50, 100, 100);
    line(50, 200, 300, 250);
    triangle(300, 50, 350, 150, 250, 150);
  });
}

mySketch (3).gif

その他Exampleサイト

https://tkyko13.github.io/p5.lerpShape/example/

Handwritten_Typography (2).gif

例えば、アルファベットの手書きデータを利用し、短いコードで超手書き風のタイピングのデモも体験できます。

なぜこれを作ろうとしたか

ジェネレーティブアートの作品自体好きなのですが、作られていく過程も見ることができたらもっと楽しいと思いました。

パッと表示される1枚の絵も美しいですが、線が1本ずつ引かれ、形が徐々に組み上がっていく様子には、独特の心地よさと物語が宿ります。そのワクワク感を、誰でも手軽に実装できるようにしたくてこのライブラリを作りました。

デジタルアートの真価は、完成した静止画（結果）だけでなく、プログラムが実行され続ける「時間軸」にこそあると思っています。

そこにはアルゴリズムがあり、そこから様々な印象が得られると思っています。

ライブラリのいいところ

既存のコードを囲むだけでアニメーションが作れる

最初は lerpRect(10, 20, 50, 50, 0.2); のように独自の関数を作ろうとしたのですが、AI(Gemini)に聞いてみたところ withLerpShape(); で囲むのはどうかという提案をもらって、そうしてみました。
(AIと協業してやってみたの記事はまた後日投稿予定です)

ライブラリ作ってみた～っていうポストしてみたら、さっそく使って、（たぶん）既存の作品を動かしてくれた方がいました。これも既存のコードを囲むだけというよさがでていたように思います。

等速補間で描く

ペンプロッターが実際に紙の上を走るように、一定のスピードで描画される質感を目指しました。

通常、三角形の「短い辺」と「長い辺」を同じ時間で描こうとすると、長い辺の方が爆速で動いてしまい、不自然な加速・減速が発生します。

p5.lerpShape では、図形全体の総距離（Total Path Length）を計算し、**「進捗 0.5 のときは、図形全体の 50% の距離までペンが進んでいる」**ように内部で調整しています。この「等速補間」のおかげで、どんなに複雑な多角形でもヌルヌルと滑らかなアニメーションになります。

p5js向けのライブラリ

{
  if (typeof window.p5 !== 'undefined') {
    // この中に実装を書いていく
  } else {
    console.error('p5.lerpShape: p5.js is not found. Please load p5.js first.');
  }
}

↑こんな感じで、このライブラリの前にp5jsを読み込んでいるかどうかを判定

p5.prototype.myFunc = function () {}

↑こんな感じでp5jsに独自の関数を実装したり

const _originalRect = p5.prototype.rect;
p5.prototype.rect = function (...args) {
  if() {
    // 何かの判定で、rect()を拡張したり、まったく変更したり
  }
  else {
    // ちゃんとオリジナルの関数も実行できるように
    _originalRect.apply(this, args);
  }
}

↑こんな感じでp5jsにすでにある関数の機能を拡張したりしました

今回この方法を利用することで、既存のコードの機能の拡張をしています

npmに登録しました

https://www.npmjs.com/package/p5.lerpshape

いつも行っている npm i コマンドでインストールできるようになりました！個人的にここ結構感動です！！

手順

  1. npmアカウントの作成
    • npmjs.com でアカウントを作成します
  2. ターミナルからログイン
    • npm login コマンドを打ち、ブラウザまたはコマンドラインで認証します
  3. プロジェクトの初期化
    • npm init を実行。package.json が生成されます
  4. package.json の設定
    • name はユニークの名前にする必要があるため、今回は p5.lerpshape としました
    • main で指定したファイル（今回は p5.lerpShape.js など）にライブラリの本体を書きます
    • その他、version や repository にURLなど記述しました
  5. テストと動作確認
    • npm link を使うと、ローカルにある自分のライブラリを別プロジェクトから参照してテストできるので便利です！
  6. いよいよ公開
    • npm publish
    • ターミナルに 🎉 と表示されたら、世界中の人があなたのライブラリをインストールできるようになります！
    • 結構すぐに登録され、 npm i p5.lerpShape でインストールできるようになりました

リポジトリにスターください

https://github.com/tkyko13/p5.lerpShape

GitHub stars

ぜひよろしくお願いします。

Discussion