with working measures

funklet.html

@@ -50,11 +50,12 @@
            <div id="explanation">Currently the Funklet machine only runs in Chrome (and Webkit nightlies, if that phrase means anything to you). It may soon run in Firefox too.</div>
            <button class="control" id="start">&#9654;</button>
            <button class="control" id="stop">&#9724;</button>
-           &nbsp;&nbsp;&nbsp;&nbsp;<span>@</span><input id="bpm" type="text" value="120"/><span>BPM</span>
+           &nbsp;&nbsp;&nbsp;&nbsp;<span>@</span><input id="bpm" type="text" value=""/><span>BPM</span>
          </form>
          <a href="#" id="half-time" style="left:180px" class="grey-button hoveronly">½</a>
          <a href="#" id="save" target="_blank" style="left:220px" class="grey-button hoveronly">¶</a>
          <a href="#" id="shortcuts" style="left:270px" class="grey-button hoveronly">⚡</a>
+         <div id="measures"></div>
          <div id="swing-meter" data-swing="0">
            <div></div>
            <div></div>

script/functions.js

@@ -65,6 +65,52 @@ var padValues = function(values, userMeasures) {
   return count;
 };
 
+var writeMeasures = function(count, measureBlock) {
+  if (count > 1) {
+    var $block = $(measureBlock).show();
+    var width = $block.width() / count;
+
+    do {
+      $block.append(
+        $('<div/>').addClass('measure').width(width-1).text(count)
+      );
+    } while (--count)
+
+    return $block.children();
+  } else {
+    return $();
+  }
+};
+
+var animateGridForMeasureChanges = function(diagram, grid, $blocks) {
+  var shouldAnimate = true;
+  var queued = false;
+  var $grid = $(grid);
+  var currentFrame = null;
+
+  var animate = function(frame, speed) {
+    $grid.animate({ top: (-((frame||currentFrame)/32 * 93)) }, speed || 100);
+  };
+
+  $(diagram)
+    .on('mouseenter', function() {
+      shouldAnimate = false;
+    })
+    .on('mouseleave', function() {
+      shouldAnimate = true;
+      if (queued) animate();
+    });
+
+  $blocks.on('click', function() {
+    animate((parseInt($(this).text(), 10) - 1) * 32, "slow");
+  });
+
+  return function(i) {
+    currentFrame = i;
+    shouldAnimate ? animate() : (queued = true);
+  };
+};
+
 /* sample loading */
 
 var loadSampleWithUrl = function(context, url, callback, progress) {
@@ -73,7 +119,10 @@ var loadSampleWithUrl = function(context, url, callback, progress) {
   request.responseType = "arraybuffer";
 
   request.onload = function() {
-    context.decodeAudioData(request.response, callback, callback);
+    context.decodeAudioData(request.response, callback, function() {
+      console.error("Could not load", url);
+      callback();
+    });
   };
 
   progress && (request.onprogress = progress);
@@ -149,6 +198,25 @@ var writeModifiersIntoTable = function(length, where, modifiedValues, hats) {
   return tds;
 };
 
+var makeGridDraggable = function(grid) {
+  var start = false;
+  var $grid = $(grid);
+  var offsetTop = $grid.offset().top;
+
+  $grid
+    .on('mousedown', function(event) {
+      start = event.pageY;
+    })
+    .on('mousemove', function(event) {
+      if (start !== false) {
+        $grid.css('top', event.pageY - offsetTop);
+      }
+    })
+    .on('mouseup', function() {
+      start = false;
+    });
+};
+
 /* listening for value changes */
 
 var listenForValuesFromRows = function(rows, values, limit, modifiers) {
@@ -423,4 +491,8 @@ var testForAudioSupport = function() {
     });
     throw Error("Funklet can't play here");
   }
+};
+
+var lamb = function(functionString) {
+  return new Function(["_"], 'return (' + functionString + ')')
 };

script/funklet.js

@@ -36,6 +36,12 @@ var alts = params.a
 var prefix = params.pf ? params.pf : "standard";
 var NO_VOLUMES = params.nv ? true : false;
 
