NEORT版 : 燃やさなければ生きていけない_PROMARE_fire - NEORT

…というものを作りました。PCとwebカメラをお持ちの方はぜひ遊んでみてください。

技術解説
しくみとしては書いているとおりp5.jsとml5.jsを使っています。
ポーズ検知は以下のサンプルコードを参考にしました。
サンプルコードがp5.js Web Editorにあがってるってめちゃくちゃ便利ですね…
PoseNet_webcam - p5.js Web Editor
上記はwebカメラから取り込んだ映像から人体のポイントとボーンを検知・表示するというサンプルです。
今回の作品では上記のサンプルを参考に両手首の位置から「着火」するようにしています。
本当は手の位置から着火させたかったのですが、上記サンプルでは対応を見つけきれず…今後の課題です。

"バーニッシュの炎"のアニメーションは自分の過去の作品をベースに制作しました。

三角形が出現する際、p5.funcでイージングの動きをつけています。
p5.funcは思ってたよりずっと気軽にイージングを組み込めるのでオススメです。
p5.func | Function generators for p5.js
"炎"は全て三角形で構成しつつ、着火位置である手首を中心に出現させています。
着火位置から近いところはライトグリーン、少し離れたところからピンクに着色しています。どちらの色を外側/内側にするかはけっこう悩みました。
三角形パーティクルの大きさはグリーンはランダムですがピンクは外側にいくほど小さくしています。
また、炎っぽい動きに見えるといいなーと思いながら横方向の動きにnoiseを加えました。

今後の課題
今回ml5.jsを初めて触ったのですが、面白そうなライブラリなのでもっと使いこなせるようになりたいです！
ポーズ検知のしくみを組み込んだ作品をつくりたいと思ったら、今までだったらKinectなど特別なハードウェアを利用してきたのに、ブラウザとwebカメラだけでOKになったのはかなり革新的だと感じています。
他の機能も色々試していきたいですね。

ビジュアル面でいうと、プロメアにおける"バーニッシュの炎"の表現は本当に独特で、塗りのグラデーションやバチバチと爆ぜるように燃えるアニメーションなど再現しきれなかった点はたくさんあります。
特にグラデーションをはじめとした「塗り」の表現は今後の研究課題ですね…。ぺたっとした印象なのに透き通って見える、不思議なビジュアルだと感じています。