Tech Tips

  1. プログラミング
  2. 786 view

[LeapMotion][Javascript]LeapMotionをJavascriptからとりあえず使ってみた

目的

Leap Motionは手の動きを検出するデバイス。
今回はJavascriptからLeap Motionを使ってみる。
ソースコードはここから拝借して試してみた。
20150207_leap_demo2

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
    • LM-010
  • leap.js
    • 0.3.0

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

20150207_leap_sample
以下のデモでは、Leap Motion上で手を払うような動きをすることでスクロールさせている。

プログラミングの最近記事

  1. PubSubClient の便利さと注意点

  2. Java の環境構築方法メモ

  3. PlatformIO IDE for VSCode を使用して VSCode で Ardu…

  4. ROS Docker イメージで発生した GPG error の解消方法

  5. Streamlit で訪れた国を色づけした世界地図を作成できるアプリケーションを作成してみ…

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP