Face in face

さて、どうして前エントリで、まだちょっと完成とは言い辛いものを紹介したかというと実はどうしてもこちらのツールを紹介したかったからなのです。久しぶりに素晴らしいものを作ってしまった・・・。

先ほどのスクリーンキャストではface.jsは完璧に私の顔を追従しているように見えますが、実際にやってみると意外としくじるというか、特に縁の目立つメガネを付けると大変辛いです。全然認識してくれません。私は眼鏡がないとなんにも見えないのでこれ結構きつい。


http://screencast.com/t/EOUn4n0Fc8gx

認識に失敗して、先の画像にあった黄緑の点がほとんど表示されないことが分かります。

さらに、face.jsに付いてくるデータは正面向き水平な顔で学習したものなので顔がちょっとでも傾くと認識に失敗します。「そのくらいいいじゃないか」と思うかも知れませんが、ちょっと考えてみてください。人間が顔を左右に移動するときはふつうこう動くわけです。

見れば分かるように両端は水平じゃありません。で、認識失敗です。そりゃもちろん

こんな風にダルシムみたいな動きを披露すれば認識してくれるけど、目の前のディスプレイにはそんな自分の姿が映し出されてるわけですよ。夜中にインド舞踊している自分の姿を見ながらプログラミングするのは可能であれば避けたい。

そこで作成したのがこれです。


http://ando-yasushi.appspot.com/wavycamera/face.html

iPhone用ウェブアプリは、顔画像として白人男性のAverage Faceを採用して認識しやすさを極限まで高め、さらにdevicemotionイベントをハンドリングして顔を常に水平に保ちます*1。では早速使ってみましょう。


http://screencast.com/t/goRCyFhyy

ご覧のとおり顔面の傾きに関わらず完璧に顔面の位置に追従していることが分かります。これさえあればface.jsを利用したアプリの開発効率大幅アップは間違いありません。ぜひとも本サービスを皆さんのアプリ開発にお役立てください。

*1:知らなかったけどいつのまにかJSで加速度センサーの値が取れるんですね