更新:

turing-pattern-lab

Web MVP

チューリング・パターン体験アプリ 要件定義書（MVP）

1. 概要

1.1 アプリ名

Turing Pattern Lab

1.2 目的

チューリング・パターン（反応拡散系）によって生成される自然界の模様を、ユーザーが視覚的かつ直感的に体験できるWebアプリを提供する。

教育用途、サイエンスアート用途、数学への興味喚起を主目的とする。

1.3 対象ユーザー

  • 数学や自然科学に関心がある一般ユーザー
  • プログラミング学習者
  • 学生
  • 教育関係者
  • サイエンスアート愛好家
  • 生成アートに関心があるユーザー

2. MVP方針

MVPでは「まず触って楽しい」ことを重視する。

数式の詳細説明や高度なパラメータ調整機能は後続フェーズとし、初期版では視覚的な体験価値を優先する。

3. システム構成

3.1 フロントエンド

  • React
  • TypeScript
  • Vite

3.2 描画

  • HTML Canvas

MVPではCanvasを採用する。WebGL対応は将来拡張とする。

3.3 バックエンド

  • なし
  • 完全クライアントサイドアプリ

4. 主要機能

F-01 パターン生成

概要

チューリング・パターンをリアルタイム生成する。

要件

  • 初期表示時に自動生成を開始する
  • Canvas上にパターンを描画する
  • アニメーションとして時間発展を表示する
  • MVPではGray-Scottモデルを採用する

F-02 プリセット選択

概要

代表的な模様をワンタップで切り替えられるようにする。

プリセット例

  • Zebra：シマウマ風のストライプ
  • Giraffe：キリン風の網目模様
  • Leopard：ヒョウ柄風のスポット
  • Coral：サンゴ風の有機的模様
  • Maze：迷路風のパターン

要件

  • プリセット名を表示する
  • 選択すると即座にパラメータが反映される
  • MVPではサムネイル画像は必須としない

F-03 パラメータ調整

概要

模様の変化を体験できるよう、主要パラメータを調整可能にする。

MVP対象項目

  • Feed
  • Kill

将来候補

  • Diffusion A
  • Diffusion B
  • Iteration speed
  • Noise amount

UI

  • スライダーで調整する
  • 現在値を数値表示する
  • Feed / Kill は微調整ボタンで0.0001単位の増減ができる

F-04 ランダム生成

概要

ランダムなパラメータを生成し、予期しない模様との出会いを提供する。

要件

  • Randomボタンを配置する
  • クリックするとFeed/Killなどの値をランダム設定する
  • 再生成時は初期状態もリセットする

F-05 一時停止／再開

概要

アニメーションを停止・再開できるようにする。

要件

  • Pause / Resume を切り替えられる
  • 停止中も現在のパターンは表示維持する

F-06 画像保存

概要

生成したパターンを画像として保存できるようにする。

要件

  • PNG形式で保存する
  • Canvas内容をエクスポートする
  • ファイル名は turing-pattern.png などとする

F-07 ミニ解説

概要

チューリング・パターンの概要を短く説明する。

表示内容

  • チューリング・パターンとは何か
  • なぜ模様が生まれるのか
  • 自然界の例

MVP要件

  • 固定テキストでよい
  • 詳細な数式解説は必須としない

F-08 カスタムプリセット保存

概要

Randomやスライダー調整後の現在設定を、ユーザーが再利用できるプリセットとして保存する。

要件

  • 現在のFeed / Kill / Seedを保存できる
  • 保存名をユーザーが指定できる
  • 保存済みプリセットをプリセット選択に表示する
  • 保存済みプリセットを削除できる
  • MVPではブラウザのlocalStorageに保存する

5. 画面構成

5.1 ホーム画面

構成

  • ヘッダー
    • アプリ名
    • 短い説明文
  • メイン領域
    • Canvas描画エリア
  • 操作パネル
    • プリセット選択
    • Feedスライダー
    • Killスライダー
    • Randomボタン
    • Save Presetボタン
    • Delete Presetボタン
    • Pause/Resumeボタン
    • Save PNGボタン
  • 解説エリア
    • チューリング・パターンの短い説明

5.2 レスポンシブ方針

PC

  • Canvasを大きく表示
  • 操作パネルを右側または下部に配置

スマートフォン

  • Canvasを上部に表示
  • 操作パネルを下部に縦並びで配置

6. 非機能要件

6.1 パフォーマンス

  • PCでは60fpsを目標とする
  • スマートフォンでは30fps以上を目標とする
  • 端末性能に応じてCanvas解像度や計算ステップを調整できる設計とする

6.2 対応ブラウザ

最新版の以下ブラウザを対象とする。

  • Chrome
  • Safari
  • Edge

6.3 アクセシビリティ

  • ボタンやスライダーには適切なラベルを付与する
  • 色だけに依存しないUIにする
  • キーボード操作に極端に弱い実装を避ける

6.4 デプロイ

  • Vercelでのデプロイを想定する
  • 静的Webアプリとして配信可能な構成にする

7. 将来拡張

Phase 2

  • カラーパレット選択
  • グラデーション表示
  • パラメータのURL共有
  • フルスクリーン表示
  • プリセットサムネイル
  • パターン生成履歴

Phase 3

  • WebGL/GPU対応
  • 3Dチューリングパターン
  • AR表示
  • 高解像度アート出力
  • 教材モード
  • 数式表示モード

8. MVP完成条件

以下が動作することをMVP完成条件とする。

  • パターンがリアルタイム生成される
  • 5種類以上のプリセットを切り替えられる
  • Feed/Killをスライダーで調整できる
  • ランダム生成ができる
  • 一時停止／再開ができる
  • PNG保存ができる
  • スマートフォンで画面が破綻しない
  • READMEと要件定義書が整備されている

8.1 実装済みスコープ

初期MVPでは、React + TypeScript + Vite のクライアントサイド構成で以下を実装対象とする。

  • Gray-ScottモデルによるCanvas上のリアルタイム描画
  • Zebra / Giraffe / Leopard / Coral / Maze の5プリセット
  • Feed / Kill のスライダー調整
  • ランダム生成
  • Random / 現在設定のローカルプリセット保存
  • 一時停止／再開
  • Canvas内容のPNG保存
  • PC / スマートフォン向けレスポンシブUI
  • プリセット定義とランダム値範囲の最小単体テスト

9. 開発上の優先順位

  1. CanvasでGray-Scottモデルを表示する
  2. プリセットを実装する
  3. Feed/Killスライダーを実装する
  4. Random / Pause / Save PNGを実装する
  5. レスポンシブUIを整える
  6. ミニ解説を追加する
  7. テストとREADMEを整備する