I can move the picture around the browser screen currently with one hand. What I would like to do is increase the size of the image if two hands are used and moved apart from each other. How would I do this?
<html>
<head>
<script src="http://js.leapmotion.com/leap-0.4.2.js"></script>
<style type="text/css">
#position {
width: 200px;
height: 125px;
position: absolute;
background-image: url("kyle.jpg");
}
</style>
</head>
<body>
<h1> Hello. This is my simple leap motion animation using javascript and leap.js </h1>
<p> To control this animaition, move your finger and my picture will follow based on your fingers location</p>
<p> If you move your finger into my picture in the middle of the screen, there will be output displayed in the debug console, letting the user know they have touched my picture </p>
<div id="position"></div>
</body>
<script type="text/javascript">
Leap.loop(function(frame) {
if (frame.pointables.length > 0) {
var position = frame.pointables[0].stabilizedTipPosition;
var normalized = frame.interactionBox.normalizePoint(position);
var element = document.getElementById("position");
element.style.left = window.innerWidth * normalized[0];
element.style.top = window.innerHeight * (1 - normalized[1]);
}
});
</script>
</html>