某アニメの悪役が使う「とっておきの手品」っぽい禁呪が使える（かもしれない）Webアプリ V3
Yosuke Toyota
@youtoy
作ったきっかけ
この作品は、バージョン1、バージョン2 と試作してきたこのシリーズの、バージョン3 です。
最初にバージョン1 を作った時のきっかけは、元々、Googleさんの MediaPipe Hands の公式デモを見かけたというのが発端です。それを試した際に、高速で高精度な認識がブラウザ上で手軽に使えることに感動し、あれこれ手を加えて自分の作品に組み込むようなことを試していきました。そんな中で、昔読んでいたマンガ（わりと最近、リメイク版のアニメも放映されていましたが...）に出てきた悪役のキャラの呪文がふと頭に浮かび、それに類するものが作れるのではないかという思いつきで、実際に実装してみました。
過去のバージョンなどについて
以下の V2 は、2021年のヒーローズ・リーグに応募した作品で、今回の バージョン3 は 2021年のヒーローズ・リーグに応募してみます。
●某アニメの悪役が使う「とっておきの手品」っぽい禁呪が使える（気がするかもしれない）Webアプリ V2 | ProtoPedia https://protopedia.net/prototype/2734
●某アニメの悪役が使う「とっておきの手品」っぽい呪文が使えた気になる（かもしれない）Webアプリ | ProtoPedia https://protopedia.net/prototype/2147
BGM素材
動画の BGM は、こちらを使わせていただきました
↓
●BGM | 無料 BGM・効果音のフリー音源素材 | Springin’ Sound Stock
https://www.springin.org/sound-stock/category/bgm/
必要なもの
- カメラ付きのPC（カメラは外付けのWebカメラなどでも可）
- ブラウザ（Chrome推奨）
仕組み
この仕組みは、ブラウザ上で表示した Webページで動いています（いわゆる Webアプリになると思います）。
大まかな処理の流れは以下のとおりです。
カメラ画像からの手・指の認識は、以下のバージョン2 の説明に書いてあるものとほとんど同じです。詳細は、以下のページの説明をご覧ください。
●某アニメの悪役が使う「とっておきの手品」っぽい禁呪が使える（気がするかもしれない）Webアプリ V2 | ProtoPedia https://protopedia.net/prototype/2734
過去のバージョンとの違い
そしてバージョン2 では、指先に炎の画像を少し透過させて重畳していただけでしたが、その部分はパーティクルシステム（以下、単に「パーティクル」と記載）を使った描画に置きかえています。
https://twitter.com/youtoy/status/1543249042209382401
パーティクルとは、Wikipedia のページ の説明によると、以下の通りです。
ゲーム物理、モーショングラフィックス、コンピュータグラフィックなどで使われる技術のひとつで、たくさんの細かいスプライト画像、3Dモデル、またはその他のCGオブジェクトを使って、ある種の「ファジー」な現象をシミュレートするもの
パーティクルについては、今回の描画に用いている p5.js での公式サンプルでも、簡易な例として、円がある場所から湧き出してくるようなサンプルが公開されています。
簡単なサンプルだと、シンプルな図形を使ったものがよくあるのですが、その表示させるものをアルファチャンネル付の PNG画像（透明度を持つ画像）にすると見た目が大きく変わったりします（※ 以下の画像の煙の描画の例など）。
そして、自分の場合は描画を行う際に、透明度を持った画像を使うのに加えて「色の加算合成」を行いました。色の加算合成は、単純な重ね塗りではない効果を得られて、自分が使った仕組みだと良く発光表現（グローエフェクト）で活用されている事例を多く見かけます。
これを活用すると、炎のゆらめきのような表現を実現できます。そして、色を変えると印象が異なるものを作ることもできます。