p5.jsできれいな花火をつくる-プログラミングはYouTubeで学ぶ-

今回のモチーフは花火です！

季節はまだ春にもならない2/21ですが...

前に、javascriptで花火を30分で作る方法みたいなのを見たことがあって作ってみたかったんですよね。季節外れではありますが、結構かわいい花火が作れるので、是非参考にしてみてください。

今回の完成品

重くなったら</>を押して再生を止めてください。

ずっと見てられる(・ω・`)　今年は花火見に行きたいですね。

もう少し工夫を凝らして、ハート型とかアサガオ型とか作ってみたいけど、どうすればいいんだろう？？

花火のポイント

①花火はベクトルの等加速度運動をつかって表現しています。

マイナスの速度ベクトルを持ったVyベクトルが0またはプラスとなった時に爆発するようになっています。

②あとは花火にlifespanを付け、lifespan<0となった花火は配列から削除することで、役目を終えた花火がいつまでも残り続けないようにしました。これで、時間が経つにつれて処理速度が落ちてくるのを防ぎました。

③花火がチラチラ瞬く効果もつけています。1draw毎に35%の確率でパーティクルが描画されるようにすることで表現しています。

今回の教材

www.youtube.comチャンネル登録者数20万人をこえるチャンネルThe Coding Trainのコーディングチャレンジ第27回が教材です。動画の後半に出てくるprocessing.js版は3Dバージョンの花火を作っています。そちらもおすすめです。

まとめ

花火を作ってみる人は、ぜひハート型の花火に挑戦してみてください！

関連記事