HTML5 Canvasで表現する打ち上げ花火
Canvasで作られた花火は国内外問わず数多く存在しますが、Canvasの表現力を知るには自身で試行錯誤する事が何よりの収穫。
というわけで、今回の作品はCanvasで表現する打ち上げ花火となります。
デモ
百聞は一見にしかず。まずはデモをご覧ください（Chrome推奨）。
基本的な仕組み
jsdo.itで開催されたHTML5花火大会の花火のサンプルコードを参考にしていますが、
大まかに仕組みを説明すると以下のようなロジックになります。
- パーティクル（粒）を火花に見立てて、花型に描画することで花火を表現
- 花火の形（花型や星型など）は、数学関数（Math.xxx）を組み合わせて作る
- Canvasにはいわゆるアニメーション機能は存在しないため、花火が散る表現はパーティクルを少しずつ移動させながら繰り返し描画
- 繰り返し処理の際に、Canvasに半透明の黒を重ねる事で、中心から徐々に消えていく様を表現
花火の打ち上げ仕様（流れ）
以下の流れを繰り返しています。
- フェーズ1
- 打ち上げ
- フェーズ2
-
爆発
→大きな円単発：70%→フェーズ3へ
→円複数：10%
→ハート複数：10%
→星複数：10% - フェーズ3
-
爆発
→円複数：33.3%
→ハート複数： 33.3%
→星複数：33.3%
フェーズ2で大きな円が選択された場合、
同じ場所で連続して次の花火（フェーズ3）を表示します。
フェーズ2で大きな円以外が選択された場合は単発で終了し、
次の打ち上げ（フェーズ1）に戻ります。
課題
- PC版Webkit以外でのパフォーマンス改善
-
Chrome、Firefox、IE9、Safariでのパフォーマンス比較は
Safari > Chrome > Firefox > IE9 でした。PC版Webkit以外は処理が追いつかず、滑らかに描画されないため、
当面は火花（パーティクル）の数を減らすことで対応しています。CSS3アニメーションもそうですが、現状ではWebkitが最もパフォーマンスが高く頭一つ抜けています。
ブラウザも日々進化していますので、これからに期待ということで。
今後挑戦してみたいこと
- バリエーションの追加
-
打ち上げ花火の爆発や散るエフェクトに変化をつけたものや、
これも処理速度の課題がありますが、打ち上げ花火と噴火花火を組み合わせるなど。 - スターマインの実現
-
現実世界の花火大会で必ずと言って良いほど、プログラムに組み込まれるスターマイン（連射）。
これはブラウザの処理速度の課題や、Canvasにアニメーションメソッドが追加されれば、ぐっと敷居が下がりますが、
現状では実装にかなりの工夫が必要です（実現してもWebkitですらまともに見れないかもしれません）。