ランダムウォークの木/枝
クリック/タップした場所から枝が伸び始める。各枝は角度に小さなランダムウォークを加えながら成長し、伸び切ると確率的に2本へ分岐するか、先端に花を咲かせて止まる再帰的な生成表現。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 自然・成長をテーマにした演出面
- タップで育つ遊びのある待機画面
- ジェネラティブアートの見本
- 避ける場面
- 本文の背景（枝が文字に重なる）
- 結果の再現が必要な場面（毎回違う）
- 情報をアニメだけで伝える場面
- 構成要素
- 淡い面（canvas）
- 枝（深さで色が変わる）
- 先端の花
- 操作ヒント
- 持っている状態
- 通常
- キーボード
マウス・タッチ専用（タップ位置に植える）。装飾で代替操作は不要
- 支援技術
canvas は aria-hidden の装飾。reduce 設定では成長速度を 2倍にして過程を短くし、伸び切ったら描画を止める。visibilitychange で停止
- 動き
枝は 130px/s で伸び角度にランダムウォーク。伸び切ると確率 0.86−深さ×0.1 で分岐、最大深さ 6。先端の花が 0.12/frame で開く
デザインの要点
- 分岐確率は 0.86 − 深さ×0.1 で深いほど止まりやすくし、最大深さ 6 で打ち切る。一定確率だと爆発的に増える
- 子の長さは親の 0.62〜0.8 倍・太さ 0.68 倍。比率を固定すると全体が相似形で樹木ではなくフラクタル図になる
- 角度の揺らぎは毎フレーム ±0.55rad×dt。1歩ごとの乱数を大きくすると枝が折れ線になる
- 枝が上限の 55% を超えたら次の植え付けでリセットする。上限まで詰めると描画が重くなり画面も埋まる
実装メモ
詰まりすぎないよう、育った枝が一定数を超えたら新しい木を植えるタイミングで自動的にリセットしています。分岐確率(branchProb)や深さ上限(MAX_DEPTH)を変えると茂り方の密度が変わります。
コード（コピーして使えます）
<div class="rw-wrap">
<canvas class="rw-canvas" aria-hidden="true"></canvas>
<p class="rw-hint">タップして枝を伸ばす</p>
</div>