bostwick/hello-leap.html

## hello-leap.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello Leap</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>
<body>
    <canvas id="main-canvas"/>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://js.leapmotion.com/0.2.0/leap.js"></script>
    <script src="hello-leap.js" type="text/javascript"></script>
</body>
</html>

## hello-leap.js
var Utils = (function() {
    var module = {};
    module.tipPositionToScreenCoords = function(canvas, tipPosition) {

    };

    module.drawCircle = function(context, x, y, r) {
        var lineWidth = 1,
            strokeStyle = "rgb(0,0,0)";

        context.lineWidth = lineWidth;
        context.strokeStyle = "rgb(0,0,0)";

        context.beginPath();
        context.arc(x+r, y+r, r, 0, 2*Math.PI);
        context.stroke();
    };

    return module;
})();


var HelloLeap = (function() {
    var _controllerOptions = {
        enableGestures: true
    };

    var _canvas = null,
        _context = null;

    var _drawBackground = function() {
        _context.fillStyle = "rgb(255,255,255)";
        _context.fillRect(0, 0, _canvas.width, _canvas.height);
    };

    var _drawPointables = function(frame) {
        var drawPointable = function(pointable) {
            var coords = Utils.tipPositionToScreenCoords(_canvas, pointable.tipPosition);
            Utils.drawCircle(_context, coords[0] - 10, coords[1] - 10, 10);
        };

        for ( var idx = 0; idx < frame.pointables.length; ++idx ) {
            drawPointable(frame.pointables[idx]);
        }
    }

    var instance = { };
    instance.init = function() {
        _canvas = $("#main-canvas")[0];
        _context = _canvas.getContext('2d');

        $(window).on('resize', instance.resize);

        instance.resize();
        return this;
    };

    instance.run = function() {
        Leap.loop(_controllerOptions, instance.onLeapFrame);
    };

    instance.resize = function() {
        _canvas.width = document.documentElement.clientWidth;
        _canvas.height = document.documentElement.clientHeight;
    };

    instance.onLeapFrame = function(frame) {
        _drawBackground();
        _drawPointables(frame);
    };

    return instance;
});

$(document).ready(function() {
    (new HelloLeap()).init().run();
});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Hello Leap</title>
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	</head>
	<body>
	<canvas id="main-canvas"/>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://js.leapmotion.com/0.2.0/leap.js"></script>
	<script src="hello-leap.js" type="text/javascript"></script>
	</body>
	</html>
	var Utils = (function() {
	var module = {};
	module.tipPositionToScreenCoords = function(canvas, tipPosition) {

	};

	module.drawCircle = function(context, x, y, r) {
	var lineWidth = 1,
	strokeStyle = "rgb(0,0,0)";

	context.lineWidth = lineWidth;
	context.strokeStyle = "rgb(0,0,0)";

	context.beginPath();
	context.arc(x+r, y+r, r, 0, 2*Math.PI);
	context.stroke();
	};

	return module;
	})();


	var HelloLeap = (function() {
	var _controllerOptions = {
	enableGestures: true
	};

	var _canvas = null,
	_context = null;

	var _drawBackground = function() {
	_context.fillStyle = "rgb(255,255,255)";
	_context.fillRect(0, 0, _canvas.width, _canvas.height);
	};

	var _drawPointables = function(frame) {
	var drawPointable = function(pointable) {
	var coords = Utils.tipPositionToScreenCoords(_canvas, pointable.tipPosition);
	Utils.drawCircle(_context, coords[0] - 10, coords[1] - 10, 10);
	};

	for ( var idx = 0; idx < frame.pointables.length; ++idx ) {
	drawPointable(frame.pointables[idx]);
	}
	}

	var instance = { };
	instance.init = function() {
	_canvas = $("#main-canvas")[0];
	_context = _canvas.getContext('2d');

	$(window).on('resize', instance.resize);

	instance.resize();
	return this;
	};

	instance.run = function() {
	Leap.loop(_controllerOptions, instance.onLeapFrame);
	};

	instance.resize = function() {
	_canvas.width = document.documentElement.clientWidth;
	_canvas.height = document.documentElement.clientHeight;
	};

	instance.onLeapFrame = function(frame) {
	_drawBackground();
	_drawPointables(frame);
	};

	return instance;
	});

	$(document).ready(function() {
	(new HelloLeap()).init().run();
	});