絶対に勝てないジャンケンを作ってみました。

1. LEAP MOTION
JS実装編

2. 自己紹介
原口 剛 (はらぐち ごう)
株式会社gumi所属
ドラジェネのUIエンジニア
Ghrgc

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

4. 手と指の動きを感知して立体的な操作
100分の1mmの動きも感知
コンパクト(縦30mm、横80mm、厚み12.7mm)
Win･Mac共に使用可能
安価。79.9ドル(約8,000円)
この装置は、

5. C++
C#
Java
Python
Objective-C
JavaScript
Leap Motion APIライブラリ

6. GitHubで検索したら、
JavaScriptが圧倒的に多い
SDKはJavaScriptを選択
「Leap Motion」の

7. leapjs
•GitHub
https://github.com/leapmotion/leapjs
•ドキュメント
https://developer.leapmotion.com/docs

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

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

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

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

12. パフォーマンス
今回は気にしてません。。。

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

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

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

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

17. frame.hands
LeapMotionが認識している手の情報
fingers同様に配列
今回は使ってないです。。。

18. frame.gestures
4種類のジェスチャー
circle
swipe
KeyTap
ScreenTap

19. frame.gestures
4種類のジェスチャー
circle
swipe
KeyTap
ScreenTap
指でぐるぐる円を描く

20. frame.gestures
4種類のジェスチャー
circle
swipe
KeyTap
ScreenTap
指でぐるぐる円を描く
手をサッと動かす

21. frame.gestures
4種類のジェスチャー
circle
swipe
KeyTap
ScreenTap
指でぐるぐる円を描く
手をサッと動かす
画面タップ

22. frame.gestures
4種類のジェスチャー
circle
swipe
KeyTap
ScreenTap
指でぐるぐる円を描く
手をサッと動かす
画面タップ
keyTapの奥方向

23. frame.gestures
ジェスチャーの状態
start
update
stop

24. frame.gestures
ジェスチャーの状態
start
update
stop
ジェスチャーの開始

25. frame.gestures
ジェスチャーの状態
start
update
stop
ジェスチャーの開始
ジェスチャの途中

26. frame.gestures
ジェスチャーの状態
start
update
stop
ジェスチャーの開始
ジェスチャの途中
ジェスチャの終了

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

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