Skip to content

Instantly share code, notes, and snippets.

@JMStewart
Created September 5, 2013 02:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JMStewart/6445394 to your computer and use it in GitHub Desktop.
Save JMStewart/6445394 to your computer and use it in GitHub Desktop.
LEAP: Simple movement
<!DOCTYPE html>
<html>
<head>
<script src="//js.leapmotion.com/0.2.0/leap.min.js"></script>
</head>
<body>
<div id="canvas">
<svg height="100%" width="100%">
<circle id="circle" cx="250" cy="250" r="50" stroke="black">
</svg>
</div>
<div id="data"></div>
</body>
<script>
console.log(document.getElementById("circle").getAttribute("cx"));
var pausedFrame = null;
var latestFrame = null;
var oldFrame = null;
window.onkeypress = function(e) {
if (e.charCode == 32) {
if (pausedFrame == null) {
pausedFrame = latestFrame;
} else {
pausedFrame = null;
}
}
};
var controller = new Leap.Controller({enableGestures: true});
controller.loop(function(frame) {
oldFrame = latestFrame;
latestFrame = frame;
//if(!pausedFrame)
//document.getElementById('data').innerHTML = (pausedFrame ? "<p><b>PAUSED</b></p>" : "") + "<div>"+(pausedFrame || latestFrame).dump()+"</div>";
var pointableCount = latestFrame.pointables.length;
var handCount = latestFrame.hands.length;
if(oldFrame && !pausedFrame && handCount == 1 && pointableCount >= 4){
var translation = latestFrame.hands[0].translation(oldFrame)
var centerX = document.getElementById("circle").getAttribute("cx");
document.getElementById("circle").setAttribute("cx", +centerX + (3 * translation[0]));
var centerY = document.getElementById("circle").getAttribute("cy");
document.getElementById("circle").setAttribute("cy", +centerY - (3 * translation[1]));
var radius = document.getElementById("circle").getAttribute("r");
document.getElementById("circle").setAttribute("r", +radius + translation[2]);
}
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment