プログラミング、アカデミック、何か面白いこと。 記載されているものは基本的に私が所属する団体とは関係がありません。

  1. プログラミング
  2. 144 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

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

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

  1. sbt1.0.0のインストールとサンプル実行

  2. [機械学習]各種Pythonライブラリ入りの実験用Dockerイメージを作った

  3. [Node.js]バッチスクリプトの書き方

  4. [Play][Scala]PlayFrameworkでリクエスト駆動のバッチを作る

  5. [OpenCV][Ruby]Webページのデザイン崩れ確認の自動化

関連記事

コメント

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

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

PAGE TOP