某アニメの悪役が使う「とっておきの手品」っぽい禁呪が使える(かもしれない)Webアプリ V3

© CC BY 4+ visibility1039
© CC BY 4+
visibility1039

10本の指全てに強力な火炎系呪文を宿す!?某アニメの悪役が使うあの危険な禁呪よりも、さらに強力な呪文があなたの手に... このWebアプリがあれば、あなたも大魔道士に!(シリーズのバージョン3)

link https://www.youtube.com/watch?v=agLX3__t0m8
動画
開発素材

ツール

システム構成

必要なもの

  • カメラ付きのPC(カメラは外付けのWebカメラなどでも可)
  • ブラウザ(Chrome推奨)

仕組み

この仕組みは、ブラウザ上で表示した Webページで動いています(いわゆる Webアプリになると思います)。

大まかな処理の流れは以下のとおりです。

処理の流れ

カメラ画像からの手・指の認識は、以下のバージョン2 の説明に書いてあるものとほとんど同じです。詳細は、以下のページの説明をご覧ください。

●某アニメの悪役が使う「とっておきの手品」っぽい禁呪が使える(気がするかもしれない)Webアプリ V2 | ProtoPedia https://protopedia.net/prototype/2734

過去のバージョンとの違い

そしてバージョン2 では、指先に炎の画像を少し透過させて重畳していただけでしたが、その部分はパーティクルシステム(以下、単に「パーティクル」と記載)を使った描画に置きかえています。

パーティクルとは、Wikipedia のページ の説明によると、以下の通りです。

ゲーム物理、モーショングラフィックス、コンピュータグラフィックなどで使われる技術のひとつで、たくさんの細かいスプライト画像、3Dモデル、またはその他のCGオブジェクトを使って、ある種の「ファジー」な現象をシミュレートするもの

パーティクルについては、今回の描画に用いている p5.js での公式サンプルでも、簡易な例として、円がある場所から湧き出してくるようなサンプルが公開されています。
簡単なサンプルだと、シンプルな図形を使ったものがよくあるのですが、その表示させるものをアルファチャンネル付の PNG画像(透明度を持つ画像)にすると見た目が大きく変わったりします(※ 以下の画像の煙の描画の例など)。

パーティクルの描画

そして、自分の場合は描画を行う際に、透明度を持った画像を使うのに加えて「色の加算合成」を行いました。色の加算合成は、単純な重ね塗りではない効果を得られて、自分が使った仕組みだと良く発光表現(グローエフェクト)で活用されている事例を多く見かけます。

色の加算

これを活用すると、炎のゆらめきのような表現を実現できます。そして、色を変えると印象が異なるものを作ることもできます。

ストーリー

作ったきっかけ

この作品は、バージョン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/

メンバー
  • user
    Yosuke Toyota @youtoy

関連イベント
  • event ヒーローズ・リーグ 20222022-09-05 開催

同じニオイがする作品
  • event ARでリアルタムに斬撃を飛ばす/Magic attacks effect by AR
  • event 楽器&ライフアシスト『アームワンダ』
  • event ーーーー勇者、今、目覚める刻ーーーー   「勇者目覚まし時計」
  • event ユニティちゃん!ARパークゴルフ!

Proto lovers ♥
user
user
user
user
user

作品を登録しよう

モノづくりしている人に、つくった作品を見てもらえ、リアクションがもらえるかも?

close

目次


Proto lovers ♥
user
user
user
user
user