LEAP MOTION
JS実装編
自己紹介
原口 剛 (はらぐち ごう)
株式会社gumi所属
ドラジェネのUIエンジニア
Ghrgc
LEAP MOTION CONTROLER
モーションセンシング対応入力デバイス
Minority Report
手と指の動きを感知して立体的な操作
100分の1mmの動きも感知
コンパクト(縦30mm、横80mm、厚み12.7mm)
Win・Mac共に使用可能
安価。79.9ドル(約8,000円)
この装置は、
C++
C#
Java
Python
Objective-C
JavaScript
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.hands
LeapMotionが認識している手の情報
fingers同様に配列
frame.hands
LeapMotionが認識している手の情報
fingers同様に配列
今回は使ってないです。。。
frame.gestures
4種類のジェスチャー
circle
swipe
KeyTap
ScreenTap
frame.gestures
4種類のジェスチャー
circle
swipe
KeyTap
ScreenTap
指でぐるぐる円を描く
frame.gestures
4種類のジェスチャー
circle
swipe
KeyTap
ScreenTap
指でぐるぐる円を描く
手をサッと動かす
frame.gestures
4種類のジェスチャー
circle
swipe
KeyTap
ScreenTap
指でぐるぐる円を描く
手をサッと動かす
画面タップ
frame.gestures
4種類のジェスチャー
circle
swipe
KeyTap
ScreenTap
指でぐるぐる円を描く
手をサッと動かす
画面タップ
keyTapの奥方向
frame.gestures
ジェスチャーの状態
start
update
stop
frame.gestures
ジェスチャーの状態
start
update
stop
ジェスチャーの開始
frame.gestures
ジェスチャーの状態
start
update
stop
ジェスチャーの開始
ジェスチャの途中
frame.gestures
ジェスチャーの状態
start
update
stop
ジェスチャーの開始
ジェスチャの途中
ジェスチャの終了
まとめ
イベントループ内でFrameオブジェクトから
必要な情報を選んで使用するだけなので、非
常に簡単です。
LMCの特性にはコツがある。
MacBookのファンがうるさかった
GitHubでもっとコード漁ってみます!
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in...5
×

Leap motion.js

1,375

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,375
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Leap motion.js

  1. 1. LEAP MOTION JS実装編
  2. 2. 自己紹介 原口 剛 (はらぐち ごう) 株式会社gumi所属 ドラジェネのUIエンジニア Ghrgc
  3. 3. LEAP MOTION CONTROLER モーションセンシング対応入力デバイス Minority Report
  4. 4. 手と指の動きを感知して立体的な操作 100分の1mmの動きも感知 コンパクト(縦30mm、横80mm、厚み12.7mm) Win・Mac共に使用可能 安価。79.9ドル(約8,000円) この装置は、
  5. 5. C++ C# Java Python Objective-C JavaScript Leap Motion APIライブラリ
  6. 6. GitHubで検索したら、 JavaScriptが圧倒的に多い SDKはJavaScriptを選択 「Leap Motion」の
  7. 7. leapjs •GitHub https://github.com/leapmotion/leapjs •ドキュメント https://developer.leapmotion.com/docs
  8. 8. 準備 htmlファイルで、leapjsをロードするだけ <script src="https://raw.github.com/ leapmotion/leapjs/master/leap.js"> </script>
  9. 9. ジャンケン 指の数で分岐 指の認識がシビアなので、2本以下、4本以 下、それ以外と範囲に遊びを持たせた。
  10. 10. 使い方 Leap.loopメソッドにフレーム毎のコールバックを 登録する
  11. 11. コールバック関数 1秒間に何十回も呼ばれる コールバック内部に記述する 処理のパフォーマンスには注意
  12. 12. パフォーマンス 今回は気にしてません。。。
  13. 13. Frameオブジェクト 手指の座標、動き、角度など、全ての情報 Frameオブジェクトから欲しい情報を参照し て使うだけ
  14. 14. Frameオブジェクト frame.fingers frame.hands frame.gestures
  15. 15. frame.fingers 認識している指の情報 fingers自体は配列 frame.fingers.length → 認識している指の数
  16. 16. frame.hands LeapMotionが認識している手の情報 fingers同様に配列
  17. 17. frame.hands LeapMotionが認識している手の情報 fingers同様に配列 今回は使ってないです。。。
  18. 18. frame.gestures 4種類のジェスチャー circle swipe KeyTap ScreenTap
  19. 19. frame.gestures 4種類のジェスチャー circle swipe KeyTap ScreenTap 指でぐるぐる円を描く
  20. 20. frame.gestures 4種類のジェスチャー circle swipe KeyTap ScreenTap 指でぐるぐる円を描く 手をサッと動かす
  21. 21. frame.gestures 4種類のジェスチャー circle swipe KeyTap ScreenTap 指でぐるぐる円を描く 手をサッと動かす 画面タップ
  22. 22. frame.gestures 4種類のジェスチャー circle swipe KeyTap ScreenTap 指でぐるぐる円を描く 手をサッと動かす 画面タップ keyTapの奥方向
  23. 23. frame.gestures ジェスチャーの状態 start update stop
  24. 24. frame.gestures ジェスチャーの状態 start update stop ジェスチャーの開始
  25. 25. frame.gestures ジェスチャーの状態 start update stop ジェスチャーの開始 ジェスチャの途中
  26. 26. frame.gestures ジェスチャーの状態 start update stop ジェスチャーの開始 ジェスチャの途中 ジェスチャの終了
  27. 27. まとめ イベントループ内でFrameオブジェクトから 必要な情報を選んで使用するだけなので、非 常に簡単です。 LMCの特性にはコツがある。 MacBookのファンがうるさかった GitHubでもっとコード漁ってみます!
  28. 28. ご清聴ありがとうございました。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×