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.

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.

• javascript
• leap-motion

• I am getting unexpected token . when I use Leap.Loop()? Why? – Kala J Commented Nov 1, 2014 at 19:57

5 Answers 5

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
                }
            }
        }
    }
}

});

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

This is the easiest way to find out

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

It will return true or false

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();
}
});

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