The late night tinkering projects #15: “Rock, paper, scissors!”
Leap Motion is a small device capable of capturing hand motion: let’s use it to understand basic gestures like in the popular “rock, paper, scissors” game. Source: https://github.com/antigones/lm_rock_paper_scissors
Thanks to Nicola Guglielmi for the idea of applying gesture recognition to the game.
The Leap Motion controller is a small desktop device with IR sensor and a camera used to capture hand gestures to interact with softwares and games.
Even if the device is not new, the productor website still makes APIs available and even now it is still possible to develop applications relying on it.
In this project, you will use Leap Motion to “interpret” some basic gestures first and then to recognize “rock, paper, scissors” gestures with a very naive algorithm. Additionally, you will display the recognized gesture on a webpage.
Enabling the web interaction
Before proceeding with the project, you need to enable the web interaction from the Leap Motion settings.
The webpage
The webpage for this project is really easy, since it displays only a div with the outcome of the detection:
Using the Leap Motion JavaScript API
Integrating the Leap Motion Javascript API is easy as including a script in the <head>…</head> section of the webpage:
<script src=”//js.leapmotion.com/leap-1.1.0.min.js”></script>Interacting with the controller is just a matter of:
- connecting to the device
- looping over the received frame to perform some form of “logic”
You can connect to the device by initializing a new controller and calling the connect() method:
var controller = (new Leap.Controller);controller.connect();
Once the device is connected, the page begins to receive frames you can loop over:
Leap.loop(controllerOptions, function(frame) {// here you are looping over the frames…})
Detecting hand gestures
If you think about “rock, paper, scissors” gesture you can find a very naive way to decide about the gesture the user is currently doing:
- rock: no finger extended
- scissors: two fingers extended
- paper: five fingers extended
Really naive but extremely easy!
Leap Motion APIs expose properties for the frame to detect how many hands are over the sensor and how many fingers per hand.
frame.hands
frame.hands[i].fingers
You can use those function to count the extended fingers:
The result
As a result you have a web page capable of displaying your “Rock, Paper, Scissor” gesture in realtime!
