Leap Experiment

I’m interested in gesture based interfaces and have been learning about the Leap Motion controller, which is a device that senses hands, fingers and multiple gestures, allowing you to interact with content in a new way.

Leap Motion controller

Leap Experiment

Below is some source code I wrote for an example that tracks a color changing circle to your fingers. If you have a Leap, check out the demo.



document.addEventListener("DOMContentLoaded", init);

var canvas;
var ctx;

function init() { 
	canvas = document.getElementById("leap-canvas");

	// fullscreen
	canvas.width = document.body.clientWidth;
	canvas.height = document.body.clientHeight;

	// create a rendering context
	ctx = canvas.getContext("2d");

	//change color of pointable at interval
	setInterval(color, 50);
	// listen to Leap Motion

function color() {

	//rgb color
	this.r = Math.floor(Math.random() * 255);
	this.g = Math.floor(Math.random() * 255);
	this.b = Math.floor(Math.random() * 255);
    ctx.fillStyle = "rgb("+ this.r +", "+ this.g +", "+ this.b +")";

// render each frame
function draw(obj) {
  // clear last frame
  // render circles based on pointable positions
  var pointablesMap = obj.pointablesMap;
  for (var i in pointablesMap) {
    // get the pointable's position
    var pointable = pointablesMap[i];
    var pos = pointable.tipPosition;

    // create a circle for each pointable
    var radius = Math.min(600/Math.abs(pos[2]),20);



Download from Github

Scroll to Top