# InteractionBox¶

Attributes:

Functions:

class InteractionBox()

The InteractionBox class represents a box-shaped region completely within the field of view of the Leap Motion controller.

The interaction box is an axis-aligned rectangular prism and provides normalized coordinates for hands and fingers within this box. The InteractionBox class can make it easier to map positions in the Leap Motion coordinate system to 2D or 3D coordinate systems used for application drawing.

The InteractionBox region is defined by a center and dimensions along the x, y, and z axes.

The following example illustrates how to use the interaction box to map the coordinates of a finger to the area of a drawing canvas:

<canvas id="displayArea" width="200" height="100" style="background:#dddddd;"></canvas>
<script>
var canvasElement = document.getElementById("displayArea");
var displayArea = canvasElement.getContext("2d");

var controller = new Leap.Controller();
controller.on("frame", function(frame){
if(frame.pointables.length > 0)
{
canvasElement.width = canvasElement.width; //clear

//Get a pointable and normalize the tip position
var pointable = frame.pointables[0];
var interactionBox = frame.interactionBox;
var normalizedPosition = interactionBox.normalizePoint(pointable.tipPosition, true);

// Convert the normalized coordinates to span the canvas
var canvasX = canvasElement.width * normalizedPosition[0];
var canvasY = canvasElement.height * (1 - normalizedPosition[1]);
//we can ignore z for a 2D context

displayArea.strokeText("(" + canvasX.toFixed(1) + ", " + canvasY.toFixed(1) + ")", canvasX, canvasY);
}
});
controller.connect();
</script>

InteractionBox()

Do not create your own InteractionBox objects. Get a valid InteractionBox from Frame.interactionBox().

This constructor creates invalid InteractionBox objects.

InteractionBox.center
Type: number[] – a 3-element array representing a position.

The center of the InteractionBox in device coordinates (millimeters). This point is equidistant from all sides of the box.

var center = frame.interactionBox.center;

InteractionBox.depth
Type: number

The depth of the InteractionBox in millimeters, measured along the z-axis.

var depth = frame.interactionBox.depth;

InteractionBox.height
Type: number

The height of the InteractionBox in millimeters, measured along the y-axis.

var height = frame.interactionBox.height;

InteractionBox.size
Type: number[] – a 3-element array

The width, height, and depth of the InteractionBox in millimeters, as an array.

InteractionBox.valid
Type: boolean

Indicates whether this is a valid InteractionBox object.

if(frame.interactionBox.valid){
//...
}

InteractionBox.width
Type: number

The width of the InteractionBox in millimeters, measured along the x-axis.

var width = frame.interactionBox.width;

InteractionBox.denormalizePoint(normalizedPosition)

Converts a position defined by normalized InteractionBox coordinates into device coordinates in millimeters.

This function performs the inverse of normalizePoint().

The following example computes the Leap Motion coordinates of an element on a web page. In the example the width and height of the interaction area are mapped to the width and height of the containing page. The z-coordinate is arbitrarily set to zero.

<div id="example" style="position:absolute">Denormalized div</div>
<div id="proof" style="position:absolute; top:100; left:100;">Normalized div</div>
<script>
var controller = Leap.loop(function(frame){
if(frame.valid){
var exampleElement = document.getElementById("example");
var proofElement = document.getElementById("proof");

// Area mapped to Leap Motion coordinates, in this case, the whole page:
var area = {width: window.innerWidth, height: window.innerHeight};

// Calculate normalized position on the page
var pagePoint = Leap.vec3.create();
pagePoint[0] = (exampleElement.offsetLeft)/area.width; //x
pagePoint[1] = (area.height - exampleElement.offsetTop)/area.height; //y (inverted)
pagePoint[2] = 0; //The page is 2D, so pick an arbitrary value for z.
var leapCoordinates = frame.interactionBox.denormalizePoint(pagePoint);

// Now test that the coordinates are correct by reversing the process
// and moving the "proof" element to the same position as the example element.
var normalized = frame.interactionBox.normalizePoint(leapCoordinates, false);
proofElement.style.left = normalized[0] * area.width;
proofElement.style.top = area.height * (1 - normalized[1]);
}
});
</script>

Arguments: normalizedPosition (number[]) – A 3-element array containing the input position in InteractionBox coordinates. number[] – A 3-element array containing the corresponding denormalized position in device coordinates.
InteractionBox.normalizePoint(position, clamp)

Normalizes the coordinates of a point using the interaction box.

Coordinates from the Leap Motion frame of reference (millimeters) are converted to a range of [0..1] such that the minimum value of the InteractionBox maps to 0 and the maximum value of the InteractionBox maps to 1. For example, the lefthand, bottom, front corner of the box has the normalized position: [0,0,0], while the righthand, top, rear corner of the box has the normalized position: [1,1,1].

If the clamp parameter is true (the default) coordinates outside the interaction box are clamped to the range [0..1], essentially moving the normalized point to the box boundary. If false, coordinates outside the box are not clamped and so may have values less than 0 or greater than 1.

<p>Normalized Position: <span id="normPosition">…</span></p>
<p>Tip Position: <span id="tipPosition">…</span></p>
<script>
var normalizedDisplay = document.getElementById("normPosition");
var tipDisplay = document.getElementById("tipPosition");

var controller = new Leap.Controller();
controller.on('frame', function(frame){
if(frame.pointables.length > 0)
{
var pointable = frame.pointables[0];

var interactionBox = frame.interactionBox;
var normalizedPosition = interactionBox.normalizePoint(pointable.tipPosition, true);
var tipPosition = pointable.tipPosition;
normalizedDisplay.innerText = "(" + normalizedPosition[0] + ", "
+ normalizedPosition[1] + ", "
+ normalizedPosition[2] + ")";
tipDisplay.innerText = "(" + tipPosition[0] + ", "
+ tipPosition[1] + ", "
+ tipPosition[2] + ")";
}
});
controller.connect();
</script>

Arguments: position (number[]) – A 3-element array containing the input position in device coordinates. clamp (boolean) – Whether or not to limit the output value to the range [0,1] when the input position is outside the InteractionBox. Defaults to true. number[] – The normalized position as a 3-element array.
InteractionBox.toString()

Writes a brief, human readable description of the InteractionBox object.

console.log(frame.interactionBox.toString());

Returns: string – A description of the InteractionBox object.
InteractionBox.Invalid
Type: InteractionBox

An invalid InteractionBox object.

You can use this InteractionBox instance in comparisons testing whether a given InteractionBox instance is valid or invalid. (You can also use the InteractionBox.valid property.)