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の工夫が必要 •キャプチャ範囲の慣れが必要 •テストしてるとおかしな人間に見られる •子供の手だとうまくキャプチャされない

良かった点 •ハード買い換えることなく、ソフトウェアの改善で精度が上がってる

•今後の精度向上に期待がもてる •キャプチャされる情報が多く精度高い •未来感ある •作ってて楽しい

楽しいは正義

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