必要なもの
- カメラ付きのPC（カメラは外付けのWebカメラなどでも可）
- ブラウザ（Chrome推奨）
仕組み
この仕組みは、ブラウザ上で表示した Webページで動いています（いわゆる Webアプリになると思います）。
大まかな処理の流れは以下のとおりです。
カメラ画像からの手・指の認識は、以下のバージョン2 の説明に書いてあるものとほとんど同じです。詳細は、以下のページの説明をご覧ください。
●某アニメの悪役が使う「とっておきの手品」っぽい禁呪が使える（気がするかもしれない）Webアプリ V2 | ProtoPedia https://protopedia.net/prototype/2734
過去のバージョンとの違い
そしてバージョン2 では、指先に炎の画像を少し透過させて重畳していただけでしたが、その部分はパーティクルシステム（以下、単に「パーティクル」と記載）を使った描画に置きかえています。
透明度付きの PNG画像を利用した #p5js 実装のパーティクルシステムの、色調整の続き。
— you (@youtoy) July 2, 2022
見た目が炎っぽい感じになった赤系のものから、青系の色のものも作ってみた。
青バージョンはついでに、パーティクルが消えるまでの時間やパーティクルのサイズなど、少し変えてみた。 https://t.co/Y061OPR97C pic.twitter.com/0boRSj8FMr
パーティクルとは、Wikipedia のページ の説明によると、以下の通りです。
ゲーム物理、モーショングラフィックス、コンピュータグラフィックなどで使われる技術のひとつで、たくさんの細かいスプライト画像、3Dモデル、またはその他のCGオブジェクトを使って、ある種の「ファジー」な現象をシミュレートするもの
パーティクルについては、今回の描画に用いている p5.js での公式サンプルでも、簡易な例として、円がある場所から湧き出してくるようなサンプルが公開されています。
簡単なサンプルだと、シンプルな図形を使ったものがよくあるのですが、その表示させるものをアルファチャンネル付の PNG画像（透明度を持つ画像）にすると見た目が大きく変わったりします（※ 以下の画像の煙の描画の例など）。
そして、自分の場合は描画を行う際に、透明度を持った画像を使うのに加えて「色の加算合成」を行いました。色の加算合成は、単純な重ね塗りではない効果を得られて、自分が使った仕組みだと良く発光表現（グローエフェクト）で活用されている事例を多く見かけます。
これを活用すると、炎のゆらめきのような表現を実現できます。そして、色を変えると印象が異なるものを作ることもできます。
Facebookに投稿する
X(Twitter)に投稿する
