Detect swipe gesture with leap motion

Question

I knowed how to detect gesture left and right from

this

I want to know how to detect gesture up , down and circle.

My English is poor. I dont think you can understand, but help me plz.

Answer 1

For swipe directions, you can compare the x and y coordinates of the direction property of the Gesture object. In the Leap Motion JavaScript API, vectors are represented by 3-element arrays. So:

gesture.direction[0] is the x coordinate (left to right)
gesture.direction[1] is the y coordinate ( up, down)
gesture.direction[2] is the z coordinate (front to back)

The example you cite only looks at the sign of the x-coordinate -- so all swipes are classified as either right or left. To also classify swipes as up or down, you will have to compare the magnitude of the x and y coordinates to determine if the swipe is more horizontal or more vertical and then compare the sign of the coordinate to determine if a horizontal swipe is left or right or a vertical swipe is up or down.

Circle gestures are reported as a different type of gesture, so you can look at the gesture.type property.

Here is some JavaScript that illustrates this (adapted from the Sample.html file included with the Leap Motion SDK):

// Store frame for motion functions
var previousFrame = null;

// Setup Leap loop with frame callback function
var controllerOptions = {enableGestures: true};

Leap.loop(controllerOptions, function(frame) {

  // Display Gesture object data
  var gestureOutput = document.getElementById("gestureData");
  var gestureString = "";
  if (frame.gestures.length > 0) {
    for (var i = 0; i < frame.gestures.length; i++) {
      var gesture = frame.gestures[i];

      switch (gesture.type) {
        case "circle":
              gestureString += "<br>ID: " + gesture.id + "<br>type: " + gesture.type + ", "
                        + "<br>center: " + vectorToString(gesture.center) + " mm, "
                        + "<br>normal: " + vectorToString(gesture.normal, 2) + ", "
                        + "<br>radius: " + gesture.radius.toFixed(1) + " mm, "
                        + "<br>progress: " + gesture.progress.toFixed(2) + " rotations"
                        + "<br>";
            break;
        case "swipe":
          //Classify swipe as either horizontal or vertical
          var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);
          //Classify as right-left or up-down
          if(isHorizontal){
              if(gesture.direction[0] > 0){
                  swipeDirection = "right";
              } else {
                  swipeDirection = "left";
              }
          } else { //vertical
              if(gesture.direction[1] > 0){
                  swipeDirection = "up";
              } else {
                  swipeDirection = "down";
              }                  
          }
          gestureString += "<br>ID: " + gesture.id + "<br>type: " + gesture.type + ", "
                        + "<br>direction " + swipeDirection
                        + "<br>gesture.direction vector: " + vectorToString(gesture.direction, 2) + ", "
                        + "<br>";
          break;
       }
     }
  }
  gestureOutput.innerHTML = gestureString + gestureOutput.innerHTML;

})

function vectorToString(vector, digits) {
  if (typeof digits === "undefined") {
    digits = 1;
  }
  return "(" + vector[0].toFixed(digits) + ", "
             + vector[1].toFixed(digits) + ", "
             + vector[2].toFixed(digits) + ")";
}

To use this, put it somewhere it will be executed and include a element with the id gestureData in the HTML document body:

<div id="gestureData"></div>

Answer 2

A friend of mine made a library for exactly this purpose. It checks for swipes in 6 different directions and can tell which direction a circle gesture is going.

https://github.com/L1fescape/curtsy

His code should be easily readable too so if you want to see how he did things you can.