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;" />

    // 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) {

            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";

    #image {
        width: 100%;
        height: 100%;
        object-fit: contain;


  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.

Kindly login or create a new account to download the files.

How useful was this post

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post

Please disable your adblocker or whitelist this site!