TL;DR

p5.js でドロネー三角形分割を行う関数を書きました。
~~出来はともかく~~せっかくなのでライブラリとして公開してみたいと思ったのですが、リファクタリングするにあたって、どうせなら TypeScript で書き直して、テストやらなんやらも一緒にやってみようと思いました。

なお、JS のテストフレームワークとしては Jest や Mocha などがあるようですが、今回は Bun でテストもやってみるつもりです。Bunでのテストの構築については後日別記事にしたいです(うまくいかなければ Jest を導入するかもしれません)。

参考URL

環境

Bun v1.1.3
このバージョンであることに特に意味はありません。最新版を使ってください。

環境構築手順

プロジェクトディレクトリを作成し、ディレクトリ下で `bun init`

sh

mkdir new_p5js_project
cd new_p5js_project/
bun init

bun init helps you get started with a minimal project and tries to guess sensible defaults. Press ^C anytime to quit

package name (new_p5js_project): 
entry point (index.ts): 

Done! A package.json file was saved in the current directory.
 + index.ts
 + .gitignore
 + tsconfig.json (for editor auto-complete)
 + README.md

To get started, run:
  bun run index.ts

npm から `p5` と `@types/p5js` をインストールする

それぞれ、 p5.js 本体と型情報です。

sh

bun add p5 @types/p5 -d

bun add v1.1.3 (2615dc74)

 installed p5@1.9.4
 installed @types/p5@1.7.6

 2 packages installed

プロジェクトディレクトリは、以下のようなファイル構成になっているはずです。

|--.gitignore
|--README.md
|--bun.lockb
|--index.ts
|--node_modules
|--package.json
|--tsconfig.json

`src` ディレクトリを作成し、開発用のファイルを置く

sh

mkdir src
mv index.ts src/
touch src/index.html

むろん、このファイル構成は任意です。
シンプルなプロジェクトの場合 src フォルダはなくてもいいと思います。

ともあれ、これで開発環境ができました。

コードを書いて動かしてみる

コード例

src/index.ts

import p5 from 'p5';

const sketch = function(p: p5) {
  let diameter: number;
  p.setup = function() {
    p.createCanvas(p.windowWidth, p.windowHeight);
    p.noLoop();
    p.noStroke();
    p.fill(255);
    p.background(0);

    diameter = p.width <= p.height ? p.width : p.height;
    diameter /= 2;
  };

  p.draw = function() {
    // draw a circle in the middle of the canvas
    p.circle(p.width/2, p.height/2, diameter);
  };
};

new p5(sketch);

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }
  </style>
  <title>p5.piyo</title>
</head>
<body>
  <script type="module" src="../out/index.js"></script>
</body>
</html>

<script> の属性は適宜書き換えてください。

バンドルしてブラウザで実行

sh

bun build ./src/index.ts --outdir ./out --watch

--watch オプションを付けることで開発コードに変更があるたびに build しなおしてくれます。
これを VSCode の Live Server などと組み合わせるとより快適に開発ができます。

src/index.html を見に行くと以下が表示されました。

雑感

Bun はセットアップが楽でインストールも実行も速い。すごい。

あとは、参考 URL にもある通り、インスタンスモードにしたことでテキストエディタ上でも p5.js の Lint や関数のサジェストが効くので楽です。