Skip to content

Instantly share code, notes, and snippets.

@plainspace

plainspace/hppy-sd.markdown

Created December 25, 2013 06:30
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 plainspace/8120687 to your computer and use it in GitHub Desktop.
Save plainspace/8120687 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Jared Volpe.
Raw
index.html
<html lang="en">
<head>
</head>
<body>
<script src="//js.leapmotion.com/0.2.1/leap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="smiley">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Your_Icon" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path fill="#000000" d="M64.029,29.54l3.783-5.404c1.029-1.47,0.672-3.497-0.799-4.526c-1.469-1.029-3.495-0.673-4.525,0.798 L58.223,26.5c-0.087,0.124-0.15,0.257-0.218,0.388c-0.802-0.243-1.618-0.455-2.448-0.625l1.488-2.127 c1.029-1.471,0.672-3.497-0.799-4.526c-1.47-1.029-3.496-0.672-4.525,0.798l-3.765,5.377c-0.692,0.051-1.379,0.121-2.057,0.222 l1.311-1.872c1.03-1.47,0.672-3.497-0.798-4.526c-1.47-1.029-3.497-0.673-4.526,0.798l-6.13,8.755 c-0.163,0.233-0.279,0.482-0.374,0.737C27.57,34.789,22.36,43.465,22.36,53.34c0,15.24,12.399,27.639,27.64,27.639 S77.639,68.58,77.639,53.34C77.639,43.219,72.166,34.355,64.029,29.54z M50,74.479c-11.656,0-21.139-9.482-21.139-21.139 c0-11.655,9.483-21.138,21.139-21.138s21.139,9.483,21.139,21.138C71.139,64.996,61.656,74.479,50,74.479z"></path>
<g>
<path fill="#000000" d="M50,67.843c-3.955,0-7.91-1.505-10.92-4.516c-1.27-1.27-1.27-3.327,0-4.597 c1.27-1.269,3.327-1.269,4.596,0c3.487,3.487,9.162,3.487,12.648,0c1.27-1.269,3.327-1.269,4.597,0 c1.269,1.27,1.269,3.327,0,4.597C57.91,66.338,53.955,67.843,50,67.843z"></path>
</g>
</g>
</svg>
</div>
<div id="sad">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Your_Icon" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path fill="#000000" d="M50,22.361c-15.24,0-27.64,12.398-27.64,27.638c0,15.24,12.399,27.64,27.64,27.64s27.64-12.399,27.64-27.64 C77.64,34.76,65.24,22.361,50,22.361z M50,71.138c-11.656,0-21.139-9.482-21.139-21.139c0-8.456,4.993-15.765,12.185-19.142 l8.891,12.697c0.633,0.902,1.641,1.386,2.666,1.386c0.644,0,1.294-0.19,1.861-0.588c1.47-1.03,1.827-3.057,0.798-4.527 l-7.586-10.833c0.599-0.065,1.205-0.104,1.817-0.118l9.059,12.936c0.632,0.903,1.641,1.386,2.665,1.386 c0.644,0,1.294-0.19,1.861-0.588c1.471-1.029,1.828-3.057,0.798-4.526l-5.122-7.313c7.299,3.334,12.385,10.697,12.385,19.231 C71.139,61.655,61.656,71.138,50,71.138z"></path>
<g>
<path fill="#000000" d="M50,54.835c4.125,0,8.004,1.606,10.921,4.524c1.269,1.269,1.269,3.326,0,4.596 c-1.271,1.269-3.328,1.269-4.597,0c-1.689-1.689-3.936-2.619-6.325-2.619c-2.389,0-4.636,0.93-6.324,2.619 c-1.27,1.27-3.327,1.27-4.597,0s-1.27-3.327,0-4.596C41.997,56.441,45.875,54.835,50,54.835z"></path>
</g>
</g>
</svg>
</div>
</body>
</html>
Raw
script.js
Leap.loop(function(frame) {
if(frame.fingers.length > 1) {
swap("smiley");
}
else {
swap("sad");
}
});
// Swap is used to change from the smiley to the sad images
// if 0 is passed in, we will be sad
// if 1 is passed in, we will be smiley
function swap(fingerPosition) {
if (fingerPosition == "sad") {
$("#smiley").hide();
$("#sad").show();
}
else if (fingerPosition == "smiley") {
$("#smiley").show();
$("#sad").hide();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment