At Decompress 2014 I had a play with hooking up a Leap Motion to the CSSConf Australia 2014 giraffes.
See https://www.youtube.com/watch?v=4nM3y8b_rso for a video of them in action.
<script src="//js.leapmotion.com/leap-0.4.3.js"></script> | |
<div class="stage"> | |
<div class="puppet puppet--looking-left"> | |
<img src="http://2014.cssconf.com.au/images/illustrations/giraffe-1.svg" class="puppet__image"> | |
<p class="puppet__balloon puppet__balloon--hidden"></p> | |
</div> | |
<div class="puppet puppet--looking-right"> | |
<img src="http://2014.cssconf.com.au/images/illustrations/giraffe-2.svg" class="puppet__image"> | |
<p class="puppet__balloon puppet__balloon--hidden"></p> | |
</div> | |
</div> |
At Decompress 2014 I had a play with hooking up a Leap Motion to the CSSConf Australia 2014 giraffes.
See https://www.youtube.com/watch?v=4nM3y8b_rso for a video of them in action.
(function() { | |
"use strict"; | |
var insults = [ | |
"This is the END for you, you gutter-crawling cur!", | |
"Soon you'll be wearing my sword like a shish kebab!", | |
"My handkerchief will wipe up your blood!", | |
"People fall at my feet when they see me coming.", | |
"I once owned a dog that was smarter then you.", | |
"You make me want to puke.", | |
"Nobody's ever drawn blood from me and nobody ever will.", | |
"You fight like a dairy farmer.", | |
"I got this scar on my face during a mighty struggle!", | |
"Have you stopped wearing diapers yet?", | |
"I've heard you were a contemptible sneak.", | |
"You're no match for my brains, you poor fool.", | |
"You have the manners of a beggar.", | |
"I'm not going to take your insolence sitting down!", | |
"There are no words for how disgusting you are.", | |
"I've spoken with apes more polite then you." | |
]; | |
var comebacks = [ | |
"And I've got a little TIP for you, get the POINT?", | |
"First you better stop waiving it like a feather-duster.", | |
"So you got that job as janitor, after all.", | |
"Even BEFORE they smell your breath?", | |
"He must have taught you everything you know.", | |
"You make me think somebody already did.", | |
"You run THAT fast?", | |
"How appropriate. You fight like a cow.", | |
"I hope now you've learned to stop picking your nose.", | |
"Why, did you want to borrow one?", | |
"Too bad no one's ever heard of YOU at all.", | |
"I'd be in real trouble if you ever used them.", | |
"I wanted to make sure you'd feel comfortable with me.", | |
"Your hemorrhoids are flaring up again, eh?", | |
"Yes there are. You just never learned them.", | |
"I'm glad to hear you attended your family reunion." | |
]; | |
var leftHand = new Puppet(document.querySelector('.puppet--looking-left'), insults), | |
rightHand = new Puppet(document.querySelector('.puppet--looking-right'), comebacks); | |
Leap.loop({enableGestures: true}, function(frame) { | |
// Hand positions | |
for (var i = 0; i < frame.hands.length; i++) { | |
var leapHand = frame.hands[i]; | |
puppetForHand(leapHand).setHandPosition(leapHand.stabilizedPalmPosition); | |
} | |
// Gestures | |
for (var i = 0; i < frame.gestures.length; i++) { | |
var gesture = frame.gestures[i]; | |
if (gesture.type == "keyTap" && gesture.state == "stop") { | |
for (var j = 0; j < gesture.handIds; j++) { | |
var leapHand = frame.hand(gesture.handIds[j]); | |
if (leapHand.stabilizedPalmPosition) | |
puppetForHand(leapHand).speak(); | |
} | |
} | |
} | |
function puppetForHand(hand) { | |
if (hand.stabilizedPalmPosition[0] < 0) | |
return leftHand; | |
else | |
return rightHand; | |
} | |
}); | |
function Puppet(puppet, messages) { | |
this.puppet = puppet; | |
this.messages = messages; | |
} | |
Puppet.prototype.setHandPosition = function(position) { | |
var height = calculateHeight(), | |
translateX = calculateTranslate(); | |
translate(-1 * height * 100 + "%", translateX * 100 / 5 + "vw"); | |
function calculateHeight() { | |
var minY = 100, | |
maxY = 250; | |
var height = (position[1] - minY) / (maxY - minY); | |
if (height < 0) height = 0; | |
if (height > 1) height = 1; | |
return height; | |
} | |
function calculateTranslate() { | |
var maxPos = 90; | |
return position[0] / maxPos; | |
} | |
function translate(x, y) { | |
this.puppet.style.webkitTransform = "translateY(" + x + ") translateX(" + y + ")"; | |
} | |
}; | |
Puppet.prototype.speak = function() { | |
var balloon = this.puppet.querySelector('.puppet__balloon'), | |
message = messages[Math.floor(Math.random() * messages.length) - 1]; | |
balloon.textContent = message; | |
balloon.classList.remove('puppet__balloon--hidden'); | |
}; | |
})(); |
* { margin: 0; padding: 0; box-sizing: border-box; } | |
html { background-color: #FE6600; } | |
.puppet { position: absolute; top: 100%; transform: translateY(-50%); } | |
.puppet--looking-left { left: 25%; } | |
.puppet--looking-left .puppet__image { width: 130px; } | |
.puppet--looking-right { right: 25%; } | |
.puppet--looking-right .puppet__image { width: 120px; } | |
.puppet__balloon { | |
width: 200%; | |
position: absolute; | |
bottom: 110%; | |
left: -50%; | |
padding: 18px 20px 20px 20px; | |
background-color: white; | |
border-radius: 10px; | |
text-align: center; | |
font: bold 24px/1 "Transat Text", "Comic Neue", "MS Comic Sans", "Comic Sans", sans-serif; | |
opacity: 1; | |
transition: opacity 1s; | |
} | |
.puppet__balloon--hidden { opacity: 0; } | |
.puppet__balloon--visible { opacity: 1; } |