Count extended fingers – Leap Motion Controller + Javascript

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

Leap Motion Controller is a device used to detect hand motions and gestures. It came with a software development kit (SDK) for different languages 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.

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. The 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 hiding 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. That’s how you can count extended fingers on your hand in Leap Motion Controller.

Check out our more tutorials on Leap Motion Controller.

[wpdm_package id=’1213′]