MediaPipeを使いたいだけで作った「L❤VE NANODA」

「L❤VE NANODA」は、カメラの前で両手を使ってハートを作ると、画面にハートが現れて音が鳴るWebアプリです。

作った理由はシンプルで、MediaPipeを使ってみたかったから。
…それだけ。

クリエイティブコーダーの作品が好きで

クリエイティブコーダーの作品を見るのが好き。

Flashから始まりProcessingへたどり着き、気がついたらその界隈をウォッチしてる。
最近は昔ほど追えていないけれど、今でもときどき見ている。

マウスの動きに反応する作品もあれば、Webカメラに映る顔や手に反応する作品も多い。
そういうのを見るたびに、自分でもこういうのを作ってみたいなと思っていた。

たまたまXで話題になってた動画があって、どうやってるのか調べてみたらMediaPipeを使ってるみたいだった。

MediaPipeはGoogleが公開している、カメラ映像から手や顔の位置を推定してくれるライブラリ。
学習済みのモデルがすでに用意されていて、ブラウザからでもそのまま使える。

手なら手首や指の関節など21か所の座標を返してくれる。
自分で学習させなくても、手がどこにあって指がどう開いているかがわかる。

サンプルを見て、これなら自分にも何か作れそうだと思った。
とにかく何でもいいから試してみたくて、とりあえず作ってみたのが「L❤VE NANODA」です。

ただ、MediaPipeが教えてくれるのは「指先がどこにあるか」まで。
「この手はハートを作っている」とは教えてくれない。

ハートかどうかの判定は自分で書いてみようと思った…けど、まったくうまくいかないので、結局ここは素直にCodexに任せてチューニングしてもらいました。

やっていることは、指先の位置関係のチェック。

これを全部満たしたら「ハートを作っている」とみなして、人差し指の間からハートを出す。

距離は手の大きさを基準に比べているので、カメラに近くても遠くても同じように判定できる。
左右の手を区別していないから、一人が両手で作っても、二人が片手ずつ出し合っても反応する。

AIのおかげで適当UIも自分には難しい実装もはかどる！

でも正直に言うと、これはかなり愚直なやり方だと思っている。

本当は手でハートを作った写真をたくさん集めて、自分でモデルに学習させられたら、こんなふうに条件を一つずつ書く必要はなかった。
（でも自分でやったらかなり重くなりそうだけど、どうなんだろう？）

ルールで判定するやり方は、自分が想定した形にしか反応しない。
手の角度が少し違ったり、人によって手の形が違ったりすると途端に反応しなくなる。
実際、「L❤VE NANODA」でもうまく反応しないことが多い。

とはいえ、学習済みモデルの出力にルールを組み合わせるのは、よくある作り方でもあるらしい。（ChatGPTしらべ）
手の座標を取るところまではちゃんと機械学習に頼っているわけで、自分でできるところとできないところをうまく分けられたのかなとも思う。

それでも、いつかは自分で学習させられるようになれたらなと思ってる。

初心者向けの本はすでに持ってて、最低限の原理を学習したり、MNIST（手書き数字の画像を見分ける定番の練習問題）をやったりしたけれどそこで立ち往生している感じ。
マイコンボード買ったけどLEDを点灯させるところで止まっちゃうのと同じような感じなのかな。

持ってるのは下の本。

いまはもっと良い初心者向けの書籍があるのかもしれない。

MediaPipeには、自分で用意した手の写真を使って、ジェスチャーを学習させられる仕組みもあるみたい。
ただ、これは片手ずつ形を見分けるものなので、両手で作るハートにそのまま使えるかはまだわからない。

次はそのあたりを試してみたい。