A quick Leap Motion painter toy

by Admiral Potato

HTML

<script src="//js.leapmotion.com/0.2.0-beta1/leap.min.js"></script>
<script src="http://admiralpotato.github.io/js/npos3d/build/npos3d.min.js"></script>
<div id="out">Hold Shift to paint!</div>
<div id="log"></div>

CSS

#out, #log{
    position: absolute;
    top: 0;
    z-index: 2;
    color: #9f0;
    white-space: pre-wrap;
    font-family: monospace;
    opacity: 0.5;
}
#out:hover, #log:hover{
    opacity: 1;
}

JavaScript

var n = NPos3d,
	s = new n.Scene({
		globalCompositeOperation: 'lighter'
	}),
	handObjectList = [],
	pointHolder = new n.Ob3D({
		shape: {
			points: []
		},
		renderStyle: 'points',
		pointScale: 5,
		color: '#fff',
		renderAlways: true
	});
s.add(pointHolder);

var getHandObject = function(index){
	var output = handObjectList[index];
	if(output === undefined){
		output = new n.Ob3D({
			rot: [deg * -15, 0, 0],
			shape: n.Geom.axies
		});
		s.add(output);
		handObjectList[index] = output;
	}
	return output;
};






var pausedFrame = null;
var latestFrame = null;

var drawThings = false;

window.onkeypress = function(e) {
	if (e.keyCode == 32) {
		if (pausedFrame == null) {
			pausedFrame = latestFrame;
			console.log(pausedFrame);
		} else {
			pausedFrame = null;
		}
	}
};

document.addEventListener('keydown', function(event){
	console.log(event.keyCode);
	if(event.keyCode === 16){ //shift
		drawThings = true;
	}
});

document.addEventListener('keyup', function(event){
	console.log(event.keyCode);
	if(event.keyCode === 16){ //shift
		drawThings = false;
	}
});


var controller = new Leap.Controller({enableGestures: true});
controller.loop(function(frame) {
	var numHands = frame.hands.length,
		handIndex,
		handData,
		handObject,
		newPoint;
	latestFrame = frame;
	//document.getElementById('out').innerHTML = (pausedFrame ? "<p><b>PAUSED</b></p>" : "") + "<div>"+(pausedFrame || latestFrame).dump()+"</div>";


	if(numHands > 0){
		for(handIndex = 0; handIndex < numHands; handIndex += 1){
			handObject = getHandObject(handIndex);
			handData = frame.hands[handIndex];
			handObject.pos[0] = handData.palmPosition[0] * 3;
			handObject.pos[1] = (handData.palmPosition[1] - (s.cy / 2)) * -3;
			handObject.pos[2] = handData.palmPosition[2] * 3;
			document.getElementById('out').innerHTML = (pausedFrame ? "<p><b>PAUSED</b></p>" : "")
				+ "<div>"+(handData.palmPosition.join(' '))+"</div>"
				+ "<div>"+(handObject.pos.join(' '))+"</div>"
				+ "<div>HoldShift:...