Leap Motion JavaScript Experiments
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Web Motion: leapjs experiments

These experiments were created to run from a localhost server. The URLs below assume you can serve the project as http://localhost/webmotion.


Basic Experiments

  • Leap Experiment 1 : A single finger may direct an avatar around the screen. The avatar responds not only to the position of the finger, but also the direction the finger is pointing.
  • Leap Experiment 2 : An attempt at improving the jittery avatar by utilizing a moving average of the Pointable data.
  • Leap Experiment 3 : This experiment utilized two hands instead of pointable fingers.


My first attempt at a theremin, loosely based on the original instrument, which requires two hands to control pitch and volume.

  • Pitch is controlled with the vertical axis of one finger.
  • Timbre (band-pass filter) is controlled by the vertical axis of the other finger.
  • Delay regeneration is controlled by the horizontal axis of the timbre finger.
  • Volume is controlled by the Z axis (depth position) of the timbre finger.

Hand Theremin

★ This is a better theremin that utilizes only one hand.

  • Again, pitch is the vertical axis.
  • Delay regeneration is controlled by the horizontal axis. A dry signal is on the user's far left and a heavily echoed signal is on the far right.
  • Volume is controlled by tilting the hand to either the left or right, with full volume available with the palm facing down.
  • Timbre (band-pass filter) is controlled by squeezing an imaginary ball or opening the hand into widely splayed fingers.


  • An attempt to draw with a single finger.
  • Based on an EaselJS demo.
  • Drawing engages when the avatar is within the drawing canvas, and the pointable finger crosses the zero point of the Z axis.


★ This demo exemplifies the benefit of utilizing an "interaction engine" layer to provide an interface layer between the raw data and the UI. This is similar to the use of a joystick, where the joystick data is not mapped directly to the UI, but instead causes changes in the state of the UI.

  • A single hand controls the sphere.
  • Squeezing the hand with shrink the sphere, while opening the hand will cause the sphere to grow.
  • Tilting the hand left, right, up or down will cause the sphere to rotate in that direction.
  • A middle static-state area for hand is also available.
  • Swap the code from lines 83-89 with the code from lines 93-94 to see the effect of providing an interaction engine rather than mapping directly to raw data.


A carousel, controllable with swiping gestures. It may be useful to open up the Leap.app Visualizer, turn on gesture display, and then work on getting the hang of swipe gestures. I found backhand to be somehow better than forehand.


Please see the leapjs project: https://github.com/leapmotion/leapjs

You may also be interested in the slides for a presentation I gave to accompany these demos: http://www.slideshare.net/fisherwebdev/web-motion