transitions, fix colors, add help

1 files changed, 481 insertions, 120 deletions

diff --git a/bundle.js b/bundle.js
index 5939b4e..9ed6e31 100644
--- a/bundle.js
+++ b/bundle.js
@@ -28757,7 +28757,7 @@ var __WEBPACK_AMD_DEFINE_RESULT__;(function(root, factory){
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.requestAudioContext = exports.frequencyInRange = exports.roundFreq = exports.browser = exports.mod = exports.choice = undefined;
+exports.requestAudioContext = exports.intervalInRange = exports.roundInterval = exports.clamp = exports.lerp = exports.browser = exports.mod = exports.choice = undefined;
 
 var _tone = __webpack_require__(1);
 
@@ -28790,11 +28790,19 @@ function choice(a) {
 function mod(n, m) {
   return n - m * Math.floor(n / m);
 }
-function roundFreq(freq) {
-  return Math.round(freq * 100);
+function roundInterval(interval) {
+  return Math.round(interval * 10000000);
 }
-var frequencyInRange = function frequencyInRange(freq) {
-  return 20 < freq && freq < 15000;
+var intervalInRange = function intervalInRange(interval, root) {
+  return 20 < interval * root && interval * root < 15000;
+};
+var lerp = function lerp(n, a, b) {
+  return (b - a) * n + a;
+};
+var clamp = function clamp(n) {
+  var a = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var b = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  return n < a ? a : n < b ? n : b;
 };
 
 function requestAudioContext(fn) {
@@ -28843,8 +28851,10 @@ function requestAudioContext(fn) {
 exports.choice = choice;
 exports.mod = mod;
 exports.browser = browser;
-exports.roundFreq = roundFreq;
-exports.frequencyInRange = frequencyInRange;
+exports.lerp = lerp;
+exports.clamp = clamp;
+exports.roundInterval = roundInterval;
+exports.intervalInRange = intervalInRange;
 exports.requestAudioContext = requestAudioContext;
 
 /***/ }),
@@ -28904,7 +28914,7 @@ function color(t, add, mul) {
     b = palette[1][i];
     c = palette[2][i];
     d = palette[3][i];
-    rgb[i] = Math.round(channel(t, a, b, c, d, add, mul) * 255);
+    rgb[i] = Math.round(channel(-t, a, b, c, d, add, mul) * 255);
   }
   return "rgb(" + rgb + ")";
 }
@@ -28939,7 +28949,9 @@ var player_count = 4;
 
 var samples = [{ root: 219.5, fn: "samples/380737__cabled-mess__sansula-01-a-raw.wav" }, { root: 260.9, fn: "samples/380736__cabled-mess__sansula-02-c-raw.wav" }, { root: 330.2, fn: "samples/380735__cabled-mess__sansula-03-e-raw.wav" }];
 
-function load(output) {
+function load(_ref) {
+  var output = _ref.output;
+
   samples.forEach(function (sample) {
     sample.players = [];
     sample.index = -1;
@@ -28965,15 +28977,12 @@ function load(output) {
   }, 0));
 }
 
-var last = 440;
-
-function play(freq) {
-  last = freq;
+function play(interval, root) {
   var sample = (0, _util.choice)(samples);
   sample.index = (sample.index + 1) % sample.players.length;
 
   var player = sample.players[sample.index];
-  player.playbackRate = freq / sample.root;
+  player.playbackRate = interval * root / sample.root;
   player.start();
 }
 
@@ -28983,29 +28992,26 @@ function pause() {
 
 exports.default = { load: load, play: play, pause: pause };
 
-// for help tuning
-
-function keydown(e) {
-  // console.log(e.keyCode)
-  if (e.metaKey && last) {
-    var step = e.shiftKey ? e.ctrlKey ? 0.01 : 0.1 : 1;
-    switch (e.keyCode) {
-      case 38:
-        // up
-        e.preventDefault();
-        samples[0].root -= step;
-        play(last);
-        break;
-      case 40:
-        // down
-        e.preventDefault();
-        samples[0].root += step;
-        play(last);
-        break;
-    }
-    console.log(samples[0].root);
-  }
-}
+// for help tuning the kalimba samples
+// function keydown(e) {
+//   // console.log(e.keyCode)
+//   if (e.metaKey && last) {
+//     let step = e.shiftKey ? (e.ctrlKey ? 0.01 : 0.1) : 1;
+//     switch (e.keyCode) {
+//       case 38: // up
+//         e.preventDefault();
+//         samples[0].root -= step;
+//         play(last);
+//         break;
+//       case 40: // down
+//         e.preventDefault();
+//         samples[0].root += step;
+//         play(last);
+//         break;
+//     }
+//     console.log(samples[0].root);
+//   }
+// }
 // window.addEventListener("keydown", keydown, true);
 
 /***/ }),
@@ -29128,28 +29134,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @module lib/organ.js;
  */
 
-var oscillators = {};
+var root = 440;
 
+var oscillators = {};
 var output = void 0;
 var lastPlayed = void 0;
 
 function load(out) {
   output = out;
 }
-
-function isPlaying(freq) {
-  var rounded = (0, _util.roundFreq)(freq);
+function isPlaying(interval) {
+  var rounded = (0, _util.roundInterval)(interval);
   var osc = oscillators[rounded];
   return osc && osc.playing;
 }
-function play(freq) {
+function play(interval) {
   if (!output) {
     return;
   }
-  var rounded = (0, _util.roundFreq)(freq);
+  var rounded = (0, _util.roundInterval)(interval);
   var osc = oscillators[rounded] = oscillators[rounded] || {};
   if (!osc.el) {
-    osc.el = new _tone2.default.Oscillator(freq, "sine");
+    osc.interval = interval;
+    osc.el = new _tone2.default.Oscillator(interval * root, "sine");
     osc.el.connect(output);
   }
   osc.el.start();
@@ -29158,16 +29165,77 @@ function play(freq) {
   return osc;
 }
 
-function pause(freq) {
-  var rounded = (0, _util.roundFreq)(freq);
+function pause(interval) {
+  var rounded = (0, _util.roundInterval)(interval);
   if (!oscillators[rounded]) return;
   var osc = oscillators[rounded] = oscillators[rounded] || {};
-  if (osc.el) osc.el.stop();
+  if (osc.el) {
+    osc.el.stop();
+  }
   osc.playing = false;
   return osc;
 }
 
-exports.default = { load: load, isPlaying: isPlaying, play: play, pause: pause, oscillators: oscillators };
+function setRoot(newRoot) {
+  root = newRoot;
+  var _iteratorNormalCompletion = true;
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
+
+  try {
+    for (var _iterator = Object.values(oscillators)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var osc = _step.value;
+
+      osc.el.frequency.value = osc.interval * newRoot;
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+}
+function stop() {
+  var _iteratorNormalCompletion2 = true;
+  var _didIteratorError2 = false;
+  var _iteratorError2 = undefined;
+
+  try {
+    for (var _iterator2 = Object.values(oscillators)[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+      var osc = _step2.value;
+
+      osc.el.stop();
+      osc.el.disconnect();
+      osc.playing = false;
+      delete osc.el;
+    }
+  } catch (err) {
+    _didIteratorError2 = true;
+    _iteratorError2 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion2 && _iterator2.return) {
+        _iterator2.return();
+      }
+    } finally {
+      if (_didIteratorError2) {
+        throw _iteratorError2;
+      }
+    }
+  }
+
+  oscillators = {};
+}
+
+exports.default = { load: load, isPlaying: isPlaying, play: play, pause: pause, stop: stop, setRoot: setRoot };
 
 /***/ }),
 /* 9 */
@@ -29232,6 +29300,8 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
                                                                                                                                                                                                      * @module lib/sampler.js;
                                                                                                                                                                                                      */
 
+var root = 440;
+
 var output = void 0;
 var ready = void 0;
 var current = "";
@@ -29298,14 +29368,42 @@ function loadSampleFromFile(file, url) {
 /**
  * Player
  */
-var last = 440;
+var last = [1, 440];
 
-function play(freq) {
-  last = freq;
+function stop() {
+  var _iteratorNormalCompletion = true;
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
+
+  try {
+    for (var _iterator = Object.values(samples)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var sample = _step.value;
+
+      sample.players.forEach(function (player) {
+        return player.stop();
+      });
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+}
+function play(interval, root) {
+  last = [interval, root];
   var sample = samples[current];
   sample.index = (sample.index + 1) % sample.players.length;
   var player = sample.players[sample.index];
-  player.playbackRate = freq / sample.root;
+  player.playbackRate = interval * root / sample.root;
   player.start();
 }
 
@@ -29313,7 +29411,7 @@ function pause() {
   // no-op
 }
 
-exports.default = { load: load, play: play, pause: pause };
+exports.default = { load: load, play: play, pause: pause, stop: stop };
 
 // for help tuning
 
@@ -29327,13 +29425,15 @@ function keydown(e) {
         // up
         e.preventDefault();
         sample.root -= step;
-        play(last);
+        stop();
+        play(last[0], last[1]);
         break;
       case 40:
         // down
         e.preventDefault();
         sample.root += step;
-        play(last);
+        stop();
+        play(last[0], last[1]);
         break;
     }
   }
@@ -29364,14 +29464,14 @@ var a = void 0,
                  * @module client/lib/scales.js;
                  */
 
-var scales = exports.scales = [{ name: "integer", get: function get(i, j) {
+var scales = exports.scales = [{ name: "natural", get: function get(i, j) {
     return [i + 1, j + 1];
-  } }, { name: "subharmonic", get: function get(i, j) {
+  } }, { name: "undertone", get: function get(i, j) {
     return [i + 1, i + j + 2];
-  } }, { name: "harmonic", get: function get(i, j) {
+  } }, { name: "overtone", get: function get(i, j) {
     return [i + j + 2, j + 1];
   } }, {
-  name: "prime",
+  name: "primes",
   reset: function reset(x, y, w, h) {
     a = (0, _index.Prime)().skip(x).take(w).toJS();
     b = (0, _index.Prime)().skip(y).take(h).toJS();
@@ -29673,6 +29773,10 @@ var _midi = __webpack_require__(7);
 
 var _midi2 = _interopRequireDefault(_midi);
 
+var _oktransition = __webpack_require__(637);
+
+var _oktransition2 = _interopRequireDefault(_oktransition);
+
 var _output = __webpack_require__(9);
 
 var _util = __webpack_require__(2);
@@ -29683,6 +29787,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var instrument = _kalimba2.default;
 
+var grid = document.createElement("grid");
 var root = 440;
 var s = 50;
 var w = void 0,
@@ -29697,16 +29802,17 @@ var mul_off = 0.9;
 
 var dragging = false;
 var erasing = false;
-var lastFreq = 0;
+var lastNote = 0;
 var notes = [];
 var base_x = 0;
 var base_y = 0;
 var scaleMode = 0;
 var is_split = false;
-var frequencies = void 0;
+var intervals = void 0;
 
 (0, _util.requestAudioContext)(function () {
   var output = (0, _output.getOutput)();
+  document.body.appendChild(grid);
   _kalimba2.default.load(output);
   _organ2.default.load(output);
   _sampler2.default.load(output, function ready() {
@@ -29746,30 +29852,30 @@ function log() {
   // console.log(notes);
   for (var i = 0; i < 8; i++) {
     for (var j = 0; j < 8; j++) {
-      var frequency = notes[i][j].frequency;
-      var rounded = (0, _util.roundFreq)(frequency);
-      if (!seen[rounded] && (0, _util.frequencyInRange)(frequency)) {
-        seen[rounded] = notes[i][j].frequency;
+      var interval = notes[i][j].interval;
+      var rounded = (0, _util.roundInterval)(interval);
+      if (!seen[rounded] && (0, _util.intervalInRange)(interval, root)) {
+        seen[rounded] = notes[i][j].interval;
       }
     }
   }
-  frequencies = Object.values(seen).sort(function (a, b) {
+  intervals = Object.values(seen).sort(function (a, b) {
     return a - b;
   });
-  // console.log(frequencies);
-  console.log(frequencies.length, "unique frequencies in 8x8");
+  // console.log(intervals);
+  console.log(intervals.length, "unique intervals in 8x8");
 }
-function play(freq) {
-  if (!_organ2.default.isPlaying(freq.frequency)) {
-    var frequency = freq.frequency;
-    // while (frequency < root) {
-    //   frequency *= 2;
+function play(note) {
+  if (!_organ2.default.isPlaying(note.interval)) {
+    var interval = note.interval;
+    // while (interval < root) {
+    //   interval *= 2;
     // }
-    // while (frequency > root) {
-    //   frequency /= 2;
+    // while (interval > root) {
+    //   interval /= 2;
     // }
-    var rounded = (0, _util.roundFreq)(freq.frequency);
-    _organ2.default.play(frequency);
+    var rounded = (0, _util.roundInterval)(note.interval);
+    _organ2.default.play(interval);
     notes.forEach(function (row) {
       return row.forEach(function (note) {
         return note.rounded === rounded && note.div.classList.add("playing");
@@ -29777,31 +29883,31 @@ function play(freq) {
     });
   }
 }
-function trigger(freq) {
-  if ((0, _util.frequencyInRange)(freq.frequency)) {
-    instrument.play(freq.frequency);
+function trigger(note) {
+  if ((0, _util.intervalInRange)(note.interval, root)) {
+    instrument.play(note.interval, root);
   }
 }
 function trigger_index(index) {
-  var frequency = frequencies[index];
-  if (frequency) {
-    instrument.play(frequency);
+  var interval = intervals[index];
+  if (interval) {
+    instrument.play(interval, root);
   }
 }
-function pause(freq) {
-  _organ2.default.pause(freq.frequency);
-  var rounded = (0, _util.roundFreq)(freq.frequency);
+function pause(note) {
+  _organ2.default.pause(note.interval);
+  var rounded = (0, _util.roundInterval)(note.interval);
   notes.forEach(function (row) {
     return row.forEach(function (note) {
       return note.rounded === rounded && note.div.classList.remove("playing");
     });
   });
 }
-function toggle(freq) {
-  if (_organ2.default.isPlaying(freq.rounded) || freq.div.classList.contains("playing")) {
-    pause(freq);
+function toggle(note) {
+  if (_organ2.default.isPlaying(note.rounded) || note.div.classList.contains("playing")) {
+    pause(note);
   } else {
-    play(freq);
+    play(note);
   }
 }
 
@@ -29817,16 +29923,16 @@ function add(i, j) {
       b = _scale$get2[1];
 
   var div = document.createElement("div");
-  var frequency = root * a / b;
-  // const frequency = root * Math.pow(2, ((b / a) % 1) + 1);
+  var interval = a / b;
+  // const interval = root * Math.pow(2, ((b / a) % 1) + 1);
   var add = 0;
   var frac = void 0;
   div.style.left = i * s + "px";
   div.style.top = j * s + "px";
 
-  var freq = {
-    frequency: frequency,
-    rounded: (0, _util.roundFreq)(frequency),
+  var note = {
+    interval: interval,
+    rounded: (0, _util.roundInterval)(interval, root),
     div: div,
     i: i,
     j: j,
@@ -29863,19 +29969,19 @@ function add(i, j) {
       }
 
       div.innerHTML = "<div>" + a_disp + "</div><div>/</div><div>" + b_disp + "</div>";
-      if (freq.playing) {
+      if (note.playing) {
         div.style.backgroundColor = (0, _color2.default)(frac, add + add_on, mul_on);
       } else {
         div.style.backgroundColor = (0, _color2.default)(frac, add + add_off, mul_off);
       }
 
-      if (_organ2.default.isPlaying(frequency)) {
+      if (_organ2.default.isPlaying(interval)) {
         div.classList.add("playing");
       }
     }
   };
 
-  freq.recolor(1, 1);
+  note.recolor(1, 1);
 
   if (_util.browser.isDesktop) {
     div.addEventListener("mousedown", function (event) {
@@ -29884,17 +29990,17 @@ function add(i, j) {
         event.preventDefault();
         // notes.forEach((row) => row.forEach((note) => note.recolor(a, b)));
         is_split = [a, b];
-        toggle(freq);
+        toggle(note);
         return;
       }
       div.style.backgroundColor = (0, _color2.default)(frac, add + add_on, mul_on);
       dragging = true;
-      trigger(freq);
+      trigger(note);
     });
     div.addEventListener("mouseenter", function () {
       div.style.backgroundColor = (0, _color2.default)(frac, add + add_on, mul_on);
       if (dragging) {
-        trigger(freq);
+        trigger(note);
       }
     });
     div.addEventListener("mouseleave", function () {
@@ -29908,17 +30014,16 @@ function add(i, j) {
   } else {
     div.addEventListener("touchstart", function (e) {
       e.preventDefault();
-      toggle(freq);
-      erasing = !freq.playing;
-      lastFreq = freq;
+      toggle(note);
+      erasing = !note.playing;
+      lastNote = note;
     });
   }
-  document.body.appendChild(div);
-  return freq;
+  grid.appendChild(div);
+  return note;
 }
 
 function bind() {
-  window.addEventListener("resize", build);
   if (_util.browser.isDesktop) {
     document.addEventListener("mousedown", function (event) {
       if (event.button !== 2) {
@@ -29938,49 +30043,77 @@ function bind() {
       var x = Math.floor(e.touches[0].pageX / s);
       var y = Math.floor(e.touches[0].pageY / s);
       if (!(x in notes) || !(y in notes[x])) return;
-      var freq = notes[x][y];
-      if (freq !== lastFreq) {
+      var note = notes[x][y];
+      if (note !== lastNote) {
         if (dragging) {
           if (erasing) {
-            pause(freq);
+            pause(note);
           } else {
-            toggle(freq);
+            toggle(note);
           }
         }
-        lastFreq = freq;
+        lastNote = note;
       }
     });
     document.addEventListener("touchend", function () {
       dragging = false;
     });
   }
+  window.addEventListener("resize", build);
+  window.addEventListener("keydown", keydown, true);
+  _keys2.default.listen(trigger_index);
+  document.querySelector("#help .close").addEventListener("click", function () {
+    return document.querySelector("#help").classList.remove("visible");
+  });
+  document.querySelector("#help-button").addEventListener("click", function () {
+    return document.querySelector("#help").classList.toggle("visible");
+  });
 }
 
+var isReset = false;
 function keydown(e) {
-  if (e.altKey || e.ctrlKey || e.metaKey) return;
   var step = 1;
   if (e.shiftKey) {
     step += 4;
   }
-  // console.log(e.keyCode);
+  console.log(e.keyCode);
   switch (e.keyCode) {
+    case 27:
+      // esc - PANIC
+      if (isReset) {
+        base_x = 0;
+        base_y = 0;
+        showMessage("reset!");
+      }
+      _organ2.default.stop();
+      _sampler2.default.stop();
+      rebuild();
+      isReset = true;
+      setTimeout(function () {
+        return isReset = false;
+      }, 500);
+      break;
     case 37:
       // left
+      if (e.altKey || e.ctrlKey || e.metaKey) return;
       base_x = Math.max(0, base_x - step);
       rebuild();
       break;
     case 38:
       // up
+      if (e.altKey || e.ctrlKey || e.metaKey) return;
       base_y = Math.max(0, base_y - step);
       rebuild();
       break;
     case 39:
       // right
+      if (e.altKey || e.ctrlKey || e.metaKey) return;
       base_x += step;
       rebuild();
       break;
     case 40:
       // down
+      if (e.altKey || e.ctrlKey || e.metaKey) return;
       base_y += step;
       rebuild();
       break;
@@ -29988,21 +30121,56 @@ function keydown(e) {
       // \
       _midi2.default.enable(trigger_index);
       break;
+    case 191:
+      // ?
+      document.querySelector("#help").classList.toggle("visible");
+      break;
     case 189:
       // -
-      scaleMode = (0, _util.mod)(scaleMode - 1, _scales.scales.length);
-      rebuild();
+      e.preventDefault();
+      if (e.altKey || e.metaKey) {
+        root = (0, _util.clamp)(root - (e.shiftKey ? 10 : 1), 1, 200000);
+        _organ2.default.setRoot(root);
+        showMessage("Root: " + root + " hz");
+      } else {
+        scaleMode = (0, _util.mod)(scaleMode - 1, _scales.scales.length);
+        rebuild();
+        showMessage(_scales.scales[scaleMode].name);
+      }
       break;
     case 187:
       // =
-      scaleMode = (0, _util.mod)(scaleMode + 1, _scales.scales.length);
-      rebuild();
+      e.preventDefault();
+      if (e.altKey || e.metaKey) {
+        root = (0, _util.clamp)(root + (e.shiftKey ? 10 : 1), 1, 200000);
+        _organ2.default.setRoot(root);
+        showMessage("Root: " + root + " hz");
+      } else {
+        scaleMode = (0, _util.mod)(scaleMode + 1, _scales.scales.length);
+        rebuild();
+        showMessage(_scales.scales[scaleMode].name);
+      }
       break;
   }
 }
-window.addEventListener("keydown", keydown, true);
 
-_keys2.default.listen(trigger_index);
+var messageTransition = void 0;
+function showMessage(message) {
+  var el = document.getElementById("message");
+  el.innerHTML = message;
+  el.style.opacity = 1;
+  if (messageTransition) {
+    messageTransition.cancel();
+  }
+  messageTransition = _oktransition2.default.add({
+    obj: el.style,
+    from: { opacity: 1 },
+    to: { opacity: 0 },
+    delay: 1500,
+    duration: 2000,
+    easing: _oktransition2.default.easing.circ_out
+  });
+}
 
 /***/ }),
 /* 14 */
@@ -54426,6 +54594,199 @@ try {
 }
 
 
+/***/ }),
+/* 637 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+/*
+  oktransition.add({
+    obj: el.style,
+    units: "px",
+    from: { left: 0 },
+    to: { left: 100 },
+    duration: 1000,
+    easing: oktransition.easing.circ_out,
+    update: function(obj){
+      console.log(obj.left)
+    }
+    finished: function(){
+      console.log("done")
+    }
+  })
+*/
+
+var oktransition = {};
+var transitions = [];
+
+var last_t = 0;
+var id = 0;
+
+var lerp = function lerp(n, a, b) {
+  return (b - a) * n + a;
+};
+
+oktransition.speed = 1;
+oktransition.add = function (transition) {
+  transition.id = id++;
+  transition.obj = transition.obj || {};
+  if (transition.easing) {
+    if (typeof transition.easing === "string") {
+      transition.easing = oktransition.easing[transition.easing];
+    }
+  } else {
+    transition.easing = oktransition.easing.linear;
+  }
+  if (!("from" in transition) && !("to" in transition)) {
+    transition.keys = [];
+  } else if (!("from" in transition)) {
+    transition.from = {};
+    transition.keys = Object.keys(transition.to);
+    transition.keys.forEach(function (prop) {
+      transition.from[prop] = parseFloat(transition.obj[prop]);
+    });
+  } else {
+    transition.keys = Object.keys(transition.from);
+  }
+  transition.delay = transition.delay || 0;
+  transition.start = last_t + transition.delay;
+  transition.done = false;
+  transition.after = transition.after || [];
+  transition.then = function (fn) {
+    transition.after.push(fn);
+    return transition;
+  };
+  transition.tick = 0;
+  transition.skip = transition.skip || 1;
+  transition.dt = 0;
+  transition.cancel = function () {
+    return transitions = transitions.filter(function (item) {
+      return item !== transition;
+    });
+  };
+  transitions.push(transition);
+  return transition;
+};
+oktransition.update = function (t) {
+  var done = false;
+  requestAnimationFrame(oktransition.update);
+  last_t = t * oktransition.speed;
+  if (transitions.length === 0) return;
+  transitions.forEach(function (transition, i) {
+    var dt = Math.min(1.0, (t - transition.start) / transition.duration);
+    transition.tick++;
+    if (dt < 0 || dt < 1 && transition.tick % transition.skip != 0 || transition.done) return;
+    var ddt = transition.easing(dt);
+    transition.dt = ddt;
+    transition.keys.forEach(function (prop) {
+      var val = lerp(ddt, transition.from[prop], transition.to[prop]);
+      if (transition.round) val = Math.round(val);
+      if (transition.units) val = Math.round(val) + transition.units;
+      transition.obj[prop] = val;
+    });
+    if (transition.update) {
+      transition.update(transition.obj, dt);
+    }
+    if (dt === 1) {
+      if (transition.finished) {
+        transition.finished(transition);
+      }
+      if (transition.after.length) {
+        var twn = transition.after.shift();
+        twn.obj = twn.obj || transition.obj;
+        twn.after = transition.after;
+        oktransition.add(twn);
+      }
+      if (transition.loop) {
+        transition.start = t + transition.delay;
+      } else {
+        done = true;
+        transition.done = true;
+      }
+    }
+  });
+  if (done) {
+    transitions = transitions.filter(function (transition) {
+      return !transition.done;
+    });
+  }
+};
+
+requestAnimationFrame(oktransition.update);
+
+oktransition.easing = {
+  linear: function linear(t) {
+    return t;
+  },
+  circ_out: function circ_out(t) {
+    return Math.sqrt(1 - (t = t - 1) * t);
+  },
+  circ_in: function circ_in(t) {
+    return -(Math.sqrt(1 - t * t) - 1);
+  },
+  circ_in_out: function circ_in_out(t) {
+    return (t *= 2) < 1 ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
+  },
+  quad_in: function quad_in(n) {
+    return Math.pow(n, 2);
+  },
+  quad_out: function quad_out(n) {
+    return n * (n - 2) * -1;
+  },
+  quad_in_out: function quad_in_out(n) {
+    n = n * 2;
+    if (n < 1) {
+      return Math.pow(n, 2) / 2;
+    }
+    return -1 * (--n * (n - 2) - 1) / 2;
+  },
+  cubic_bezier: function cubic_bezier(mX1, mY1, mX2, mY2) {
+    function A(aA1, aA2) {
+      return 1.0 - 3.0 * aA2 + 3.0 * aA1;
+    }
+    function B(aA1, aA2) {
+      return 3.0 * aA2 - 6.0 * aA1;
+    }
+    function C(aA1) {
+      return 3.0 * aA1;
+    }
+
+    // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+    function CalcBezier(aT, aA1, aA2) {
+      return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
+    }
+
+    // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+    function GetSlope(aT, aA1, aA2) {
+      return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
+    }
+
+    function GetTForX(aX) {
+      // Newton raphson iteration
+      var aGuessT = aX;
+      for (var i = 0; i < 10; ++i) {
+        var currentSlope = GetSlope(aGuessT, mX1, mX2);
+        if (currentSlope == 0.0) return aGuessT;
+        var currentX = CalcBezier(aGuessT, mX1, mX2) - aX;
+        aGuessT -= currentX / currentSlope;
+      }
+      return aGuessT;
+    }
+
+    return function (aX) {
+      if (mX1 == mY1 && mX2 == mY2) return aX; // linear
+      return CalcBezier(aX, mY1, mY2);
+    };
+  }
+};
+
+exports.default = oktransition;
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=bundle.js.map
\ No newline at end of file