<html>
<head>
<title>DOM Visualizer - Leap</title>
<script src="//js.leapmotion.com/0.2.0-beta1/leap.min.js"></script>
<style>
*,*:before {
margin: 0;
padding: 0;
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button {
position: relative;
z-index: 999;
padding: .5em;
}
#app {
position: absolute;
width: 100%;
height: 100%;
font-size: 200%;
overflow: hidden;
background-color: #101010;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
#scene,
#scene:before {
position: absolute;
left: 50%;
top: 50%;
width: 40em;
height: 40em;
margin: -20em 0 0 -20em;
border: 4px solid #A0A0A0;
background-color: rgba(255,255,255,.1);
background-image:
-webkit-linear-gradient(rgba(255,255,255,.4) .1em, transparent .1em),
-webkit-linear-gradient(0deg, rgba(255,255,255,.4) .1em, transparent .1em),
-webkit-linear-gradient(rgba(255,255,255,.3) .05em, transparent .05em),
-webkit-linear-gradient(0deg, rgba(255,255,255,.3) .05em, transparent .05em);
background-image:
linear-gradient(rgba(255,255,255,.4) .1em, transparent .1em),
linear-gradient(90deg, rgba(255,255,255,.4) .1em, transparent .1em),
linear-gradient(rgba(255,255,255,.3) .05em, transparent .05em),
linear-gradient(90deg, rgba(255,255,255,.3) .05em, transparent .05em);
background-size: 5em 5em, 5em 5em, 1em 1em, 1em 1em;
background-position: -.1em -.1em, -.1em -.1em, -.05em -.05em, -.05em -.05em;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#scene {
-webkit-transform: rotate3d(1, 0, 0, 75deg);
transform: perspective(650px) rotate3d(1, 0, 0, 75deg)
}
#scene:before {
content: '';
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotateX(90deg);
}
.cube {
background-color: red;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(19.5em, 19.5em, 0em);
transform: translate3d(19.5em, 19.5em, 0em);
}
.finger,
.sphere {
position: absolute;
left: 50%;
top: 50%;
width: 1em;
height: 1em;
margin: -.5em 0 0 -.5em;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(14.5em, 14.5em, 0);
transform: translate3d(14.5em, 14.5em, 0);
}
.finger {
opacity: .8;
height: 3em;
}
.sphere {
opacity: .3;
display: none;
font-size: 100px;
}
.show-hands .sphere {
display: block;
}
.face {
position: absolute;
width: 1em;
height: 1em;
background-color: inherit;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
}
.cube .face.tp {
-webkit-transform: translate3d(0, 0, 1em);
}
.cube .face.ft {
-webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, -1em);
transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, -1em);
}
.cube .face.bk {
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
}
.cube .face.lt {
-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(-1em, 0, 0);
transform: rotate3d(0, 1, 0, 90deg) translate3d(-1em, 0, 0);
}
.cube .face.rt {
-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(-1em, 0, 1em);
transform: rotate3d(0, 1, 0, 90deg) translate3d(-1em, 0, 1em);
}
.finger .face.tp {
-webkit-transform: translate3d(0, 0, 1em);
transform: translate3d(0, 0, 1em);
height: 3em;
}
.finger .face.ft {
-webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, -3em);
transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, -3em);
}
.finger .face.bk {
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
}
.finger .face.lt {
-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(-1em, 0, 0);
transform: rotate3d(0, 1, 0, 90deg) translate3d(-1em, 0, 0);
height: 3em;
}
.finger .face.rt {
-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(-1em, 0, 1em);
transform: rotate3d(0, 1, 0, 90deg) translate3d(-1em, 0, 1em);
height: 3em;
}
</style>
</head>
<body>
<div id="app" class="show-hands">
<button id="showHands">Show Hands</button>
<button id="hideHands">hide Hands</button>
<div id="scene">
<div id="cube" class="cube">
<div class="face tp"></div>
<div class="face lt"></div>
<div class="face rt"></div>
<div class="face ft"></div>
<div class="face bk"></div>
</div>
<div id="finger" class="cube finger">
<div class="face tp"></div>
<div class="face lt"></div>
<div class="face rt"></div>
<div class="face ft"></div>
<div class="face bk"></div>
</div>
<div id="sphere" class="cube sphere">
<div class="face tp"></div>
<div class="face lt"></div>
<div class="face rt"></div>
<div class="face ft"></div>
<div class="face bk"></div>
</div>
</div>
</div>
</body>
<script>
function move(node, posX, posY, posZ, rotX, rotY, rotZ) {
var style = node.style;
style.transform =
style.webkitTransform = 'translate3d(' + posX + 'px, ' + posY + 'px, ' + posZ + 'px) ' +
'rotate3d(1, 0, 0, ' + rotX + 'deg) rotate3d(0, 0, 1, ' + rotZ + 'deg)';
}
function getNode(id, templateNode) {
var node = pool[id];
if (!node) {
node = templateNode.cloneNode(true);
node.id = id;
node.style.backgroundColor = randomColor();
scene.appendChild(node);
pool[id] = node;
}
return node;
}
function randomColor() {
return '#' + Math.floor(Math.random() * 0x1000000).toString(16);
}
var app = document.getElementById('app');
var scene = document.getElementById('scene');
var sphereTemplate = document.getElementById('sphere');
var fingerTemplate = document.getElementById('finger');
var pool = {};
Leap.loop(function(frame) {
var ids = {};
var hands = frame.hands;
var pointables = frame.pointables;
for (var i = 0, hand; hand = hands[i++];) {
var posX = (hand.palmPosition[0] * 3);
var posY = (hand.palmPosition[2] * 3) - 200;
var posZ = (hand.palmPosition[1] * 3) - 400;
var rotX = (hand._rotation[2] * 90);
var rotY = (hand._rotation[1] * 90);
var rotZ = (hand._rotation[0] * 90);
var node = getNode(hand.id, sphereTemplate);
move(node, posX, posY, posZ, rotX, rotY, rotZ);
ids[hand.id] = true;
}
for (var i = 0, pointable; pointable = pointables[i++];) {
var posX = (pointable.tipPosition[0] * 3);
var posY = (pointable.tipPosition[2] * 3) - 200;
var posZ = (pointable.tipPosition[1] * 3) - 400;
var dirX = -(pointable.direction[1] * 90);
var dirY = -(pointable.direction[2] * 90);
var dirZ = (pointable.direction[0] * 90);
node = getNode(pointable.id, fingerTemplate);
move(node, posX, posY, posZ, dirX, dirY, dirZ);
ids[pointable.id] = true;
}
for (var id in pool) {
if (!ids[id]) {
scene.removeChild(pool[id]);
delete pool[id];
}
}
document.getElementById('showHands').addEventListener('click', function() {
app.className = 'show-hands';
}, false);
document.getElementById('hideHands').addEventListener('click', function() {
app.className = '';
}, false);
});
</script>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.