AfterEffectsでモーショントラッキングした座標をスプレッドシートに書きだしてCanvasで再現させる

先日こちらのイベントに参加する機会がありまして、その時にAfterEffectsのキーフレームの情報をスプレッドシートに書き出せることを知ったので、それを利用してWeb上で何か作ってみるところまでをやりたいと思います。

とりあえずスプレッドシートに書きだすための方法を簡単に説明します

プロジェクトがあることを前提に話をすすめます。取得したいソースをクリックして選択します。ここでは「サングラス.png」のトランスフォームから「位置」を選択しています

After Effectsのメニューから『編集』→『コピー』をクリック Excel、Numbersなどのスプレッドシートを開き、ペースト。

こんな感じになります。最初にソースのデータ詳細が書かれていて、その後に先ほど選択した『位置』の情報が書かれている感じです。ものすごく簡単ですよね。

で、これで何ができるの？

という話になると思います。例えばスプレッドシートの値ををXMLやJSONに変換しておきます。

それをJavascriptなどで読み込んで、時間に併せて要素の座標位置をあてていけば、 AfterEffectsで作成したアニメーションをWeb上で再現したり、不透明度、スケールの値をCSSに置き換えて同じような効果を作成するといったことに応用出来るのではないかと思います。

というわけで本題に戻ります

AfterEffectsに搭載されているモーショントラッキングという機能を利用した動画を作成し、 Canvasでそれを再現してみようかと思います。

モーショントラッキングとは、動画の特定のエリアの動きを記録して、そこに併せて別の要素を動かす機能です。 (ex.顔に併せてモザイクを動かすとか)

モーショントラッキングを行う方法についてはここでは詳しくは解説しませんが、 After Effects Styleさんのこちらで解説されている方法を読めば誰にでもすぐ出来ると思うので、興味を持った方がいれば是非試してみてください。

動画の作成と座標の書き出し

今回利用したどーもくんの動画はこちらより素材として利用させて頂き、制作を行いました。

今回は目の辺りをトラッキングして、サングラスの画像を追従させてみます。

元動画

movie from turusuke on Vimeo.

これにトラッキングをつけてあげると

movie2 from turusuke on Vimeo.

こうなります。・・・かなり雑ですね。すみません。

今回はこのサングラスをCanvasで再現しようと思うので、サングラスのソースからトランスフォーム→『位置』を選択して、上記で記載したように編集→コピーを選択します。

Webで扱えるようにJSONファイルに変換します

スプレッドシートに貼り付けをしたら、実際にデータとして利用できるようにJSONファイル化してみましょう。

先ほどの貼り付けをしたものからx,yの座標を含めて必要なフレーム数のところまで選択してコピーします。

下のサービスを使うとCSVをJSONやXML形式に変換してくれるので、

Mr. Data Converter

こちらの"Input CSV or tab-delimited data. "と書かれたテキストエリアにペーストします。

その下のセレクトボックスより"JSON -Properties-"を選択。 JSONが作成され下のテキストエリアに表示されるので、これを保存します。

ただしこのままだとキーに半角スペースが入っていて扱いづらいので、エディタなどで半角スペースを削除またはキーの名前を変えるなどしておきましょう。

こんな感じのJSONファイルにしておきます。

CanvasはVideoタグで再生されている映像を画像として取得して描写させることができるので、これを利用してsetTimeOutで繰り返し動画から画像を作ってCanvasに貼り付けつつ、その上からサングラスの画像を先程のJSONファイルから読み取った座標の位置にあてていきます。

実装していきます

完成品のデモはこちら

jQueryを使っていますのでheadなどで読み込んでおいてください

<script type="text/javascript" src="jquery.js"></script>

HTML

<div class="box2">
<h2>元動画</h2>
</div>
<div class="box">
<h2>トラッキングの加工を施した動画</h2>
</div>
<div class="box">
<canvas id="c" width="320" height="240"></canvas>
<h2>キャンバスで再現させようとした物</h2>
</div>

Javascript

$(function() {
  var count = 0; // キャンバスを使う準備
  var cEle = document.getElementById('c');
  var cCtx = cEle.getContext('2d'); // 元動画
  var vEle = document.getElementById('v'); // トラッキング加工した動画
  var vEle2 = document.getElementById('v2'); // Canvas上でトラッキングする画像を変数imgに入れておく
  var img = new Image(); img.src = "sunglass.png"; // 座標を記録したJSONファイルを取得
  var ajaxObj = { url: "pos.json" } // pos.jsonの取得が完了したらビデオの再生、Canvasの描写を開始する

  $.ajax(ajaxObj).done(function(res) {
    vEle.play(); // 元動画の再生 vEle2.play(); // 比較用動画の再生
    copyFrame(res); // 取得したJSONを渡す
  }); // 元動画をCanvasに描写してサングラス画像をトラッキング

  function copyFrame(res) {
    cCtx.drawImage(vEle, 0, 0); // ビデオの描写を開始する
    // 位置がずれたので微調整
    cCtx.drawImage(img, res[count].Xpixels - 20, res[count].Ypixels - 10);
    count++;
    if (count < res.length) {
      setTimeout(function() { 
        copyFrame(res)
      }, 30); 
    } 
  }
});