TypeScript で p5js のスケッチを書くための雛形を作った

Nature of Code -Processingではじめる自然現象のシミュレーション-

を読みながら、手を動かすために作った。

なんで p5js ?

個人的にとっつきやすいから。

なんで TypeScript ?

VSCode で補完が効くのと、凡ミスを防ぐため。最近は、特に理由がなければ基本的に TypeScript で書いている。

FuseBox を使う

ビルド環境の構築に時間をかけたくなかったので、なるだけ設定を書かずに済むモジュールバンドラを探した。最低限、コンテンツの配信(ウェブサーバー)と、ファイルを変更したらビルド&リロードしてくれたらOK 。 いろいろ探したら、FuseBox がよさそうだった。TypeScript ファーストなのが決め手。

設定はこんなかんじ。

const { FuseBox, WebIndexPlugin } = require("fuse-box");

const fuse = FuseBox.init({
  homeDir: "src",
  output: "dist/$name.js",
  plugins: [
      WebIndexPlugin({path: "."})
  ]
});

fuse.bundle('app')
    .instructions(`> sketch.ts`)
    .watch()
    .hmr({reload: true});

fuse.dev();

fuse.run();

node fuse で起動できる。必要に応じて、npm scripts に移動する。

スケッチ( src/sketch.ts )

こんなかんじ。draw に必要なコードを書き足していけばOK。 バンドルの過程で、setup と draw が関数スコープに入るので、明示的に window オブジェクトのプロパティとして生やす必要がある。

/// <reference types="p5/global" />

import 'p5';

function setup() {
  createCanvas(720, 720);
  noCursor();
}

function draw() {
  clear();
  ellipse(50, 50, 80, 80);
}

window['setup'] = setup;
window['draw'] = draw;