Processing Advent Calendar 2020 参加記事
Processingアドベントカレンダー10年目おめでとうございます🎉🎉🎉
そして私も10年皆勤賞です。称えてくれ！

今回はp5.jsと機械学習系ライブラリで制作した過去のボディ・フェイス・ハンドトラッキング作品の解説を書いていきます。
紹介する作品はすべてブラウザから動作します。
webカメラを入力元にしている作品もありますのでぜひ試してみてください！
また、KinectやLeap Motionなど特殊な機材を必要としません。
昨今のあれそれで、リモート会議用にPCに接続されたwebカメラをかなりの人が持ってるはずなので、
この辺の技術を題材に制作するのって今かなりアツいと思っています！
利用しているライブラリの情報やTipsも書いているので皆様じゃんじゃんインタラクティブなwebアートを生み出してください！！

ボディトラッキング
ml5.jsのPoseNetで人体のポーズ推定ができます。
PoseNet - ml5.js
公式サンプル : p5.js Web Editor | PoseNet_webcam

上記サンプルでは、左右の目や鼻などの顔のパーツの上に点を打ったり、
体のおおまかなポイントをつないで棒人間のように表示しています。

以下、作例です。

映画「プロメア」より三角形の特殊な炎を出せる種族「バーニッシュ」ごっこができる作品です。
ハンドトラッキングにまだ手をつけていなかったので、ボディトラッキングで手首の位置を検知して処理しています。
手首から三角形のオブジェクトを上方向に炎のようなゆらぎをかけつつ動かしています。
手を動かすと追従するので、バーニッシュのように「燃やし尽くす」イメージの動作ができます。
誕生した三角形がやがて燃え尽きるように小さくなっていくのもお気に入りポイントです。
詳しい内容は以下の記事に書いたのでこちらもご覧ください。
p5.jsとml5.jsでプロメア/バーニッシュごっこ(手から炎が出るぞ！) : だらっと学習帳


emojiをランダムに表示してお面をかぶっているように表示する作品です。
鼻の位置を検知し、その上にかぶせるようにemojiを描画しています。
写っている顔の大きさ = 顔とwebカメラの距離に応じてemojiの大きさを調整しています。
これは右耳と左耳の距離に応じてemojiのサイズを変更しているためです。
webカメラに正面から映り込むという想定で、
左右の耳の距離が大きければ顔も大きく映っている→emojiも大きくする…というしくみです。


鼻の位置を検知し、鼻が画面左側にあればセーラー服の女の子の画像が、
右側にあれば魔法少女に変身した画像が表示される作品です。
イラストの後ろのパーティクルの色も、変身後の方がより派手な色合いになっています。
お菓子のおまけによくある「チェンジングカード」「レンチキュラー」をイメージしています。
スマホで表示すると、インカメラの内容を検知するので、スマホを傾けてまさにチェンジングカードのような体験ができます。


ダンス動画を検知対象とし、映っているダンサーさんの左右の手首の位置にオブジェクトを表示させています。
アニメーションの内容としては上記プロメアモチーフ及びその元となった作品と同じなのですが、
入力元をwebカメラではなく動画ファイルとしています。
OpenProcessingは動画も素材としてアップロードできるんですね。

---

以下の作品はPoseNetではなくBodyPixを用いています。
人体を検知してそれ以外の背景を真っ黒にしてくれるので、人体を切り出してくれます。
BodyPix - ml5.js
公式サンプル : p5.js Web Editor | BodyPix_Webcam


BodyPixで人体以外の背景を真っ黒にしつつ、その下にアニメーションを敷くことで、
人間のシルエットの形にアニメーションを切り取っている作品です。

フェイストラッキング
ml5.jsのFaceApiで顔の検知ができます。
FaceApi - ml5.js
公式サンプル : p5.js Web Editor | FaceApi_Video_Landmarks

上記サンプルでは、webカメラに映った顔のポイントが線でつながれ、
映像の顔の上にかぶさるように表示されます。

以下、作例です。

顔のパーツを検知して、上唇と下唇の離れ具合から口が開いているかどうかを判定し、
口が開いている状態であればその中心へ向かって吸い込まれるように食べ物のemojiをアニメーションさせています。
カービィのイメージですね。
口を開けたり閉じたりして遊んでみてください！


上記と同じく上唇と下唇の離れ具合から口が開いているかどうかを判定しています。
口が開いている場合はその中心から音声の波形が表示されます。
ツイートにも書いていますが、マクロス7のイメージです。


人物画から顔を検知し、口の右端・左端の位置を取得して、
そこから顎までの箇所を切り取り、マウスの横移動に合わせて切り取られた「顎」がパクパクと動きます。
腹話術の人形みたいですね。
あるいは昔なつかし「ペリーの肉声」FLASH的な…。
顎については「均整のとれた顔においては 口から顎までの距離 = 鼻の下部から口までの距離 * 2 となる」という説に基づいて切り取っています。
また、切り取りにおいては横方向まっすぐにしか切り取れないため、
口が水平に閉じた人物画を選ぶのにも苦労しました。

ハンドトラッキング
ハンドトラッキングについてはこちらのライブラリを利用しています。
LingDong-/handpose-facemesh-demos: 🎥🤟 8 minimalistic templates for tfjs mediapipe handpose and facemesh
公式サンプル : p5.js Web Editor | mediapipe-hand-p5-tf174-handv1

サンプルでは手の大まかのポイントが表示され、その間が線でつながれています。
片手のみ取得可能のようです。

今調べてみたらml5.jsにも搭載されているようですね。
Handpose - ml5.js
公式サンプル : p5.js Web Editor | Handpose_Webcam

以下、作例です。

動作イメージをつかむため、まずは指先の頂点をつないで図形を表示する作品をつくりました。


人差し指の先端から図形が出る作品で、中指の曲げ伸ばしによって色と図形の種類が変わります。
中指の先端と第一関節のy軸方向の上下関係によって、中指が曲がっているか伸びているかを擬似的に判定しています。


マクロスFよりおなじみランカちゃんの「キラッ☆」のハンドサインをすると手から星が飛び出す作品です。
上記作品と同様、指の曲げ伸ばし判定を指の先端と第一関節で判定しています。
親指のみx軸方向で比較していて、それ以外はy軸方向で比較しています。
親指の判定において左右方向をみる都合、必ず右手でやる必要があります。


じゃんけんをしたら必ずemojiの手が勝つ「いじわるな」じゃんけんというコンセプトです。
親指以外の片手4本の指が何本曲げられているかをカウントし、
曲がっている指の本数が4本ならプレイヤーはグーを出している、2本ならチョキ、0本ならパーを出していると判定し、
必ず勝つ手をemojiに出させる…というしくみです。
親指を考慮しないので、左右どちらの手でも遊べるようになりました。


5本の指の先端にそれぞれ色違いのニョロニョロしたオブジェクトがついてまわる作品です。
カメラと手の距離 = 手がどれだけ大きく映っているかを、人差し指の付け根から小指の付け根までの距離で擬似的に判定し、オブジェクトの大きさに反映させています。
ニョロニョロは円の連なりで、小さい円は大きい円の追従をするようにしているため、
このようなニョロニョロとした動きになりました。


簡単にダイナミックなインタラクションが作れるので、すごく楽しいです！！
皆様もぜひ作ってみてくださいね〜！！！