add decomposed gif

tmpvar · Oct 19, 2012 · 617cf14 · 617cf14
1 parent 12c604a
commit 617cf14
Show file tree

Hide file tree

Showing 147 changed files with 51 additions and 5 deletions.
diff --git a/demos/drumpad/img/image-001.jpeg b/demos/drumpad/img/image-001.jpeg
diff --git a/demos/drumpad/img/image-002.jpeg b/demos/drumpad/img/image-002.jpeg
diff --git a/demos/drumpad/img/image-003.jpeg b/demos/drumpad/img/image-003.jpeg
diff --git a/demos/drumpad/img/image-004.jpeg b/demos/drumpad/img/image-004.jpeg
diff --git a/demos/drumpad/img/image-005.jpeg b/demos/drumpad/img/image-005.jpeg
diff --git a/demos/drumpad/img/image-006.jpeg b/demos/drumpad/img/image-006.jpeg
diff --git a/demos/drumpad/img/image-007.jpeg b/demos/drumpad/img/image-007.jpeg
diff --git a/demos/drumpad/img/image-008.jpeg b/demos/drumpad/img/image-008.jpeg
diff --git a/demos/drumpad/img/image-009.jpeg b/demos/drumpad/img/image-009.jpeg
diff --git a/demos/drumpad/img/image-010.jpeg b/demos/drumpad/img/image-010.jpeg
diff --git a/demos/drumpad/img/image-011.jpeg b/demos/drumpad/img/image-011.jpeg
diff --git a/demos/drumpad/img/image-012.jpeg b/demos/drumpad/img/image-012.jpeg
diff --git a/demos/drumpad/img/image-013.jpeg b/demos/drumpad/img/image-013.jpeg
diff --git a/demos/drumpad/img/image-014.jpeg b/demos/drumpad/img/image-014.jpeg
diff --git a/demos/drumpad/img/image-015.jpeg b/demos/drumpad/img/image-015.jpeg
diff --git a/demos/drumpad/img/image-016.jpeg b/demos/drumpad/img/image-016.jpeg
diff --git a/demos/drumpad/img/image-017.jpeg b/demos/drumpad/img/image-017.jpeg
diff --git a/demos/drumpad/img/image-018.jpeg b/demos/drumpad/img/image-018.jpeg
diff --git a/demos/drumpad/img/image-019.jpeg b/demos/drumpad/img/image-019.jpeg
diff --git a/demos/drumpad/img/image-020.jpeg b/demos/drumpad/img/image-020.jpeg
diff --git a/demos/drumpad/img/image-021.jpeg b/demos/drumpad/img/image-021.jpeg
diff --git a/demos/drumpad/img/image-022.jpeg b/demos/drumpad/img/image-022.jpeg
diff --git a/demos/drumpad/img/image-023.jpeg b/demos/drumpad/img/image-023.jpeg
diff --git a/demos/drumpad/img/image-024.jpeg b/demos/drumpad/img/image-024.jpeg
diff --git a/demos/drumpad/img/image-025.jpeg b/demos/drumpad/img/image-025.jpeg
diff --git a/demos/drumpad/img/image-026.jpeg b/demos/drumpad/img/image-026.jpeg
diff --git a/demos/drumpad/img/image-027.jpeg b/demos/drumpad/img/image-027.jpeg
diff --git a/demos/drumpad/img/image-028.jpeg b/demos/drumpad/img/image-028.jpeg
diff --git a/demos/drumpad/img/image-029.jpeg b/demos/drumpad/img/image-029.jpeg
diff --git a/demos/drumpad/img/image-030.jpeg b/demos/drumpad/img/image-030.jpeg
diff --git a/demos/drumpad/img/image-031.jpeg b/demos/drumpad/img/image-031.jpeg
diff --git a/demos/drumpad/img/image-032.jpeg b/demos/drumpad/img/image-032.jpeg
diff --git a/demos/drumpad/img/image-033.jpeg b/demos/drumpad/img/image-033.jpeg
diff --git a/demos/drumpad/img/image-034.jpeg b/demos/drumpad/img/image-034.jpeg
diff --git a/demos/drumpad/img/image-035.jpeg b/demos/drumpad/img/image-035.jpeg
diff --git a/demos/drumpad/img/image-036.jpeg b/demos/drumpad/img/image-036.jpeg
diff --git a/demos/drumpad/img/image-037.jpeg b/demos/drumpad/img/image-037.jpeg
diff --git a/demos/drumpad/img/image-038.jpeg b/demos/drumpad/img/image-038.jpeg
diff --git a/demos/drumpad/img/image-039.jpeg b/demos/drumpad/img/image-039.jpeg
diff --git a/demos/drumpad/img/image-040.jpeg b/demos/drumpad/img/image-040.jpeg
diff --git a/demos/drumpad/img/image-041.jpeg b/demos/drumpad/img/image-041.jpeg
diff --git a/demos/drumpad/img/image-042.jpeg b/demos/drumpad/img/image-042.jpeg
diff --git a/demos/drumpad/img/image-043.jpeg b/demos/drumpad/img/image-043.jpeg
diff --git a/demos/drumpad/img/image-044.jpeg b/demos/drumpad/img/image-044.jpeg
diff --git a/demos/drumpad/img/image-045.jpeg b/demos/drumpad/img/image-045.jpeg
diff --git a/demos/drumpad/img/image-046.jpeg b/demos/drumpad/img/image-046.jpeg
diff --git a/demos/drumpad/img/image-047.jpeg b/demos/drumpad/img/image-047.jpeg
diff --git a/demos/drumpad/img/image-048.jpeg b/demos/drumpad/img/image-048.jpeg
diff --git a/demos/drumpad/img/image-049.jpeg b/demos/drumpad/img/image-049.jpeg
diff --git a/demos/drumpad/img/image-050.jpeg b/demos/drumpad/img/image-050.jpeg
diff --git a/demos/drumpad/img/image-051.jpeg b/demos/drumpad/img/image-051.jpeg
diff --git a/demos/drumpad/img/image-052.jpeg b/demos/drumpad/img/image-052.jpeg
diff --git a/demos/drumpad/img/image-053.jpeg b/demos/drumpad/img/image-053.jpeg
diff --git a/demos/drumpad/img/image-054.jpeg b/demos/drumpad/img/image-054.jpeg
diff --git a/demos/drumpad/img/image-055.jpeg b/demos/drumpad/img/image-055.jpeg
diff --git a/demos/drumpad/img/image-056.jpeg b/demos/drumpad/img/image-056.jpeg
diff --git a/demos/drumpad/img/image-057.jpeg b/demos/drumpad/img/image-057.jpeg
diff --git a/demos/drumpad/img/image-058.jpeg b/demos/drumpad/img/image-058.jpeg
diff --git a/demos/drumpad/img/image-059.jpeg b/demos/drumpad/img/image-059.jpeg
diff --git a/demos/drumpad/img/image-060.jpeg b/demos/drumpad/img/image-060.jpeg
diff --git a/demos/drumpad/img/image-061.jpeg b/demos/drumpad/img/image-061.jpeg
diff --git a/demos/drumpad/img/image-062.jpeg b/demos/drumpad/img/image-062.jpeg
diff --git a/demos/drumpad/img/image-063.jpeg b/demos/drumpad/img/image-063.jpeg
diff --git a/demos/drumpad/img/image-064.jpeg b/demos/drumpad/img/image-064.jpeg
diff --git a/demos/drumpad/img/image-065.jpeg b/demos/drumpad/img/image-065.jpeg
diff --git a/demos/drumpad/img/image-066.jpeg b/demos/drumpad/img/image-066.jpeg
diff --git a/demos/drumpad/img/image-067.jpeg b/demos/drumpad/img/image-067.jpeg
diff --git a/demos/drumpad/img/image-068.jpeg b/demos/drumpad/img/image-068.jpeg
diff --git a/demos/drumpad/img/image-069.jpeg b/demos/drumpad/img/image-069.jpeg
diff --git a/demos/drumpad/img/image-070.jpeg b/demos/drumpad/img/image-070.jpeg
diff --git a/demos/drumpad/img/image-071.jpeg b/demos/drumpad/img/image-071.jpeg
diff --git a/demos/drumpad/img/image-072.jpeg b/demos/drumpad/img/image-072.jpeg
diff --git a/demos/drumpad/img/image-073.jpeg b/demos/drumpad/img/image-073.jpeg
diff --git a/demos/drumpad/img/image-074.jpeg b/demos/drumpad/img/image-074.jpeg
diff --git a/demos/drumpad/img/image-075.jpeg b/demos/drumpad/img/image-075.jpeg
diff --git a/demos/drumpad/img/image-076.jpeg b/demos/drumpad/img/image-076.jpeg
diff --git a/demos/drumpad/img/image-077.jpeg b/demos/drumpad/img/image-077.jpeg
diff --git a/demos/drumpad/img/image-078.jpeg b/demos/drumpad/img/image-078.jpeg
diff --git a/demos/drumpad/img/image-079.jpeg b/demos/drumpad/img/image-079.jpeg
diff --git a/demos/drumpad/img/image-080.jpeg b/demos/drumpad/img/image-080.jpeg
diff --git a/demos/drumpad/img/image-081.jpeg b/demos/drumpad/img/image-081.jpeg
diff --git a/demos/drumpad/img/image-082.jpeg b/demos/drumpad/img/image-082.jpeg
diff --git a/demos/drumpad/img/image-083.jpeg b/demos/drumpad/img/image-083.jpeg
diff --git a/demos/drumpad/img/image-084.jpeg b/demos/drumpad/img/image-084.jpeg
diff --git a/demos/drumpad/img/image-085.jpeg b/demos/drumpad/img/image-085.jpeg
diff --git a/demos/drumpad/img/image-086.jpeg b/demos/drumpad/img/image-086.jpeg
diff --git a/demos/drumpad/img/image-087.jpeg b/demos/drumpad/img/image-087.jpeg
diff --git a/demos/drumpad/img/image-088.jpeg b/demos/drumpad/img/image-088.jpeg
diff --git a/demos/drumpad/img/image-089.jpeg b/demos/drumpad/img/image-089.jpeg
diff --git a/demos/drumpad/img/image-090.jpeg b/demos/drumpad/img/image-090.jpeg
diff --git a/demos/drumpad/img/image-091.jpeg b/demos/drumpad/img/image-091.jpeg
diff --git a/demos/drumpad/img/image-092.jpeg b/demos/drumpad/img/image-092.jpeg
diff --git a/demos/drumpad/img/image-093.jpeg b/demos/drumpad/img/image-093.jpeg
diff --git a/demos/drumpad/img/image-094.jpeg b/demos/drumpad/img/image-094.jpeg
diff --git a/demos/drumpad/img/image-095.jpeg b/demos/drumpad/img/image-095.jpeg
diff --git a/demos/drumpad/img/image-096.jpeg b/demos/drumpad/img/image-096.jpeg
diff --git a/demos/drumpad/img/image-097.jpeg b/demos/drumpad/img/image-097.jpeg
diff --git a/demos/drumpad/img/image-098.jpeg b/demos/drumpad/img/image-098.jpeg
diff --git a/demos/drumpad/img/image-099.jpeg b/demos/drumpad/img/image-099.jpeg
diff --git a/demos/drumpad/img/image-100.jpeg b/demos/drumpad/img/image-100.jpeg
diff --git a/demos/drumpad/img/image-101.jpeg b/demos/drumpad/img/image-101.jpeg
diff --git a/demos/drumpad/img/image-102.jpeg b/demos/drumpad/img/image-102.jpeg
diff --git a/demos/drumpad/img/image-103.jpeg b/demos/drumpad/img/image-103.jpeg
diff --git a/demos/drumpad/img/image-104.jpeg b/demos/drumpad/img/image-104.jpeg
diff --git a/demos/drumpad/img/image-105.jpeg b/demos/drumpad/img/image-105.jpeg
diff --git a/demos/drumpad/img/image-106.jpeg b/demos/drumpad/img/image-106.jpeg
diff --git a/demos/drumpad/img/image-107.jpeg b/demos/drumpad/img/image-107.jpeg
diff --git a/demos/drumpad/img/image-108.jpeg b/demos/drumpad/img/image-108.jpeg
diff --git a/demos/drumpad/img/image-109.jpeg b/demos/drumpad/img/image-109.jpeg
diff --git a/demos/drumpad/img/image-110.jpeg b/demos/drumpad/img/image-110.jpeg
diff --git a/demos/drumpad/img/image-111.jpeg b/demos/drumpad/img/image-111.jpeg
diff --git a/demos/drumpad/img/image-112.jpeg b/demos/drumpad/img/image-112.jpeg
diff --git a/demos/drumpad/img/image-113.jpeg b/demos/drumpad/img/image-113.jpeg
diff --git a/demos/drumpad/img/image-114.jpeg b/demos/drumpad/img/image-114.jpeg
diff --git a/demos/drumpad/img/image-115.jpeg b/demos/drumpad/img/image-115.jpeg
diff --git a/demos/drumpad/img/image-116.jpeg b/demos/drumpad/img/image-116.jpeg
diff --git a/demos/drumpad/img/image-117.jpeg b/demos/drumpad/img/image-117.jpeg
diff --git a/demos/drumpad/img/image-118.jpeg b/demos/drumpad/img/image-118.jpeg
diff --git a/demos/drumpad/img/image-119.jpeg b/demos/drumpad/img/image-119.jpeg
diff --git a/demos/drumpad/img/image-120.jpeg b/demos/drumpad/img/image-120.jpeg
diff --git a/demos/drumpad/img/image-121.jpeg b/demos/drumpad/img/image-121.jpeg
diff --git a/demos/drumpad/img/image-122.jpeg b/demos/drumpad/img/image-122.jpeg
diff --git a/demos/drumpad/img/image-123.jpeg b/demos/drumpad/img/image-123.jpeg
diff --git a/demos/drumpad/img/image-124.jpeg b/demos/drumpad/img/image-124.jpeg
diff --git a/demos/drumpad/img/image-125.jpeg b/demos/drumpad/img/image-125.jpeg
diff --git a/demos/drumpad/img/image-126.jpeg b/demos/drumpad/img/image-126.jpeg
diff --git a/demos/drumpad/img/image-127.jpeg b/demos/drumpad/img/image-127.jpeg
diff --git a/demos/drumpad/img/image-128.jpeg b/demos/drumpad/img/image-128.jpeg
diff --git a/demos/drumpad/img/image-129.jpeg b/demos/drumpad/img/image-129.jpeg
diff --git a/demos/drumpad/img/image-130.jpeg b/demos/drumpad/img/image-130.jpeg
diff --git a/demos/drumpad/img/image-131.jpeg b/demos/drumpad/img/image-131.jpeg
diff --git a/demos/drumpad/img/image-132.jpeg b/demos/drumpad/img/image-132.jpeg
diff --git a/demos/drumpad/img/image-133.jpeg b/demos/drumpad/img/image-133.jpeg
diff --git a/demos/drumpad/img/image-134.jpeg b/demos/drumpad/img/image-134.jpeg
diff --git a/demos/drumpad/img/image-135.jpeg b/demos/drumpad/img/image-135.jpeg
diff --git a/demos/drumpad/img/image-136.jpeg b/demos/drumpad/img/image-136.jpeg
diff --git a/demos/drumpad/img/image-137.jpeg b/demos/drumpad/img/image-137.jpeg
diff --git a/demos/drumpad/img/image-138.jpeg b/demos/drumpad/img/image-138.jpeg
diff --git a/demos/drumpad/img/image-139.jpeg b/demos/drumpad/img/image-139.jpeg
diff --git a/demos/drumpad/img/image-140.jpeg b/demos/drumpad/img/image-140.jpeg
diff --git a/demos/drumpad/img/image-141.jpeg b/demos/drumpad/img/image-141.jpeg
diff --git a/demos/drumpad/img/image-142.jpeg b/demos/drumpad/img/image-142.jpeg
diff --git a/demos/drumpad/img/image-143.jpeg b/demos/drumpad/img/image-143.jpeg
diff --git a/demos/drumpad/img/image-144.jpeg b/demos/drumpad/img/image-144.jpeg
diff --git a/demos/drumpad/img/image-145.jpeg b/demos/drumpad/img/image-145.jpeg
diff --git a/demos/drumpad/index.html b/demos/drumpad/index.html
@@ -13,7 +13,11 @@
     <meta name="viewport" content="width=device-width">
 
 </head>
