Space Type Lab は、往年の Space Type Generator のシリンダー・シーンをモダンなツールチェーンで再構築したプロジェクトです。UI は React 19 + TypeScript 製で、リアルタイム WebGL スケッチは p5.js で動作し、 WebM を QuickTime 互換の MP4 に変換できます。
p5.jsを用いたリアルタイム WebGL グリフ・シリンダー。IBM Plex Mono のグリフキャッシュ、スタック別オフセット、正弦波変形に対応。- オリジナルの Space Type Generator と同じスライダーを備えたコントロールサーフェス（シリンダー、波形、タイプフォーム、微調整、カメラ、レイアウト）と Pride パレットのショートカット。
src/constants/presets.tsに定義されたプリセット（Simple、Jellyfish、Crown、Complex、Weave、Zebra、Hoops、Pride）でワンクリック切り替え。- 任意文字列の入力、最大 6 色のストロークパレット編集、背景色ピッカー。
- CanvasCaptureStream + MediaRecorder による録画を内蔵し、利用可能なコーデックを自動判定（MP4 が使えなければ WebM にフォールバック）。
p5.captureによるブラウザ完結型キャプチャ。GIF/MP4/WebM をサーバーなしでエクスポート可能。- Node.js 製コンバーターサービス（
express+fluent-ffmpeg+ffmpeg-static）が WebM/MP4 を H.264 MP4（QuickTime セーフ）へ再エンコード。
- Vite 7.2.2（Node.js ^20.19.0 以上が必須）
- React 19 / React DOM（モダン JSX ランタイム）
- TypeScript 5.9 + ESLint 9（Flat Config）
p5（CDN 経由で読み込み、src/global.d.tsで型を補完）p5.capture（index.htmlで jsDelivr から提供）- Express 4、
multer2、fluent-ffmpeg、ffmpeg-static（オプションの変換サーバー）
- Node.js 20.19.0 以上（Vite 7 は旧バージョンでは動作しません）
- npm 10（Node 20 に同梱）または互換パッケージマネージャー
- （任意）
ffmpegバイナリを PATH に配置。ffmpeg-staticのダウンロードが制限される環境向けのフォールバック
git clone https://github.com/your-org/space-type-lab.git
cd space-type-lab/stg-app
npm installnpm run dev
# ➜ http://localhost:5173Vite の HMR により src/ 配下の変更は即座に反映されます。初期開発時は p5 と p5.capture を jsDelivr から取得するため、ネット接続を維持するか、public/ に配置して自己ホストしてください。
| スクリプト | 説明 |
|---|---|
npm run dev |
Vite dev サーバー + React Fast Refresh を起動します。 |
npm run build |
tsc -b で型チェック後、dist/ に本番ビルドを作成します。 |
npm run preview |
dist/ を Vite のプレビューサーバーで提供。本番デプロイ前のスモークテストに便利。 |
npm run lint |
ESLint 9（eslint.config.js）を実行します。 |
npm run server |
ポート 4000（または PORT）で Express コンバーターを起動します。 |
- キャンバス録画（デフォルト） —
canvas.captureStream()+MediaRecorderを利用。Chrome/Edge では H.264 MP4 が得られる場合が多く、それ以外のブラウザでは WebM を生成。UI では生の録画 URL と「Convert to MP4」ボタンを併記。 - MP4 変換 — WebM/MP4 の blob を
/api/convertに送信。サーバー側でlibx264、yuv420p、faststartを付与して QuickTime 互換の MP4 に再エンコードし、ストリームとして応答。 p5.captureエクスポート — MediaRecorder を使わずに GIF/MP4/WebM を任意解像度でエクスポート可能。CDN スクリプト（index.htmlに配線済み）を利用するか、public/でホスト先を置き換えてください。
両ワークフローは並行して動作できます。UI にはキャプチャ状態、エラーメッセージ、日本語のヒントが各コントロールブロックに表示されます。
stg-app/
├── index.html # React バンドルの前に p5 と p5.capture をロード
├── public/
│ └── p5.global.js # CDN ビルドを自己ホストする場合に window.p5 を公開
├── src/
│ ├── App.tsx # コントロール UI、録画ロジック、プリセット管理
│ ├── App.css # 2 ペインレイアウトと UI スタイル
│ ├── constants/ # スライダー定義とプリセットデータ
│ ├── sketch/ # WEBGL モードでグリフシリンダーを描画する `createSketch`
│ ├── types.ts # 共有型定義
│ └── main.tsx # React エントリーポイント
├── server/index.js # Express + ffmpeg のコンバーター
├── vite.config.ts # Vite + React プラグイン設定
└── tsconfig*.json # TypeScript のビルドターゲット
- 本番ビルドを作成:
npm run build
dist/に最適化されたアセットが生成されるので、任意の静的ホスティング（GitHub Pages、Netlify、Cloudflare Pages、S3 など）へ配置してください。 - （任意）Node.js 20+ が動作する環境にコンバーターサーバーをデプロイ。ステートレスなサービスなので、常時起動プロセスでもサーバーレスでも動作します。
PORTを設定し、プラットフォーム側で TLS を処理してください。 - 本番ビルド前に
VITE_CONVERTER_URLをデプロイ先のコンバーターに合わせて設定し、「Convert to MP4」ボタンが正しいオリジンを参照するようにします。
Error: MediaRecorder is undefined— Safari や一部の Firefox ではキャンバス録画が未対応です。Chrome/Edge を利用するか、p5.captureワークフローを利用してください。ffmpeg-staticのダウンロード失敗 — バイナリ取得がブロックされている可能性があります。手動でffmpegをインストールし PATH を通してください。サーバーは自動でシステムバイナリにフォールバックします。- キャンバスが真っ白 —
index.htmlの CDN<script>タグが到達可能か確認するか、ローカルホストに置き換えてください。