A Pen by Tim Lucas.

index.html

<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>

Leap-Motion-Insult-Giraffe-Puppets.markdown

Leap Motion Insult Giraffe Puppets

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.

A Pen by Tim Lucas on CodePen.

License.

script.js

(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');
  };

})();

style.css

* { 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; }