HTMLのcanvasの2Dコンテキストでちょっとした粒子表現による視覚効果を行うサンプル
JavaScriptの講座で教えている学生さんからHTMLで特定の場所にちょこっとエフェクトを出してみせる簡単なサンプルとか書いてくれたら嬉しいなー的な話があったので、ちょこっと作ってみました。
特に高度な何かとかは使っていないけれど、粒子ベース的な考え方で2Dのエフェクトを実現してみたい場合には基礎的ながらも妥当な設計や実装を踏まえているので一定の参考資料になると思います。
なお、サンプルそのままではランダムに選択する部分画像がベタ塗りの四角ですが、☆や♡や何かのアイコンにしてみたり、パターンを増やしたり、各要素がくるくると回転する様にしてみたり、軌道を複雑化してみたり、そうした工夫を加えると、この程度のエフェクトでも楽しい効果が現実的に実現できるでしょう。また、粒子ベースだとか基礎的な物理シミュレーションによる挙動と言っても、各パーツを大きくしてモコモコとした雲が重なりあいながらふわふわと発生して散り行く様なエフェクトも同じ基本で実現できますヨ(・∀・)ｂ
