Javascriptで
LeapMotion事始め
自己紹介
幸脇 健太(コウワキ ケンタ)です
フリーランス2年目になりました。
コウワキデザイン
という屋号でやっています
元Flasherなフロントエンドエンジニアです
時々サーバやバックエンド言語もさわってます
Twitter : @kuwk
Web : http://kuwk.jp
LeapMotionを使って
JavascriptとCanvasで
子供向けのコンテンツを
作ってみた話
今日のアジェンダ
コトの始まり
自分には3歳の娘と
1歳の息子がいます
前々から自分の子供に
ゲームとか作ってみたかった
でも、コントローラとかマウ
スとかキーボードまだ難しい
iPad持ってない
LeapMotion持ってる!
LeapMotionで
作ってみよう
LeapMotionとは
2012年にLeap Motion社から販売された
手元専用のモーションキャプチャ機器
キャプチャできるのは指先から肘まで
キャプチャ範囲は60センチ立方くらい
なんか楽しそう!
思ったより精度良くなかった!
• 手を握ると指をうまくキャプチャ
できなかったり
• 手のひら/手の甲が逆だったり
• キャプチャされてる指が骨折して
たり(関節の方向おかしい)
2014年にv2リリース
格段に精度良くなってる!
• v1であったような変なキャプ
チャ激減
• 以下検出可能に       
手の左右/指の種類/関節/ピンチ/グラブ
• 赤外線カメラ画像の取得
• VR対応
Actionscriptがなくなってる…
SDKも色々
Visualizerのデモ
Javascriptで
LeapMotion
LeapJS
詳しくはこちら
https://developer.leapmotion.com/javascript
https://js.leapmotion.com/leap-0.6.4.js
<script type="text/javascript"
src=“https://js.leapmotion.com/
leap-0.6.4.js”></script>
<script type="text/javascript">
function init(){
// LeapMotionClass
var controller =
new Leap.Controller({enableGestures: true});
// LeapMotion接続
controller.connect();
// LeapMotionの実行frame
controller.on('frame', function(frame) {

// 実行コード

});
}
window.addEventListener('load', init);
</script>
ちなみにLeapMotionの内部では
WebSocketサーバが起動してます
ws://localhost:6437/
詳しくはこちら
https://developer.leapmotion.com/documentation/javascript/
supplements/Leap_JSON.html
どんな値が取れるのか
主に使いそうな情報
•手
- 位置(x/y/z)
- 左右
- 手の向き
- グラブ
•指
- 位置(各関節 x/y/z)
- 種類(親指~小指)
- 曲げ伸ばし
- ピンチ
•ジェスチャー
- フリック - キータップ - 回転
あと手の他にツール(棒状のもの)の
キャプチャも可能です
※白色じゃないと認識されにくい
詳しくはこちら
https://developer.leapmotion.com/documentation/javascript/
devguide/Leap_Overview.html#motion-tracking-data
ここから作ったものの話
コンテンツ1デモ
各指の曲げ伸ばしから、
グー・チョキ・パーの判定
// LeapMotionの実行frame

controller.on('frame', function(frame) {

// 親指から小指に向かって 0 ~ 4
console.log(frame.hands[0].fingers[0].extended);

});
// extendedNumber = 伸びてる指の数
if (extendedNumber == 5) {

// パー

} else if (extendedNumber == 2 &&
_finger[1].extended && _finger[2].extended) {

// チョキ

} else if(extendedNumber == 0){

// グー

}
実際遊ばせてみた
_人人人人人_
> 不評!! <
‾Y^Y^Y^Y‾
理由
•センサーの反応場所がわからない
•子供の手だとうまく指がキャプチャされ
ない
•アンパンマンがいない
コンテンツ2デモ
遊ばせてみた
_人人人人人_
> 好評!! <
‾Y^Y^Y^Y‾
理由
•手のキャプチャ表示があるので自分の操
作がわかりやすい
•寿司 = にぎるってわかってる
•寿司が好き
1歳がやるとこんな感じ
まとめ
悩ましかった点
•基本のジェスチャーが少ない
•細かい操作が大変/UIの工夫が必要
•キャプチャ範囲の慣れが必要
•テストしてるとおかしな人間に見られる
•子供の手だとうまくキャプチャされない
良かった点
•ハード買い換えることなく、ソフトウェ
アの改善で精度が上がってる
•今後の精度向上に期待がもてる
•キャプチャされる情報が多く精度高い
•未来感ある
•作ってて楽しい
楽しいは正義
ご静聴ありがとうございました

JavascriptでLeap Motion事始め