花火の音をわざと遅らせた話——やけにリアルな花火ジェネレーター制作記

執筆：神吉 修平（ALDONIX 代表／Webディレクション歴100件以上・兵庫県高砂市）

作ったもの

「やけにリアルな花火ジェネレーター」という、ブラウザだけで動く花火シミュレーター。夜の湖畔を舞台に、菊・牡丹・柳・千輪・冠菊の5種類の花火が自動で打ち上がる。基本は眺めるだけの観覧モードで、画面をタップするとその場所に一発上がる。設定パネルから玉の種類・号数（三号玉から尺玉まで）・色調・風・煙の量・音量を変えられて、スターマインのボタンもある。

外部ライブラリなし、画像素材なし、音声素材なし。描画はCanvas 2D、音はWeb Audio APIによるリアルタイム合成だけで動いている。エンジンとUIの2ファイル構成。

目指したのは「きれい」ではなく「実在感」

画面の中で花火をきれいに見せる作例は、世の中にすでにたくさんある。だからきれいさでは勝負しないことにした。目指したのは実在感。「やけにリアル」という名前は、そのまま設計方針でもある。

本物の花火大会の記憶を作っているのは、開花の華やかさそのものより、その周辺にある不完全なディテールではないか、というのが最初の仮説だった。光ってから一拍遅れて届く音。風に流れる煙。バラバラに消えていく星の余韻。虫の音。観客のざわめき。それなら、その「周辺」を全部作ればいい。

音のこと

先に音の話から。このツールの実在感は、半分以上が音でできていると思う。

音は、光より遅れて届く

このツールでいちばん効いていると思うのが、音の遅れ。破裂音は、開花の閃光からわざと遅らせて再生している。近い玉でおよそ0.3秒、遠い玉なら1.5秒近く。音速は光よりずっと遅いので、実際の花火大会でも光と音はズレる。あのズレを再現した瞬間に、画面の花火に距離が生まれた。

遅れだけではなく、遠い玉ほど音は小さく、こもって聞こえる。左右の定位は打ち上げ位置に追従する。少し遅れて対岸からの山彦が2回、左右に振れながら返ってくる。近くで尺玉が開くと、画面がかすかに揺れる。映像と音を合わせるのではなく、あえてズラすことが最大のリアリティ装置になった。ここは僕自身、作っていて意外だった。

音声ファイルはひとつも使っていない

「ドン」という破裂音、地を這うような超低域、千輪のポポポン、冠菊のパチパチ。さらには虫の音も観客のざわめきも、すべてWeb Audio APIのオシレーターとノイズから、鳴るたびにその場で合成している。音源ファイルは1つも存在しない。乱数が入っているので、厳密に同じ音は二度と鳴らない。

破裂音の芯はサイン波のピッチ急降下で、そこにローパスをかけたノイズを重ねる。近い玉だけ高域のクラック音が足され、胸に響く28〜34Hzのサブベースが玉のサイズに応じて重なる。全体には自前で生成したインパルス応答によるリバーブ（約3.4秒）がかかっていて、夜の空気の広さを出している。音割れはコンプレッサで抑えた。

環境音も合成で、虫の音は3.6kHzと4.2kHz帯の2声のパルス列。ざわめきは帯域ノイズで、八号玉以上が開いた後にふっと3倍ほど膨らんで、ゆっくり戻る。大玉のあとに観客がどよめく、あの間を作りたかった。

描画のこと

次に、見た目の話。こちらの主役は花火の「星」。

星は不揃いに燃え尽きる

一発の花火は、数百個の「星」の集まりでできている。尺玉なら基準285個。この星に、1個ずつ違う寿命と減速と瞬きの位相を持たせた。ばらつきはおよそ±15%。さらに終盤は確率的に描画を間引くことで、なめらかなフェードアウトではなく、チカチカと不揃いに燃え尽きる消え方になる。

均一なパーティクルがCGっぽく見えるのは、たぶんこの裏返しで、全員が同じ速度で生まれて同じ速度で死ぬものは自然界にほぼない。リアルさの正体は精密さではなく不揃いだった、というのがこのツールで得たいちばんの学び。

物理も少しだけ。星の初速は球面上に一様分布させてから2Dへ投影しているので、円ではなく「球」に開く。打ち上げの初速は目標高度から逆算していて、玉ごとにちょうど頂点で失速してから開く。柳は空気抵抗を弱く、重力を強くしてしだれ落ち、千輪は親星が開花から約0.75秒後に一斉に小花を咲かせる。

消えない残像のバグ

ひとつだけ技術の小話を。菊の尾を引く光跡は、専用レイヤーに描き溜めて毎フレーム少しずつ消していくのが定石になっている。ところがキャンバスの透明度は8bit、つまり256階調に丸められるため、微小なフェードでは値が下がりきらない。結果、うっすらした残像が永遠に画面に残り続けるバグに遭遇した。

対処は実務的で、8フレームに一度だけ強いフェードを混ぜて、残った値を完全にゼロへ落とす。理屈がわかれば数行の修正だったけれど、原因に気づくまでは夜空の隅の薄いシミとしばらくにらめっこしていた。

あの日見た花火の名前

最後の柱は、名前と色。あの日の花火にも、本当は一発ずつ、正式な名前があった。

玉には正式な名前がある

ひとつは語彙のリアリティ。UIは汎用スライダーの寄せ集めにせず、「打上設定」「玉の仕立て」「夜の条件」と、花火の言葉で組んだ。そして花火が開いた瞬間、画面には「打揚煙火　十号芯入割物／昇曲付五重芯変化菊」のような銘板が極太の明朝体で表示される。実際の煙火の表記に則って、昇り物・芯の重数・玉名を組み合わせて自動生成している。

通算の発数も「通算五十五発」と漢数字で数える。名前が本物だと、見え方も本物に寄る。逆に言うと、名前が嘘くさいとどれだけ描画を作り込んでも安っぽくなると思う。

色調「和火」のこと

色調のプリセットに「和火（わび）」を入れた。化学発色の薬品が入ってくる前、江戸期の花火は木炭系火薬の暗い橙一色だったと言われている。和火を選ぶと彩度だけでなく輝度も落ちて、闇の深い花火になる。派手さはないのに、これがいちばん長く眺めていられる。

遊び方

音はブラウザの自動再生制限もあって、初期状態ではオフにしています。右下のスピーカーボタンで音をオンにしてから眺めるのがおすすめです。ここまで書いてきたとおり、このツールの主役は音なので。

画面をタップするとその場所に一発上がります。右下の花火アイコンはスターマイン。十数発の連発から尺玉のフィナーレまで、約10秒の構成です。じっくり眺めるなら、設定から「和火＋風そよそよ＋煙多め」。豪快にいくなら「玉のサイズを尺玉に固定＋間隔ゆったり」が気に入っています。

まとめ

通信もサーバーも素材もなしで、物理と音響の計算だけで花火大会の空気ができてしまう。ブラウザというのは静かにすごい場所になったと思う。実物の花火大会の代わりには、もちろんならない。ただ、あの日の記憶をすこし呼び起こす装置くらいには、なれたかもしれない。

あの日見た花火の名前は、結局いまも分からないまま。でも、今夜画面に打ち上げた花火の名前なら、開いた瞬間に教えてもらえる。

神吉 修平SHUHEI KANKI

ALDONIX代表。兵庫県高砂市を拠点に、Webディレクターとして100件以上のサイト制作を指揮。現在は高砂・加古川・姫路エリアで、MEO×AI検索の集客サービス「きゃくくる」を運営。天然石とバンドと古いインターネットが好きで、たまにその方面の道具を作って公開している。