Processingで家で花火大会を実施する方法

![firework.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81919/474641c1-8d5a-4828-1da7-4e418ce299b1.gif)

# Stay Homeでも花火大会をしたい
　中々外に出れない今日この頃、せめて5歳の娘に家でささやかな花火大会をしてやりたいなと思っています。家にプロジェクタがあるので、家で壁とか大きめのスクリーンに花火を映して、花火気分を味わいたいなと思い、少しプログラミング組んでみることにしました。

　プログラミングで花火の打ち上げ制御とか、最適な火薬の混合率の調合とかを期待した人はごめんなさい！

# Processingで花火をプログラミング
　最初は慣れているPythonで作るか、Touch DesignerでVJっぽくしようかなと思ったのですが、映像と音を手軽に扱えることと、プログラミングに慣れていない人にも手軽に扱えることからProcessingで作ってみました。

　リポジトリは以下です。

<a href="https://github.com/karaage0703/p5_firework"><img src="https://github-link-card.s3.ap-northeast-1.amazonaws.com/karaage0703/p5_firework.png" width="460px"></a>

# 使い方
　あらかじめProcessing 3をインストールして、以下のライブラリをインポートしておいてください。

- minim（オーディオライブラリ）
- PostFx（ビジュアライゼーション）

　MacやLinuxでコマンドに慣れている人なら以下コマンド実行して、Processing3で開いて実行すれば動きます。

```sh
$ git clone https://github.com/karaage0703/p5_firework && cd p5_firework
$ curl -o firework_sound.mp3 https://taira-komori.jpn.org/sound/event01/fireworks2.mp3
```

　よくわからない人は、以下のコードをコピペして`p5_firework.pde`というファイルで保存して、同じディレクトリに`firework_sound.mp3`という花火の音声ファイルを用意してください。

[p5_firework.pde](https://raw.githubusercontent.com/karaage0703/p5_firework/master/p5_firework.pde)

　私は[こちらのサイト](https://taira-komori.jpn.org/event01.html)の花火大会１の音声を使用しました。音声ファイルは、適当な短さに加工して使っています。

　コードを実行して、キーボードの1〜3を押すと、数字に応じて大きさの異なる花火が、冒頭のGIF動画のように打ち上がります。

# コードに関して
　以下のコードを参考にしています。というかほぼそのままです。

[Mod: Coding Challenge #27: Fireworks!（2D+3D）](https://takawo.hatenablog.com/entry/2017/09/28/192942)

[Fireworks Coding Challenge #27](https://thecodingtrain.com/CodingChallenges/027-fireworks.html)

　クラスうまく使って花火実現しているのですね。もし自分で書くともっとベタな書き方しそうです。

　変えたところは以下くらいです。

- 数字キーを押すと花火が打ち上がるようにした
- 数字キーに応じて花火のサイズが変わる
- 花火が打ち上がって行くとき、徐々に色がかすれて行くようにした
- その他、好みで無駄に修正（元の方が良かったかも…）

# 改善したい項目
　以下を改善したいなと思っています。

- 花火の音をライセンスフリーなものに変更（自分で作る？）
- 花火をもっとリアルにしたい
- 色々な形の花火のパターンが増やしたい
- マルチプラットフォーム(Win/Mac）にバイナリを配布（プログラム詳しく無い人でも簡単に使えるように）

# 改善1（2020/08/14）

![firework_20200814.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81919/f12a1c3c-3e91-a9d4-0f90-22acc203dcad.gif)

@tomo_makes さんの[PR](https://github.com/karaage0703/p5_firework/pull/1)により、花火がグッとリアルになりました！

まだまだPR募集中です！

# 改善2（2020/08/15）
　さらに改善しそう！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">続 <a href="https://twitter.com/hashtag/Processing?src=hash&amp;ref_src=twsrc%5Etfw">#Processing</a> でおうち花火大会。少し現実に近づいた。レンダリングをP2Dに、ポストエフェクトにPostFX(Bloomフィルタ)。<br><br>Firework, Particle, BallShellというクラス構成だけど、色んな花火の動きバリエーションをどこにどう実装するか、と普段と違う脳みそで考えるので楽しい。 <a href="https://twitter.com/hashtag/dailycoding?src=hash&amp;ref_src=twsrc%5Etfw">#dailycoding</a> <a href="https://t.co/ms1sbGE7wz">pic.twitter.com/ms1sbGE7wz</a></p>&mdash; tomo-makes@図解速習DEEP LEARNING (@tomo_makes) <a href="https://twitter.com/tomo_makes/status/1294422866180464640?ref_src=twsrc%5Etfw">August 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 改善3(2020/08/20)
　どんどん改善し続けています！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E3%81%8A%E5%AE%B6%E8%8A%B1%E7%81%AB%E5%A4%A7%E4%BC%9A?src=hash&amp;ref_src=twsrc%5Etfw">#お家花火大会</a> <a href="https://twitter.com/hashtag/dailycoding?src=hash&amp;ref_src=twsrc%5Etfw">#dailycoding</a> 楽しくなってしばらく書いていましたが、 <a href="https://twitter.com/karaage0703?ref_src=twsrc%5Etfw">@karaage0703</a> さんのアイコンが夜空に輝くところまできて一区切り。<br><br>最初考えたものはほぼ実装でき、後はリファクタ。<a href="https://twitter.com/hashtag/processing?src=hash&amp;ref_src=twsrc%5Etfw">#processing</a> のOOP練習になり、アニメーション一般をどんな文法、気持ちで扱いたくなるか理解が深まった。 <a href="https://t.co/RVA1R23X4w">pic.twitter.com/RVA1R23X4w</a></p>&mdash; tomo-makes@図解速習DEEP LEARNING (@tomo_makes) <a href="https://twitter.com/tomo_makes/status/1296051758825758721?ref_src=twsrc%5Etfw">August 19, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# まとめ
　Processingで家で花火大会をするべくコーディングしてみました。最低限のものは出来たのですが、娘をよろこばせるために更に改善したいところなのですが、衝撃な事実に気づいてしまいました。自分のコーディング能力が低い！

　特にクラス使ったコーディングとか、あんまり出来ないのですよね。というわけで、Qiitaのプログラム詳しい人になんとかしてもらえないかなと思い、公開してみました。気の向いた方は是非改善のPRください。ちなみに花火大会は、来週の週末くらいを予定しています。GitHubにPRをいただけたら嬉しく思います。

　良いものができたら、多くの人に家で花火大会を楽しんで貰えたら幸いです。

# 実際にお家で花火大会を実施した様子
　作成したコードで、自宅で花火大会を実施してみた様子をブログに書きました。

[プログラミングとプロジェクタを使って娘のためにお家花火大会を開催してみた](https://karaage.hatenadiary.jp/entry/2020/08/28/073000)

# 変更履歴
- 2020/08/30 ブログへのリンク追加