How to detect circle gesture direction?

Question

THis is my code gist.

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

for (var i = 0; i < gestures.length; i++) { 
  // I want to do something when draw circle with one pointable 
   if (gesture.type == "circle" && gesture.state == "stop" && gesture.pointableIds.length == 1) {
    var isClockWise = ? ;//  how to know the direction of circle ?
  }
}
} );

How to know circle is clockwise or counter clock wise with gesture object ?

I was using leap motion only 2 days and really need your help.

I am getting unexpected token . when I use Leap.Loop()? Why? — Kala J, Nov 01 '14 at 19:57

score 4 · Answer 1 · answered Aug 29 '13 at 04:28

Leap.loop({enableGestures: true},function(frame) {
var gestures = frame.gestures,
    circle,
    pointable,
    direction,
    normal;
// Check if is there any gesture going on
if(gestures.length > 0) {
    // In this example we will focus only on the first gesture, for the sake of simplicity
    if(gestures[0].type == 'circle') {
        circle = gestures[0];
        // Get Pointable object
        circle.pointable = frame.pointable(circle.pointableIds[0]);
        // Reset circle gesture variables as nedded, not really necessary in this case
        if(circle.state == 'start') {
            clockwise = true;
        } else if (circle.state == 'update') {
            direction = circle.pointable.direction;
            // Check if pointable exists
            if(direction) {
                normal = circle.normal;
                // Check if product of vectors is going forwards or backwards
                // Since Leap uses a right hand rule system
                // forward is into the screen, while backwards is out of it
                clockwise = Leap.vec3.dot(direction, normal) > 0;
                if(clockwise) {
                    //Do clockwose stuff
                } else {
                    //Do counterclockwise stuff
                }
            }
        }
    }
}

});

This is more efficient than the accepted answer (angleTo typically needs to compute the dot product along the way). — Charles Ward, Nov 20 '13 at 23:08

Marcassin · Accepted Answer · 2013-08-02T12:27:32.580

Looking on the C++ sample given on the leap website, piece of code is given to detect is the circle is clockwise.

C++ code :

if (circle.pointable().direction().angleTo(circle.normal()) <= PI/4)
   {
      clockwiseness = "clockwise";
   }
   else
   {
      clockwiseness = "counterclockwise";
   }

I haven't used the Javascript API, but I think this can be something equivalent This code hasn't been tested, but in Javascript it may be something like :

// considere your gesture is a circle, and there is at least one pointable object.
if (gesture.type == "circle" && gesture.state == "stop" && gesture.pointableIds.length >= 1)
{
  var dir = frame.pointables[gesture.pointableIds[0] ].direction; // get direction of the Pointable used for the circle gesture
  var angle = dir.AngleTo (circle.normal);
  var isClockWise =  angle <= (3.14 / 4);
}

Got all infos from Leap JS API from GitHub and Leap Motion Developers site

-> Be careful frame.pointables return pointables objects given in arbitrary order.(Cf JS API doc). This piece of code is just for the explanation of the algorithm

actually, angleTo() function has been deprecated in new version of leapjs library. https://developer.leapmotion.com/forums/forums/10/topics/leap-js-how-to-detect-clockwise-and-counterclockwise-circle-gestures this is equal function instead. — jziwenchen, Aug 07 '13 at 07:45
Ok, Thanks for the tip, another AngleTo Method is in the doc of `Vector` class in the LeapJS on github (http://leapmotion.github.io/leapjs/). — Marcassin, Aug 07 '13 at 08:46

score 1 · Answer 3 · answered Jun 09 '14 at 16:26

1

This is the easiest way to find out

var isClockwise = (circleGesture.normal[2] <= 0);

It will return true or false

answered Jun 09 '14 at 16:26

user2827958

357
1
4
20

score 0 · Answer 4 · answered Mar 25 '15 at 16:04

Tried other answers on this page and couldn't get it to work, simplified the code a bit and finally got it working. The pointableID logs normal as negative/positive based on direction of the circle gesture.

function pageScrollDown() {
   window.scrollBy(0,10);
};
function pageScrollUp(){
   window.scrollBy(0,-15);
};

$(window).bind('circle', function(e, gesture){

var circle = gesture;

circle.pointable = circle.pointableIds[0];
direction = gesture.normal[1];

    if(direction < 0 ) {
      pageScrollDown();
      } else {
        pageScrollUp();
}
});

score -1 · Answer 5 · answered Oct 08 '13 at 22:56

I have been using the "Leap Cursor library" for my project and it is really cool. Identifying a circle gesture on a element is very simple with this library.

var circleTrackElements = document.querySelectorAll(".myDOMElements");
for (var i = 0; i < allTiles.length; i++) {
    circleTrackElements[i].addEventListener("leap-circle-stop", function(e) {
        console.log("CIRCLE DETECTED");
    });
};
LeapManager.init({
    maxCursors : 1,
    interactiveSelector : ".myDOMElements"
});

GITHUB link for the library

-1 since it doesn't address the actual question, which was about the direction of the circle being drawn. — Charles Ward, Nov 20 '13 at 23:10

How to detect circle gesture direction?

5 Answers5