LeapMotion × reveal.jsでジェスチャーを使った操作

今日やっとLeapMotionと対面する事が出来ました。
近未来的なデバイスLeapMotion。最初話題になった頃に発売日を凄く楽しみにしていたのに延期されて一気に熱が冷めていましたが、せっかくなので購入してみました。

早速@nakajmgと一緒に遊びながら、適当にコード書いてみました。
実際何を作ろうか悩んでいましたが、まずは簡単なジェスチャーを使っrevealを動かすものを作ろうと思いついたわけです。

最初にジェスチャーによって上に動いたのか、下に動いたのか、右に動いたのか、左に動いたのか、ってのを簡単に取得する為にjQueryのプラグイン作ってみました。
そいつはこんな感じです。

jquery.leapSwipeHelper.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


(function($) {
  var getGestureType = function(gesture, distanse) {
    // horizon
    var ret = horizonCheck(gesture, distanse, ["right","left"]);
    if (ret !== false) return ret;
    return verticalCheck(gesture, distanse, ["up","down"]);
  }

  var horizonCheck = function(gesture,distanse,names) {
    var _distanse = Math.abs(gesture.position[0] - gesture.startPosition[0]);
    if (_distanse &lt; distanse) return false;
    if (gesture.position[0] &gt; 0) {
      return names[0];
    } else {
      return names[1];
    }
  }

  var verticalCheck = function(gesture,distanse,names) {
    var _distanse = Math.abs(gesture.position[1] - gesture.startPosition[1]);

    if (_distanse &lt; distanse) return false;

    if (gesture.startPosition[1] &lt; gesture.position[1]) {
      return names[0];
    } else {
      return names[1];
    }
  }

  $.fn.leapSwipeHelper = function(callback,options) {
    options = $.extend({
      distance: 50
    });
    var type = false;
    this.each(function(){
      if (this.state == "stop" && this.type == "swipe") {
        console.log(this.state);
        type = getGestureType(this,options.distance);
      }
    });
    if (typeof callback === "function" && type !== false) {
      $.proxy(callback,this,{type:type})();
    }
    return type;
  }
}(jQuery));

使い方は至って簡単で、以下のように書けばおk

1
2
3
4
5


Leap.loop({enableGestures: true}, function(frame){
  $(frame.gestures).leapSwipeHelper(function(event){
    console.log(event.type);
  });
});

これでLeapMotionを使って動かせば、ジェスチャー毎に４つのタイプに出力されます

1
2
3
4


up
down
left
right

つまりこのleapSwipeHelperを使えば簡単に上下左右の動きは取得できます。

さて、次はreveal.jsとどう組み合わせるか。
これは実はものすごく簡単で、reveal.jsでは上下左右用のメソッドを持っているので、それを使うだけです。
つまり以下のように書けば動いてしまいます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


Reveal.initialize({
  transition: 'linear'
});

var motionFlag = true;
Leap.loop({enableGestures: true}, function(frame){
  $(frame.gestures).leapSwipeHelper(function(event){

    if (motionFlag === false) return;
    switch(event.type) {
      case "up":
        Reveal.up();
        break;
      case "down":
        Reveal.down();
        break;
      case "left":
        Reveal.left();
        break;
      case "right":
        Reveal.right();
        break;
    }
    motionFlag = false;
    setTimeout(function(){
      motionFlag = true;
    }, 1300);

  });
});

本当に簡単な実装でジェスチャーでスライドが操作できます。
一応今回はdemoも用意してみました。LeapMotion持っている方はぜひ使ってみてください。