Leap MotionをJavaScriptで弄る

先日購入したLeap Motionが思った以上に面白そうだったので弄ってみました。

現在、Leap Motionがサポートしている言語が C++、Java、Python、C# and Unity、JavaScriptの5種類だったので、取り敢えずJavaScriptを使っていくつかのサンプルを作ってみました。（将来的にはObjective-Cにも対応するみたい）

サンプルコード

leap-motion-controller-example

準備

Leap Motionを接続して、アプリケーションをインストールします。

最後に、使用するページでleap.min.jsを読み込めば準備完了です。

ジェスチャーを拾う

Gesture Example

まずは一番簡単そうなジェスチャーを拾ってみます。

Leap Motionでは予め、Swipe、Key tap, Circle, Screen Tapのジェスチャー動作が拾えるようです。

「Leap.loop」で、Leap Motionから随時送られてくるモーションが取得できます。

第1引数のオプションに「{enableGestures: true}」とする事で、ジェスチャーが取得できるようになります。

Leap.loop({enableGestures: true}, function(frame){
});

「Leap.loop」のframeに色々とモーション情報が入っているみたいです。

「frame.gestures」でジェスチャーが拾えるようですが、名前の通り複数のジェスチャーが配列で入っています。

ジェスチャーの「.type」でジェスチャー（Swipe、Key tap, Circle, Screen Tap）が取得できます。

「.state」ではジェスチャーの状態（Start、Update、Stop）が取得できます。

但し、手元の端末では（Key tap, Screen Tap）のジェスチャーが（Stop）の状態しか拾えませんでした。

Leap.loop({enableGestures: true}, function(frame){
  $(frame.gestures).each(function() {
    typeValue.html(this.type);
    stateValue.html(this.state);
  });
});

指（1本）の軌跡を拾う

One Finger Position Example

次に指の軌跡を拾ってみたいと思います。

ジェスチャーと同様で「Leap.loop」で指の軌跡も取得できます。

「frame.fingers」に指の情報が入っています。こちらもジェスチャー同様に配列で複数の指情報が入っています。

今回は取り敢えず、1本の指のみを拾います。

「.tipPosition」に座標の「X, Y, Z」の順番で入っているので取り出します。

var x = frame.fingers[0].tipPosition[0];
var y = frame.fingers[0].tipPosition[1];
var z = frame.fingers[0].tipPosition[2];

座標について注意すべき所は、Leap Motion Controllerの真ん中から右上と手前に向かって正の座標が広がっているようです。

つまり、左上と奥は負の値が返ってきます。

その為、Canvasで図形を描く時に、X軸はCanvasのX軸センターをプラスして右にずらしたり、Y軸はCanvasとは方向が異なるので高さからマイナスして反転したりしています。

Leap_Axes

Leap Motion Developerより

指（複数）の軌跡を拾う

Multiple Finger Position Example

最後に複数の指の軌跡を拾ってみたいと思います。

複数の指の場合にも、先ほどの1本指の場合と殆ど同じですが、「frame.fingers」に複数の指の情報が入っているのでこれを使って図形を描きます。

認識できる指の本数は10本までかと思ったのですが、どうも制限は無い？ようです。（15本まで認識した）

Leap Motion Controllerを下に置いているので、指が上下で重なると認識が難しい様です。

まとめ

モーション情報は比較的簡単に取得することができました。

他にも腕の数や、指の異動距離など色々な情報がとれるので試してみたいと思います。

LeapJS API Document

因みに、LeapJSのサイトにはその他にもサンプルが沢山あるのでソースを覗いてみると色々と勉強になると思います。

LeapJS Examples

正直、空中で各種動作をしていると手がだるいなぁ〜っと思いました。

っと呟いたら、 @kama_AGE さんから「ゴリラアーム」について教えてもらいました。

名前があるなんて！

確かに未来的なインタフェースでファーストインプレッションは注目するんですが、実用で使うとなるとある程度限定的な場面で活躍するインターフェースなのかなっと感じました。

Enjoy the develop of the Leap Motion.