ズッキーニのプログラミング実験場

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

   Feb 07

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

by zuqqhi2 at 2015年2月7日
Pocket

目的

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

Related Posts

  • <!--:ja-->[Javascript][Meteor.js]インストールとHello World<!--:--><!--:en-->[Javascript][Meteor.js]Install and Hello World<!--:-->2015年2月15日 [Javascript][Meteor.js]インストールとHello World Meteor.js Meteor.jsはJavascriptのサーバサイドフレームワークの1つ。 Node.jsをベースにしているが、いろいろと違う。 面白いところは、クライアントとサーバ間でソースコードやDBの内容を共有できるところ。 これのおかげで簡単にWe […]
  • 2015年3月3日 [Meteor.js][MongoDB][Javascript]別インストールの既存MongoDBを使う方法 Goal 既存のMongoDBをMeteor.jsで利用する。 Environment OSLinux version 3.2.0-64-generic (buildd@kissel) (gcc version 4.6.3 […]
  • 2014年11月9日 [jslint]jslintをコマンドから使ってコード品質チェック 概要 Javascriptは利用方法によるけど運用が難しい言語だと思ってる。 jslintを使用するとコードの品質(?)をチェックすることが出来る。 開発時にjslintが通るコードを書くようにすると、経験上いくらか運用がマシになる気がする。 web上でも使えるけど、コ […]
  • 2013年5月29日 [Javascript]Three.jsを触る Three.jsでブラウザ上で3D空間の描画が簡単にできるみたいだ。 threejs.org 簡単に立方体を書いてみる。 以下、ここのまねをして書いてみる。 まずはダウンロード。 ここのbuildディレクトリの中にあるthree.min.jsを使う。 […]
  • 2013年6月2日 [Backbonejs][Javascript]インストール Backbone.jsの準備 まずは必要なライブラリのダウンロード。 次は、テスト用のhtmlとjsを作成。 動作確認して準備OK! coffee scriptを加えてみる ここを 参考にしてnpmを入れる。 […]
  • 2013年5月14日 [Parser][PEG]PEG.jsで遊んでみる 最近、文脈自由文法よりも扱える範囲が広いかもしれないと言われている 分析的形式文法(PEG)に興味があって、リッチなコンフィグファイル用言語を作成するのに使用している。 PEG.jsというPEG用のパーサを生成してくれるjsがgithub上に公開されていて、 これを使 […]
Pocket

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です