JavaScriptで顔追跡！あのフレンズになってみた！(ShanonAdventCalendar2017 - 23日目)

こちらは Shanon Advent Calendar 2017 の23日目の記事です

　はじめまして
　新卒エンジニアのTado56と申します．

　気づけはもう１年がたちます．あっという間でした．
　今回，Advent Calendar として投稿する内容ですが，以前から個人的に面白いと思っているライブラリの紹介をしようと思います．

　今回紹介するライブラリですが，clmtrackrと言うものになります．このライブラリが何をできるかと言うと，題名にもある通り顔追跡を行うことができます．
　このライブラリですが，画像や動画・Webカメラの映像から、顔や目や鼻などのパーツの位置や傾きを検出できます！検出した情報は座標として取得できるので，去年流行ったSNOWのように顔のパーツに絵を重ねるといったことができます．
　リンク先に様々なデモが用意されているので動かしてみてください．サンプルを動かすだけで楽しいです．

clmtrackrの動作サンプル

どうやって紹介しよう・・・

このライブラリをどのように紹介しようかと考えたときに，そういえば最近今年の漢字が発表されたなあ・・・と思い出しました．
　皆さんは今年の漢字は知っているでしょうか？選ばれた栄えある漢字は「北」になります．
　自分はこの漢字をみてピンときました．そうです！

けものフレンズ　です！

　あのおそらくたぶんきっと北のほうにあるだろうジャパリパークのことをいっているのだと思います．

いつかジャパリパークに行った時のために

いつかジャパリパークに行くことがあるかもしれません．そんな時のために自分もフレンズとして経験を積んでおくべきだと思います．そんな経験を積むのにぴったりな機能が今回紹介するライブラリ存在します．
　ライブラリを使用して検出した顔の情報を利用して，顔にマスクを被せることができる faceDeformer() というメソッドが存在します．これを利用して誰でも好きなキャラクターになりきることができます．
　サンプルでは，モナリザの顔を貼り付けたりしています．

ネタは決まった

　ということで，自分はアライさんが好きなので今回はアライさんになりきろうと思います．

　今回使用したアライさんの画像はこちら！大変凛々しいですね．

「アライグマ画像」で調べた画像

実装

　まず，アライさんの顔の情報を定義してあげないといけません．

　clmtrackrで検出される顔の特徴点は以下の画像です．

顔の特徴点

　手作業でアライさんの顔だろう場所の座標を定義しました．

var masks = {
    "araisan" : [[108,284],[124,317],[139,354],[160,389],[189,419],[220,440],[262,462],[324,477],[382,458],[426,423],[445,398],[464,369],[482,337],[501,301],[517,246],[444,219],[407,186],[349,186],[324,224],[159,253],[182,216],[229,207],[271,235],[175,280],[206,246],[244,270],[212,290],[210,269],[431,246],[381,227],[356,259],[394,269],[389,250],[297, 249],[269,332],[258,346],[279,372],[310,364],[340,367],[354,338],[342,320],[301,288],[295,369],[324,367],[246,396],[265,389],[291,382],[312,383],[333,377],[359,377],[384,382],[378,405],[364,432],[322,453],[275,447],[256,426],[279,426],[316,438],[355,418],[342,414],[313,417],[284,419],[308,338],[182,257],[228,253],[232,281],[192,286],[408,237],[366,243],[375,269],[414,259]]
  };

　顔を定義したら，ようやくライブラリを使って顔を検出していきます．
　今回使うclmtrackrのクラスは以下です．

clm.tracker()　　顔の追跡をしてくれるクラス
faceDeformer()　画像と特徴点を渡すとマスクの表示をしてくれるクラス

顔の検出

　clm.tracker()を初期化します．

　その後init()します.引数pModelは，pModelmodel_pca_20_svm.jsで定義されています．

　そしてstart()を実行すると設定完了です．ここで渡すvideoは，顔検出を行いたいvideoエレメントです．

  var tracker = new clm.tracker(); 
  tracker.init(pModel);
  tracker.start(video);

　getCurrentPosition() を実行すると動作します！

var positions = tracker.getCurrentPosition();

　これをsampleのように描画するには，こんな感じにすればできます．

function drawLoop() {
    var positions = tracker.getCurrentPosition();
    context.clearRect(0, 0, canvas.width, canvas.height); // context : canvas の context
    if (positions) {
      tracker.draw(positions);
    }
    requestAnimationFrame(drawLoop);
  }

マスクの表示

こちらも同じようにfaceDeformer()を初期化します．

var fd = new faceDeformer();
var fdcanvas = document.getElementById('fdcanvas');
fd.init(fdcanvas);

　今回のinitの引数は，マスク描画を行うcanvasのエレメントです．

　次に，マスク画像を読み込みます．

// get mask
  var maskimg = document.getElementById("araisan");
  fd.load(maskimg, masks["araisan"], pModel);

　第一引数はマスクに使用する画像のエレメントです．第二引数は特徴点．第三引数はモデルとなります．
　これで設定も終わったので，あとは検出した顔の情報に合わせて描画を行うだけです．

function drawMaskLoop() {
    var positions = tracker.getCurrentPosition();
    context.clearRect(0, 0, fdcanvas.width, fdcanvas.height);
    if (positions) {
      fd.draw(positions);
    }
    requestAnimationFrame(drawMaskLoop);
  }

実際の動作がこちら！

わーい！すごーい！たのしー！

　無事アライさんになれました！なんか猫耳がありますが顔の上が寂しかったのでとりあえずつけました！猫耳属性も付いたフレンズになれました！

　最近バーチャルYouTuberなる人たちが人気ですが，これなら自分もアライグマのバーチャルYouTuberとして参戦できそうです．

最後に

　変な人じゃないです．

SHANON Engineer's Blog