LEAP MOTIONJS実装編

自己紹介原口 剛 (はらぐち ごう)

株式会社gumi所属

ドラジェネのUIエンジニア

Ghrgc

LEAP MOTION CONTROLERモーションセンシング対応入力デバイス

Minority Report

手と指の動きを感知して立体的な操作100分の1mmの動きも感知コンパクト(縦30mm、横80mm、厚み12.7mm)

Win･Mac共に使用可能安価。79.9ドル(約8,000円)

この装置は、

C++C#JavaPythonObjective-CJavaScript

Leap Motion APIライブラリ

GitHubで検索したら、

JavaScriptが圧倒的に多い

SDKはJavaScriptを選択

「Leap Motion」の

leapjs•GitHub https://github.com/leapmotion/leapjs

•ドキュメント https://developer.leapmotion.com/docs

準備htmlファイルで、leapjsをロードするだけ<script src="https://raw.github.com/leapmotion/leapjs/master/leap.js"></script>

ジャンケン

指の数で分岐指の認識がシビアなので、2本以下、4本以下、それ以外と範囲に遊びを持たせた。

使い方Leap.loopメソッドにフレーム毎のコールバックを登録する

コールバック関数１秒間に何十回も呼ばれるコールバック内部に記述する処理のパフォーマンスには注意

パフォーマンス

今回は気にしてません。。。

Frameオブジェクト手指の座標、動き、角度など、全ての情報Frameオブジェクトから欲しい情報を参照して使うだけ

Frameオブジェクトframe.fingers frame.hands frame.gestures

frame.fingers認識している指の情報fingers自体は配列frame.fingers.length → 認識している指の数

frame.handsLeapMotionが認識している手の情報fingers同様に配列

frame.handsLeapMotionが認識している手の情報fingers同様に配列

今回は使ってないです。。。

frame.gestures4種類のジェスチャー

circle swipeKeyTapScreenTap

frame.gestures4種類のジェスチャー

circle swipeKeyTapScreenTap

指でぐるぐる円を描く

frame.gestures4種類のジェスチャー

circle swipeKeyTapScreenTap

指でぐるぐる円を描く手をサッと動かす

frame.gestures4種類のジェスチャー

circle swipeKeyTapScreenTap

指でぐるぐる円を描く手をサッと動かす画面タップ

frame.gestures4種類のジェスチャー

circle swipeKeyTapScreenTap

指でぐるぐる円を描く手をサッと動かす画面タップkeyTapの奥方向

frame.gesturesジェスチャーの状態

start updatestop

frame.gesturesジェスチャーの状態

start updatestop

ジェスチャーの開始

frame.gesturesジェスチャーの状態

start updatestop

ジェスチャーの開始ジェスチャの途中

frame.gesturesジェスチャーの状態

start updatestop

ジェスチャーの開始ジェスチャの途中ジェスチャの終了

まとめイベントループ内でFrameオブジェクトから必要な情報を選んで使用するだけなので、非常に簡単です。LMCの特性にはコツがある。MacBookのファンがうるさかったGitHubでもっとコード漁ってみます!

ご清聴ありがとうございました。