LeapJS Cursors

constants.js

// calibration constants
// this was for a 13" MacBook Pro with the Leap horizontally centered and placed on the
// table against the front edge of the laptop

// left and right edges of the screen. may be the opposite of what you want, depending
// on the orientation of your Leap
var X_LEFT = -140;
var X_RIGHT = 140;

// heights for the top and bottom of the screen
var Y_TOP = 250;
var Y_BOTTOM = 50;

// these are the Z distance to the top and bottom of the screen
// (if your screen is tilted like on a laptop, they may be different)
var Z_TOP = -350;
var Z_BOTTOM = -350;

main.js

var pointer = new Pointer(1);

Leap.loop({}, function(frame) {
  // pick finger with the highest z-index (closest to the screen)
  var pointable = frame.pointables.sort(function(a, b) { return a[2] - b[2] })[0];
  pointer.update(pointable);
});

math.js

function findPoint(pointable) {
  var pos = pointable.tipPosition
    , direction = pointable.direction
  
  // note that in the first column, we just went ahead and simplified
  // "pos[n] - (pos[n] + direction[n]) == -direction[n] 
  var matrix = Matrix.create([
    [-direction[0], X_RIGHT - X_LEFT, X_LEFT - X_LEFT ],
    [-direction[1], Y_TOP - Y_TOP   , Y_BOTTOM - Y_TOP],
    [-direction[2], Z_TOP - Z_TOP   , Z_BOTTOM - Z_TOP]
  ]).inverse();

  var vector = Vector.create([
    pos[0] - X_LEFT,
    pos[1] - Y_TOP,
    pos[2] - Z_TOP
  ]);

  var res = matrix.multiply(vector);

  var t = res.elements[0];

  pos[0] = pos[0] + t * direction[0];
  pos[1] = pos[1] + t * direction[1];
  pos[2] = t;

  return pos;
}

pixel_coords.js

function pointToPixelCoords(pos) {
  pos[0] = (pos[0] + X_RIGHT) * (window.innerWidth / X_RIGHT / 2);
  pos[1] = (pos[1] - Y_BOTTOM) * (window.innerHeight / (Y_TOP - Y_BOTTOM));
  return pos;
}

pointer.js

var Pointer = function(id) {
  this.element = document.createElement("div");
  this.element.id = "pointer-" + id;

  // initial style
  this.element.style.background = "red";
  this.element.style.top = "0px";
  this.element.style.left = "0px";
  this.element.style.width = "40px";
  this.element.style.height = "40px";
  this.element.style.position = "fixed";
  this.element.style.zIndex = 2147483647; // z-index max

  document.body.appendChild(this.element);
}

pointer_update.js

var Z_SCALE = 250;

Pointer.prototype.update = function(pointable) {
  var point = findPoint(pointable);
  var coords = pointToPixelCoords(point);
  var x = coords[0]
    , y = coords[1] // reminder: y is "reversed"
    , z = point[2];
  
  if (x > window.innerWidth) x = window.innerWidth;
  if (y > window.innerHeight) y = window.innerHeight;
  if (x < 0) x = 0;
  if (y < 0) y = 0;

  this.element.style.webkitTransform = "scale(" + (Z_SCALE / z) + ")";
  this.element.style.top = (window.innerHeight - y) + "px";
  this.element.style.left = x + "px";
}