javascriptで花火打ち上げ

暑いですね。夏ですね。
だけど今年はコロナウィルスの影響で軒並み花火大会がなくなってしまいなんだかさみしい夏になりました。。。
ここ数年は毎年近所の花火大会行っていたのですが、今年はなし。。。

このまま夏が終わってしまうのはなんだか悲しい！！泣
悲しいです！！泣

悲しいので花火を自作することにしました！！ww
もちろん本物は作れないので、プログラムですww。

どうやって作ろうかな？？と思いながら調べてみたところ、javascriptで作ることができるとのこと！！
qiita.com

どうやら、p5.jsを用いるといいとのこと。
p5.jsは、
processingをjavascriptに移植したもの
とのことです。
p5js.jp
qiita.com

qiitaに上がっていたソースコードをそのまま流用しつつ、javascriptを別ファイルに移植してみました。
ソースコードの内容としては、p5.jsライブラリに渡すためのパラメータをセットしつつ必要なAPIをコールしている感じでした。

動かした結果、こちらのようになりました。

だけど、ただソースコピペするだけでは味気ないな。と思い、音声を付けることにしました！！
音声出力のコードはこちらになります。

audio.oncanplaythrough = (event) => {
    var playedPromise = audio.play();
    if (playedPromise) {
        playedPromise.catch((e) => {
            console.log(e)
            if (e.name === 'NotAllowedError' || e.name === 'NotSupportedError') { 
                console.log(e.name);
            }
        }).then(() => {
            console.log("playing sound !!!");
        });
    }
}

全体のソースはこちらに格納しました。
https://github.com/Elsammit/Fireworks.

音声あり：SoundOn ブランチ
音声なし：SoundOff ブランチ

こちらURLで花火が見れます。
夏を感じられるかな？と思いますので、ぜひ！！
※こちらは音がならないバージョンになります。
https://elsammit.github.io/Fireworks/

最後に、、、
これで少しは夏を感じられた気がします。そう思いたいだけかもww。
とりあえず自己満足w。