自己紹介原口 剛 (はらぐち ごう)
株式会社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メソッドにフレーム毎のコールバックを登録する
コールバック関数1秒間に何十回も呼ばれるコールバック内部に記述する処理のパフォーマンスには注意
パフォーマンス
今回は気にしてません。。。
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でもっとコード漁ってみます!