+// shortcut to maestro mode
+if (params.maestro) {
+  prefix = "maestro";
+  NO_VOLUMES = true;
+}
+
 var count = padValues(values, measures);
 var mutes = [0, 0, 0];
 var originals = copyArray(values);
@@ -49,6 +55,17 @@ var trs = toarr(diagram.querySelectorAll(".tr"));
 var modifiers = writeModifiersIntoTable(count, trs[0], modifiedValues, values[0]);
 var rows = writeValuesIntoTable(values, trs.slice(1), names);
 
+var grid = getElement("grid");
+var measureBlocks = writeMeasures(count/32, getElement("measures"));
+var updateGrid = animateGridForMeasureChanges(diagram, grid, measureBlocks);
+//makeGridDraggable(grid);
+
+/*
+  --------------------------------------------------------------------
+  now we've set up the player, from here on out is about interactivity
+  --------------------------------------------------------------------
+*/
+
 testForAudioSupport();
 
 listenForModifiers(modifiers, modifiedValues, values);
@@ -111,9 +128,7 @@ var play = function() {
   var hatBack = function(lag) {
     runLightsWithCallback(0, function(_i, vol) {
       var mod = _i % 32;
-      if (_i % 32 === 0) {
-        $("#grid").css({ top: (-(_i/32 * 93)) });
-      }
+      if (_i % 32 === 0) updateGrid(_i);
 
       var modified = modifiedValues[_i];
       var bufferName = bffs.hat.c + vol;
@@ -136,7 +151,7 @@ var play = function() {
             : playSampleWithBuffer(context, buffers[bufferName], 0, 1, rates[0])
         }
       } else if (modified) {
-        playSampleWithBuffer(context, buffers.foothat, 0, 1, rates[0]);
+        playSampleWithBuffer(context, buffers[prefix+"/foothat"], 0, 1, rates[0]);
       }
     });
   };
@@ -156,7 +171,7 @@ var play = function() {
 
     runLightsWithCallback(2, function(_i, vol) {
       if (NO_VOLUMES) {
-        vol && playSampleWithBuffer(context, buffers[bffs.kick.c], 0, 1/(4/vol)*1.5, rates[2]);
+        vol && playSampleWithBuffer(context, buffers[bffs.kick.c], 0, 1/(4/vol)/1.5, rates[2]);
       } else {
         vol && playSampleWithBuffer(context, buffers[bffs.kick.c+vol], 0, 1, rates[2]);
       }
@@ -198,15 +213,18 @@ var play = function() {
   );
   listenForSave(getElement("save"), function() {
     stop();
-    return ([
+    var url = [
       "/funklet.html?vals=", values.map(function(vs){ return vs.join("") }).join(";"),
       "&mods=", modifiedValues.join(".").replace(/NaN|0/g, ""),
       "&b=", bpm.value,
       "&s=", (swing.value*12),
       "&jd=", jds.join(","),
       "&r=", rates.join(","),
       "&a=", alts.join("").replace(/false/g,"0").replace(/true/g,"1")
-    ].join(""));
+    ].join("");
+
+    if (params.maestro) url += "&maestro=true";
+    return url;
   });
 };
 
@@ -222,7 +240,7 @@ var loadEnvironment = function() {
     };
 
   var sampleNames = (function(bffs) {
-    return (["foothat"])
+    return ([prefix+"/foothat"])
       .concat(buildNames(bffs.hat.o))
       .concat(buildNames(bffs.hat.a))
       .concat(buildNames(bffs.ohat.o))

style/diagram.css

@@ -379,6 +379,33 @@
   text-align: center;
 }
 
+#measures {
+  height: 20px;
+  width: 150px;
+  position: absolute;
+  top: 5px;
+  right: 188px;
+  display: none;
+}
+
+#measures .measure {
+  height: 20px;
+  width: 20px;
+  color: #888;
+  background: #eee;
+  float: right;
+  text-align: center;
+  font-size: 10px;
+  line-height: 18px;
+  border-left: 1px solid white;
+  cursor: pointer;
+}
+
+#measures .measure:hover {
+  background: #bbb;
+  color: white;
+}
+
 #swing-meter {
   height: 20px;
   width: 143px;