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
上記サンプルでは、左右の目や鼻などの顔のパーツの上に点を打ったり、
体のおおまかなポイントをつないで棒人間のように表示しています。
以下、作例です。
#プロメア #PROMARE 興収10億円突破おめでとうございますのファンアートです!PCとwebカメラを使ってバーニッシュごっこ!手から炎が出ます。p5.jsとml5.js製です。
— レオナ (@reona396) August 20, 2019
#Processing #p5js #OpenProcessing #ml5js
燃やさなければ生きていけない_PROMARE_fire - OpenProcessing https://t.co/zaX6lD5Os4 pic.twitter.com/VETqn5hkzl
映画「プロメア」より三角形の特殊な炎を出せる種族「バーニッシュ」ごっこができる作品です。
ハンドトラッキングにまだ手をつけていなかったので、ボディトラッキングで手首の位置を検知して処理しています。
手首から三角形のオブジェクトを上方向に炎のようなゆらぎをかけつつ動かしています。
手を動かすと追従するので、バーニッシュのように「燃やし尽くす」イメージの動作ができます。
誕生した三角形がやがて燃え尽きるように小さくなっていくのもお気に入りポイントです。
詳しい内容は以下の記事に書いたのでこちらもご覧ください。
p5.jsとml5.jsでプロメア/バーニッシュごっこ(手から炎が出るぞ!) : だらっと学習帳
p5.js&ml5.jsで顔にemojiを重ねて遊べるスケッチを作りました!
— レオナ (@reona396) September 15, 2019
顔が大きく映ってるとemojiも大きく表示されます!webカメラで試してみてください〜#Processing #p5js #ml5js #OpenProcessing #NEORT
Face&Emoji
OpenProcessing :https://t.co/VbLjqQCfAL
NEORT :https://t.co/fQkZ4sS1sA pic.twitter.com/mEl5Pma70b
emojiをランダムに表示してお面をかぶっているように表示する作品です。
鼻の位置を検知し、その上にかぶせるようにemojiを描画しています。
写っている顔の大きさ = 顔とwebカメラの距離に応じてemojiの大きさを調整しています。
これは右耳と左耳の距離に応じてemojiのサイズを変更しているためです。
webカメラに正面から映り込むという想定で、
左右の耳の距離が大きければ顔も大きく映っている→emojiも大きくする…というしくみです。
p5.js新作投稿!
— レオナ (@reona396) December 28, 2019
ml5.jsを使って「見る角度や方向を変えると柄が変わるカード」っぽいものを作ってみました!webカメラで遊んでみてください!#Processing #p5js #creativecoding #OpenProcessing #ml5js
【チェンジングカード(レンチキュラーもどき)】
OpenProcessing :https://t.co/twD7gYn0tO pic.twitter.com/dZhyFHSiZN
鼻の位置を検知し、鼻が画面左側にあればセーラー服の女の子の画像が、
右側にあれば魔法少女に変身した画像が表示される作品です。
イラストの後ろのパーティクルの色も、変身後の方がより派手な色合いになっています。
お菓子のおまけによくある「チェンジングカード」「レンチキュラー」をイメージしています。
スマホで表示すると、インカメラの内容を検知するので、スマホを傾けてまさにチェンジングカードのような体験ができます。
p5.js新作スケッチ投稿!
— レオナ (@reona396) February 22, 2020
AIST Dance Video Databaseのダンス動画と #機械学習 用ライブラリml5.jsを組み合わせて、ダンサーの手の動きにアニメーションをつけてみました!#Processing #p5js #ml5js #OpenProcessing
Dance and Animation ver.0.1.0 - OpenProcessing https://t.co/1hUSXKxwAR pic.twitter.com/25coJ1yhjt
ダンス動画を検知対象とし、映っているダンサーさんの左右の手首の位置にオブジェクトを表示させています。
アニメーションの内容としては上記プロメアモチーフ及びその元となった作品と同じなのですが、
入力元をwebカメラではなく動画ファイルとしています。
OpenProcessingは動画も素材としてアップロードできるんですね。
---
以下の作品はPoseNetではなくBodyPixを用いています。
人体を検知してそれ以外の背景を真っ黒にしてくれるので、人体を切り出してくれます。
BodyPix - ml5.js
公式サンプル : p5.js Web Editor | BodyPix_Webcam
p5.js新作投稿!
— レオナ (@reona396) December 16, 2019
ml5.jsと組み合わせて人の影に模様をつけてみました。
webカメラの前で遊んでみてください!#Processing #p5js #ml5js #creativecoding #generative #OpenProcessing #NEORT
【Triangle Shadow】
OpenProcessing :https://t.co/5zeFXuj3cp
NEORT :https://t.co/czGDj2W558 pic.twitter.com/93UQ3T0HhR
BodyPixで人体以外の背景を真っ黒にしつつ、その下にアニメーションを敷くことで、
人間のシルエットの形にアニメーションを切り取っている作品です。
フェイストラッキング
ml5.jsのFaceApiで顔の検知ができます。
FaceApi - ml5.js
公式サンプル : p5.js Web Editor | FaceApi_Video_Landmarks
上記サンプルでは、webカメラに映った顔のポイントが線でつながれ、
映像の顔の上にかぶさるように表示されます。
以下、作例です。
p5.js新作投稿!
— レオナ (@reona396) December 28, 2019
ml5.jsで口を開けたらアニメーションが発生するインタラクション作品を作ってみました!webカメラで遊んでみてね!#Processing #p5js #ml5js #OpenProcessing #NEORT
【口をあけて「すいこみ」!】
OpenProcessing :https://t.co/SV6rtpvFlE
NEORT :https://t.co/Yu5SOMPw9M pic.twitter.com/xE9ffEKxqR
顔のパーツを検知して、上唇と下唇の離れ具合から口が開いているかどうかを判定し、
口が開いている状態であればその中心へ向かって吸い込まれるように食べ物のemojiをアニメーションさせています。
カービィのイメージですね。
口を開けたり閉じたりして遊んでみてください!
p5.jsスケッチ新作投稿!
— レオナ (@reona396) January 21, 2020
口を開けると音の波形が口から出ます。しゃべったり歌ったりして遊んでみてください!
マクロス7からインスパイアされました🔥🎤🎸#Processing #p5js #ml5js #creativecoding #OpenProcessing
【Sound Energy】
OpenProcessing :https://t.co/PaQmgUei2h pic.twitter.com/1PUQogF1xe
上記と同じく上唇と下唇の離れ具合から口が開いているかどうかを判定しています。
口が開いている場合はその中心から音声の波形が表示されます。
ツイートにも書いていますが、マクロス7のイメージです。
p5.jsスケッチ新作投稿!
— レオナ (@reona396) February 4, 2020
機械学習ライブラリml5.jsで名画の顔パーツ位置を判定。マウスを横に動かすと口がパクパク動く!?#Processing #p5js #creativecoding #OpenProcessing #ml5js
【HELLO, Masterpieces】
OpenProcessing :https://t.co/mUzRwsbhaE pic.twitter.com/qI8mNfvJyH
人物画から顔を検知し、口の右端・左端の位置を取得して、
そこから顎までの箇所を切り取り、マウスの横移動に合わせて切り取られた「顎」がパクパクと動きます。
腹話術の人形みたいですね。
あるいは昔なつかし「ペリーの肉声」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
以下、作例です。
p5.jsでハンドトラッキングできたよー!#Processing #p5js #プログラミング #dailycoding #creativecoding #OpenProcessing #NEORT
— レオナ (@reona396) May 30, 2020
【Hand and Shape】
OpenProcessing :https://t.co/Vhb3vyNGj5
NEORT :https://t.co/HuM1BdPVa9 pic.twitter.com/XlFjUT5dTf
動作イメージをつかむため、まずは指先の頂点をつないで図形を表示する作品をつくりました。
p5.jsで人差し指トラッキング&中指曲げ伸ばしインタラクション!
— レオナ (@reona396) May 31, 2020
ハンドトラッキング+簡易的に指の曲げ伸ばしを検知☝️✌️#p5js #プログラミング #dailycoding #creativecoding #OpenProcessing #NEORT
【Pointer Finger】
OpenProcessing :https://t.co/53fpsCaSj8
NEORT :https://t.co/oxPOApURqI pic.twitter.com/Z40nC4uJBE
人差し指の先端から図形が出る作品で、中指の曲げ伸ばしによって色と図形の種類が変わります。
中指の先端と第一関節のy軸方向の上下関係によって、中指が曲がっているか伸びているかを擬似的に判定しています。
p5.jsでハンドトラッキング+簡易ポーズ検出!
— レオナ (@reona396) June 3, 2020
マクロスFよりランカちゃんの「キラッ☆」をやると星がバチバチに出るやつ作ってみた!右手でやってみてね🌟#p5js #dailycoding #creativecoding #OpenProcessing #NEORT
OpenProcessing :https://t.co/RkyugU573T
NEORT :https://t.co/ecoYCdMPjc pic.twitter.com/Ye3YIGxNya
マクロスFよりおなじみランカちゃんの「キラッ☆」のハンドサインをすると手から星が飛び出す作品です。
上記作品と同様、指の曲げ伸ばし判定を指の先端と第一関節で判定しています。
親指のみx軸方向で比較していて、それ以外はy軸方向で比較しています。
親指の判定において左右方向をみる都合、必ず右手でやる必要があります。
p5.jsでハンドトラッキング+簡易ポーズ判定…ということでいじわるなじゃんけんインタラクション作ってみた!#p5js #プログラミング #dailycoding #creativecoding #OpenProcessing #NEORT
— レオナ (@reona396) June 11, 2020
【Rock Paper Scissors!】
OpenProcessing :https://t.co/DdcASsBsCv
NEORT :https://t.co/425HtJFZz3 pic.twitter.com/NT0MKehMLS
じゃんけんをしたら必ずemojiの手が勝つ「いじわるな」じゃんけんというコンセプトです。
親指以外の片手4本の指が何本曲げられているかをカウントし、
曲がっている指の本数が4本ならプレイヤーはグーを出している、2本ならチョキ、0本ならパーを出していると判定し、
必ず勝つ手をemojiに出させる…というしくみです。
親指を考慮しないので、左右どちらの手でも遊べるようになりました。
p5.jsと #tensorflow でハンドトラッキング!
— レオナ (@reona396) August 21, 2020
カラフルな軌跡を出してみました✋🌈
ちょいカクカクだけど楽しいからok!#Processing #p5js #プログラミング #dailycoding #creativecoding #OpenProcessing #NEORT
OpenProcessing :https://t.co/ZIGbNvxx3m
NEORT :https://t.co/09X219Xrmf pic.twitter.com/jDKjMEDOJj
5本の指の先端にそれぞれ色違いのニョロニョロしたオブジェクトがついてまわる作品です。
カメラと手の距離 = 手がどれだけ大きく映っているかを、人差し指の付け根から小指の付け根までの距離で擬似的に判定し、オブジェクトの大きさに反映させています。
ニョロニョロは円の連なりで、小さい円は大きい円の追従をするようにしているため、
このようなニョロニョロとした動きになりました。
簡単にダイナミックなインタラクションが作れるので、すごく楽しいです!!
皆様もぜひ作ってみてくださいね〜!!!