Screenshots
Overview
概要
日本の打上花火をブラウザで再現する、夏の花火シミュレーターです。菊・牡丹・柳・千輪などの『玉種』を物理パラメータの違いとして設計し、和火/洋火の配色、打上音と破裂音の距離遅延(音速表現)まで含めて花火大会の情緒を再現します。夜景のシルエット(山並み・街灯り・五重塔)もすべてコードで描き、画像アセットはゼロ。閃光を見てから約1〜2秒遅れて音が届く、あの感覚が見どころです。
How to use
遊び方・使い方
画面をタップした位置へ花火が打ち上がり、目標高度で破裂します。下部のコントロールバーで玉種(菊・牡丹・柳・千輪ほか)、色系統(和火/洋火)、サイズ、スターマイン、音量を切替。右上のメニューからスクリーンショット保存や自動モードを利用できます。初回は音を有効化する開始ボタンから始めます。閃光の後に少し遅れて響く破裂音で、距離感まで楽しめます。
Tech stack
技術スタック
TypeScriptNext.js 16React 19Canvas 2DWeb Audio APITailwind CSS v4
追加のランタイム依存はなく、パーティクル・音合成・乱数(mulberry32)まで標準APIで自前実装。描画はCanvas 2Dで最大約6000粒子を扱い、小さい火花はfillRect、大きい光はグロースプライトで描き分けます。書体はしっぽり明朝とNoto Sans JP、設定はlocalStorageに保存。
Highlights
工夫した点
- 玉種8種を粒子数・初速・重力・空気抵抗・寿命・残像・二段破裂などのパラメータ表で厳密に定義(千輪は親から子が二段で開く)。パーティクルはオブジェクトプールでゼロアロケーション
- 音はすべてWebAudioで手続き合成し、打上音はノイズのバンドパススイープ、破裂音は低域の衝撃＋ノイズバースト＋パチパチの3層。閃光からの距離を高度から求め、d/340秒(最大2秒)遅らせて再生し距離減衰と山彦も付与
- 夜景の背景(藍グラデ・シード固定の星・月・中点変位ノイズの山並み・ビル窓・五重塔)をコードで描画。低スペック時は45fpsを下回ると粒子係数を自動で下げる
To improve
改善したい点
- Canvas 2Dのため超大規模な同時打上では描画負荷が上がる(WebGL版は今後)
- 玉種・配色のバリエーションや、割物(型物)の形状表現をさらに増やしたい
- 音の距離遅延・残響のリアリティに調整の余地がある
What's next
今後の展望
- WebGLレンダラによる粒子数の大幅な拡大
- 花火大会のプログラム(タイムライン)を組んで再生する機能
- 録画・GIF書き出しや、構成の共有