EyeTribe + Processing

既に2ヶ月前ですが、「The Eye Tribe」(以下EyeTribe)という視線追跡デバイスを使った記事を読みました。

漫画を読むときの視線の計測

「ああ、おっぱいに目が行くんだ」という興味深いことが分かりました。

EyeTribe自体は廉価な視線追跡デバイスということで、その界隈では知られているようです。

注文してようやく届いたので、実際に手元のMac (OS X El Capitan) で遊んでみます。具体的には、視線追跡と描画が連動するサンプルアプリを実行するところまでやってみます。

簡単に用語の説明

• EyeTribe ... 廉価であることがアピールした視線追跡デバイス
• Processing ... ビジュアルアートに強いお手軽プログラミング環境

視線追跡を行うこと自体にProcessingは要りません。ただ、視線追跡しつつ、PC画面上に描画する場合に便利なために(EyeTribeに限らず)視線追跡関連のデバイスと組み合わされて利用されることが多いのかなぁ、という小並感。

購入

上の記事を読んだ頃にはちょうどスプラトゥーンを良くやっていて、プレイ中の視線追跡したいよねぇみたいな話がありました。

また個人的にも、作業環境で視線で面白いこと出来ないかなぁと思うことは多かったので、お気軽に試せるのであればと思いポチ。3週間くらいで届くのかなぁワクワクなんて思ってました。

ところがこのEyeTribe、発送が想像よりはるかに遅かったのでした。想定では(Priority Shippingをつけて)3週間と思っていたところ、8月5日発注で届いたのは10月5日です。ピッタリ2ヶ月かかったわけですね。その間に個人的なスプラトゥーン熱は下火に。

今注文ページ見ると5〜8週間とあります。えーとこれ、当時3週間だったよなぁ(´・ω・｀)

セットアップ

EyeTribeはUSB接続でPC類と繋がります。ソフトを購入するとキャリブレーション用のソフトがWindows、Mac用にダウンロードできるようになります。多分公開はされていません。

セットアップの雰囲気はこのページからわかります。デバイスを開封後USBで接続し、ソフトをインストールして、キャリブレーションをして、それで準備完了。開封から10分弱ほどでしょうか。Windowsの方がノウハウが多いらしいのですが、セットアップについて言えば、Macだからといって特別なトラブルはありませんでした。

視線追跡データの取得

付属のフロントエンドでも、視線追跡の結果をJSONの羅列みたいな形でファイルに保存するところまでは出来ます。こんな感じ。

{"category":"tracker","request":"get","statuscode":200,"values":{"frame":{"avg":{"x":594.4358,"y":-149.0280},"fix":true,"lefteye":{"avg":{"x":543.6356,"y":-120.9369},"pcenter":{"x":0.3386,"y":0.2689},"psize":39.2625,"raw":{"x":563.1609,"y":-113.7497}},"raw":{"x":628.2265,"y":-150.2556},"righteye":{"avg":{"x":693.2921,"y":-186.7615},"pcenter":{"x":0.6353,"y":0.2949},"psize":39.2774,"raw":{"x":693.2921,"y":-186.7615}},"state":7,"time":974158932,"timestamp":"2015-10-06 07:12:50.388"}}}
{"category":"tracker","request":"get","statuscode":200,"values":{"frame":{"avg":{"x":598.0563,"y":-149.8015},"fix":true,"lefteye":{"avg":{"x":547.2388,"y":-120.8604},"pcenter":{"x":0.3372,"y":0.2694},"psize":39.0480,"raw":{"x":587.4836,"y":-118.2605}},"raw":{"x":637.8450,"y":-156.1416},"righteye":{"avg":{"x":688.2064,"y":-194.0226},"pcenter":{"x":0.6338,"y":0.2948},"psize":39.4544,"raw":{"x":688.2064,"y":-194.0226}},"state":7,"time":974158967,"timestamp":"2015-10-06 07:12:50.423"}}}

値の意味はこちらにあります。デフォルトでは30fpsのようですが、設定を変更すると60fpsくらいには出来るらしいです。

デーモンと通信するには

EyeTribeのソフトは2層、データを取るデーモンとそれを取得するフロントエンドに分かれています。開発者ページ を見ればどういう設計になっているか分かります。

視線追跡する層はデーモンとして起動させておき、公式のライブラリ(C, C++, Java)を経由してイベントと値を取得するイメージです。

＃ ここではAndroidについては考えませんが、あるみたい？

Processing

上記のJSONデータにはタイムスタンプが含まれてるので、理屈の上ではこれで視線追跡が出来たことになります。ただ、マシン上のイベントや描画と連動させたい場合にはこれだけだと辛い印象です。

ざっくりググった範囲では、視線追跡だとProcessingを使う例が多いです。上記の記事でもProcessingを使っている、とあります。

Processingはビジュアルアート向けのプログラミング環境と言えばいーんでしょうか。例えばこの動画 で紹介している例なんてのを見ると使われ方が分かります。リファレンス を見るともう少し雰囲気が分かるかも。気分的にはキャンバス1枚でお手軽に始めるCGプログラミングみたいな雰囲気に感じます。

Processingのチュートリアルの最初の例が以下の１行です。

ellipse(50, 50, 80, 80);

これで円が描けます。

キャンバス上にマウスがあるとそれを追跡して円を描く例が次の通り。同じくチュートリアルからです

void setup() {
  size(480, 120);
}

void draw() {
  if (mousePressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

480x120だとちょっと小さい感じがするので800x600にした結果が以下の通り。マウスの軌道にしたがって円が描かれました。

EyeTribeとProcessingを組み合わせる。

マウスイベントの代わりにEyeTribeのイベントをProcessingに乗っければ、視線の動きに併せて簡単にお絵かきすることが出来そうです。双方Java対応がありますので、EyeTribeをProcessing対応にするという作業がソフトウェア的に無理筋という感じもしません。事実ググると、EyeTribe + Processingの実装例は複数見つかります。

今回は以下のライブラリを使いました。

ライブラリ自体をProcessingの開発環境に認識させた上で、同ライブラリ内のサンプルアプリ「WeightedGrid」を実行してみます。

このサンプルアプリはまず全画面モードで初め単色のスクリーンが現れた上で、視線を向けた部分から徐々に隠れた絵が現れてくるというものです。確かに視線追跡をしている感じがします。

実行中のスクショが以下のとおり。

一度フルスクリーンで青色が描画された後、目が向いた方向の色がある意味「剥がれ」て猫が出てきます。この例では猫の顔を中心に視線を集中させているわけです。配置の問題か、ちょっと「剥がし」方にコツが要りましたが、実際にEyeTribeのイベントがProcessing上で受け取れていることが確認できます。

ちなみにサンプルアプリのソースコードは以下にあります。

ドライバ込みでも大した行数ではないです。Processingやるなぁ。

おまけですが、Processing 3.0のダウンロードには数十分かかりました。寄付したら変わったんだろうか。

感想

少なくともデバイスさえ届けばここまではすぐにできそうです。

後は視線追跡自体のノウハウみたいのが効いてくるのかなぁと思います。私にはサッカードのいなし方とかよくわからんのです。

ここまで調べる中で

• http://ukcatalogue.oup.com/product/9780199697083.do
• http://www.researchgate.net/publication/220811146_Identifying_fixations_and_saccades_in_eye-tracking_protocols

という情報が引っかかりましたが、知らない分野やなぁ……