HTML5花火大会が始まりました！
jsdo.itに集まった400以上の花火コードが、夏の夜空に打ち上がっています！
本当にどの花火もクオリティーが高くて、見るだけでも楽しめます。
花火のコードから学ぶcanvasの表現力
花火のコードの大半はHTML5のcanvas要素を使って描画されています。
canvasってなんだっけ？
javascriptから自由にグラフィックを描画できる要素です。
以下のエントリーにわかりやすくまとまっています。
図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。
canvasで花火を描くには？
花火のお手本コードから見ていきましょう。
fireworks - jsdo.it - share JavaScript, HTML5 and CSS
描画コードは複雑なのでロジックをひも解いていきましょう。
まず花火の元になるパーティクル（＝粒）を中心に描画します。
これらを勢いや重力などの数値にしたがって破裂させます。
1フレームごとに半透明の黒いレイヤーを重ね、古いパーティクルは徐々に消えていくように見せます。
以上が超ざっくりですが、花火の基本的なロジックです。パーティクルを移動させる部分は、実際にコードを見てもらうと理解が深まると思います。（とてもややこしいですが。。。）
ここまでできる、canvasの表現
お手本コードをフォーク（アレンジ）した作品や、オリジナルの花火がたくさん集まりました。
特に面白い作品をご紹介します。
文字がはじける花火
漢字でfireworks - jsdo.it - share JavaScript, HTML5 and CSS
画像をパーティクルに変換した花火
jsdo.it子ちゃん花火 - jsdo.it - share JavaScript, HTML5 and CSS
ねずみ花火
ねずみはなび - jsdo.it - share JavaScript, HTML5 and CSS
パーティクルじゃない花火
ぞわぞわ花火 - jsdo.it - share JavaScript, HTML5 and CSS
線香花火
線香花火 - jsdo.it - share JavaScript, HTML5 and CSS
花火が見れない人のためにプレビュー動画を作成しました
花火大会、まだまだ続きます！
HTML5花火大会、花火の投稿もまだまだ受け付けています！ぜひ「hanabi」とタグをつけて投稿してくださいね！