目的
Leap Motionは手の動きを検出するデバイス。
今回はJavascriptからLeap Motionを使ってみる。
ソースコードは
ここ から拝借して試してみた。
Environment
OS
Linux version 3.2.0-64-generic (buildd@kissel) (gcc version 4.6.3 (Ubuntu/Linaro 4.6.3-1ubuntu5) ) #97-Ubuntu SMP Wed Jun 4 22:04:21 UTC 2014 LeapMotion
leap.js
Develop
後述のLeap Motion Controllerをインストールすることで、Web SocketでLeap Motionからのデータを取得することができる(ws://localhost:6437)。
このサイト にGoogle Chromeから取得したデータを確認する方法が記載されている。
leap.js(http://js.leapmotion.com/0.3.0/leap.js)を使うことで簡単にLeap Motionからのデータを扱うことができるため、
今回はこれを使用している。
Prepare libraries
まず最初に、
Leap Motion Controller .をインストールしておく。
その際、サンプルアプリで遊んだりLeap Motionの調整をしておくことをおすすめする。
Source Code
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>LeapMotionSample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://js.leapmotion.com/0.3.0/leap.js"></script>
<script src="http://sample.com/javascript/main.js"></script>
<style>
#pictures img {
display: inline-block;
}
div#pictures {
white-space: nowrap;
overflow-x: scroll;
margin-top: 200px;
}
</style>
</head>
<body>
<div id="pictures">
<img src="http://sample.com/images/1.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/2.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/3.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/4.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/5.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/6.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/7.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/8.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/9.jpg" style="width:300px; height:180px" />
<img src="http://sample.com/images/10.jpg" style="width:300px; height:180px" />
</div>
</body>
</html>
JS
$(document).ready(function() {
var controller = new Leap.Controller({enableGestures: true});
var position = 0;
controller.gesture('swipe').stop(function(g) {
var stopGesture = g.gestures[g.gestures.length - 1];
var startX = stopGesture.startPosition[0];
var stopX = stopGesture.position[0];
position += (startX - stopX) * 2;
$("#pictures").animate({scrollLeft: position + "px"}, "fast");
});
controller.connect();
});
Demo
以下のデモでは、Leap Motion上で手を払うような動きをすることでスクロールさせている。