-<body>    
+<body>
+  <div style="margin: 0 auto; border: 1px solid #000; width: 600px; height: 337px" id="image">
+    <img width="600" src="https://twimg0-a.akamaihd.net/profile_images/2558188794/ko6lqflywk079x0mn5gn.png" />
+  </div>
+
   <audio id="kick" src="kick.wav"></audio>
   <audio id="ding" src="ding.wav"></audio>
   <audio id="catmeow" src="catmeow.wav"></audio>

diff --git a/demos/drumpad/main.js b/demos/drumpad/main.js
@@ -14,9 +14,51 @@ var sounds = {
   3: document.querySelector('#meow')
 }
 
+var images = window.images = [];
+for (var i = 1; i<144; i++) {
+  var seq = i + "";
+  while(seq.length < 3) {
+    seq = "0" + seq;
+  }
+  var img = new Image();
+  img.src = "/img/image-" + seq + '.jpeg';
+  img.width = 600;
+  images.push(img)
+}
+
+var animations = [
+  { start : 11, end : 38, fps : 60 },
+  { start : 1, end : 10 },
+  { start : 50, end : 70 },
+  { start : 105, end : 120, fps : 6  }
+];
+
+var bouncy = {};
+
+var imageHolder = document.getElementById('image');
+var timer, idx = 1;
 socket.on('hit', function(hit) {
-  console.log(+new Date())
-  var element = sounds[hit.pad]
-  element.currentTime = 0
-  element.play()
+  var element = sounds[hit.pad];
+  var now = Date.now();
+  if (!bouncy[hit.pad] || now - bouncy[hit.pad] > 150) {
+    bouncy[hit.pad] = now;
+  } else { return; }
+
+  var animation = animations[hit.pad];
+
+  element.currentTime = 0;
+  idx = animation.start;
+  clearInterval(timer);
+  timer = setInterval(function() {
+    imageHolder.innerHTML = "";
+    imageHolder.appendChild(images[idx++]);
+    if (idx >= animation.end) {
+      if (animation.loop) {
+        idx = animation.start;
+      } else {
+        clearInterval(timer);
+      }
+    }
+  }, 1000/(animation.fps || 30));
+  element.play();
 })