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.
- 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.
★ 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