The late night tinkering projects #15: “Rock, paper, scissors!”

Photo by Fadilah N. Imani on Unsplash

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

The webpage

Using the Leap Motion JavaScript API

<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

  • 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

Full-time Human-computer interpreter