Count Extended Fingers - Leap Motion Controller + Javascript

Count Extended Fingers – Leap Motion Controller + Javascript

Leap Motion Controller is a device used to detect hand motions and gestures. It came with a software development kit (SDK) for different language i.e. C++, C#, Python, Javascript, Java, Unity and Unreal Engine. You can buy Leap Motion Controller from here. You can get all the languages SDK from this link.

In this tutorial, we are going to show you can detect number of extended fingers using Leap and Javascript. Extended fingers means your stretched or opened fingers. If you prefer a video tutorial, you can check our video tutorial on YouTube.

Video Tutorial

We are going to show different images based on extended fingers. If you have downloaded the Javascript SDK then you will find a file named “leap-0.6.4.min.js” in it. You need to copy that file in your project. We have created a folder named “images”. In this folder, we have placed 3 images named “1.jpg”, “2.jpg” and “3.jpg”.

We will be using “index.php” file as the main file. Following code will show images based on your hand’s extended fingers.

<script src="leap-0.6.4.min.js"></script>

<img id="image" style="display: none;" />

<script>
    // Setup Leap loop with frame callback function
    var controllerOptions = {};

    Leap.loop(controllerOptions, function(frame) {
        // Body of callback function
        var hands = frame.hands;
        if (hands.length > 0) {

            var hand = hands[0];

            var extendedFingers = 0;
            for(var f = 0; f < hand.fingers.length; f++){
                var finger = hand.fingers[f];
                if(finger.extended) {
                    extendedFingers++;
                }
            }

            if (extendedFingers > 0 && extendedFingers <= 3) {
                document.getElementById("image").setAttribute("src", "images/" + extendedFingers + ".jpg");
                document.getElementById("image").style.display = "";
            } else {
                document.getElementById("image").style.display = "none";
            }
        }
    });
</script>

<style>
    #image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
</style>

Explanation

  1. First we have included Leap JS SDK.
  2. Then we created an empty image tag and hide it.
  3. Leap.loop function will be called on each frame.
  4. On each frame, we are checking if there is any hand on top of Leap.
  5. If there is, then we are counting extended fingers.
  6. If there are more than zero and less than 4 extended fingers, then we are rendering image and displaying it.
  7. Otherwise, we are hidding the image.
  8. CSS styles are applied to fit the image inside the browser window.

Move your hand on top of your Leap Motion Controller and try to extend your fingers one-by-one. You will see the images will be changed as per the number of fingers extended.

Leave a Reply

Please disable your adblocker or whitelist this site!