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

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

あの日見た花火の名前を、僕はまだ知らない。

ふと、そんなことを思って、玉名つきの花火シミュレーターを作ってしまいました。集客の話は出てきません。花火と、音と、消え方の話だけです。

作ったもの

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

外部のライブラリなし、画像の素材なし、音の素材なし。描画はCanvas 2D、音はWeb Audio APIでその場で合成しているだけです。エンジンと画面の2ファイルでできています。

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

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

本物の花火大会の記憶を作っているのは、開花の華やかさそのものより、そのまわりにある不完全な細部なんじゃないか。最初にそう考えました。光ってから一拍遅れて届く音。風に流れる煙。バラバラに消えていく星の余韻。虫の音。観客のざわめき。それなら、その「まわり」を全部作ればいい、と。

音のこと

このツールの実在感は、半分以上が音でできていると思っています。

音は光より遅れて届く

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

遅れだけではなく、遠い玉ほど音は小さく、こもって聞こえるようにしています。左右の定位は打ち上げた位置に追従し、少し遅れて、対岸からの山彦が2回、左右に振れながら返ってきます。近くで尺玉が開くと、画面がかすかに揺れます。映像と音をぴったり合わせるのではなく、あえてずらす。それがいちばんのリアルさの仕掛けになったのは、作っていて意外でした。

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

「ドン」という破裂音、地を這うような低い音、千輪のポポポン、冠菊のパチパチ。それに虫の音も観客のざわめきも、すべてWeb Audio APIの発振器とノイズから、鳴るたびにその場で合成しています。音のファイルは1つもありません。乱数が入っているので、まったく同じ音は二度と鳴りません。

破裂音の芯は、サイン波の音程を急に下げたもの。そこに、高い音を削ったノイズを重ねています。近い玉だけ高い破裂音を足し、胸に響く28〜34Hzの低い音を玉の大きさに合わせて重ねています。全体には、自分で作った残響（約3.4秒）をかけて、夜の空気の広さを出しました。音割れはコンプレッサで抑えています。

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

描画のこと

描画の主役は、花火の「星」です。

星は不揃いに燃え尽きる

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

均一な粒子がCGっぽく見えるのは、たぶんこの裏返しです。全員が同じ速さで生まれて同じ速さで消えるものは、自然の中にはほとんどありません。リアルさの正体は精密さではなく不揃いだった。これが、このツールを作っていちばん学んだことでした。

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

消えない残像の不具合

菊の尾を引く光の跡は、専用の層に描きためて、毎フレーム少しずつ消していくのが定番です。ところがキャンバスの透明度は8bit（256階調）に丸められるので、ほんの少しずつ消そうとすると値が下がりきりません。結果、うっすらした残像が、いつまでも画面に残り続ける不具合にぶつかりました。

直し方は地味で、8フレームに一度だけ強く消す処理を混ぜて、残った値を完全にゼロに落としています。理屈が分かれば数行の修正でしたが、原因に気づくまでは、夜空の隅の薄いシミとしばらくにらめっこしていました。

あの日見た花火の名前

あの日の花火にも、本当は一発ずつ、正式な名前がありました。

玉には正式な名前がある

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

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

色調「和火」のこと

色調のプリセットに「和火（わび）」を入れました。化学的に色を出す薬品が入ってくる前、江戸時代の花火は、木炭の火薬の暗い橙色一色だったと言われています。和火を選ぶと、鮮やかさだけでなく明るさも落ちて、闇の深い花火になります。派手さはないのに、個人的には、これがいちばん長く眺めていられます。

遊び方

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

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

まとめ

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

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

神吉 修平SHUHEI KANKI

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