1 files changed, 79 insertions, 7 deletions

diff --git a/bundle.js b/bundle.js
index ac055cb..f3cc5fe 100644
--- a/bundle.js
+++ b/bundle.js
@@ -23039,6 +23039,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var gridSize = _util.browser.isMobile ? 25 : 50;
 var hexagon = polygon(6, gridSize);
 
+var hertz_el = document.querySelector('#hertz');
+
 var grid = (0, _honeycombGrid.Grid)({
   size: gridSize
 });
@@ -23046,11 +23048,11 @@ var grid = (0, _honeycombGrid.Grid)({
 var Hex = (0, _honeycombGrid.HexFactory)({
   size: gridSize,
   template: function template(hex) {
-    return '\n      <svg class=\'hex\'>\n        <polygon points="' + hexagon.pointString + '" />\n      </svg>\n    ';
+    return '\n      <svg class=\'hex\'>\n        <polygon points=\'' + hexagon.pointString + '\' />\n      </svg>\n    ';
   }
 });
 
-var container = document.querySelector("#container");
+var container = document.querySelector('#container');
 var origin = {
   x: container.offsetWidth / 2 - hexagon.width / 2,
   y: container.offsetHeight / 2 - hexagon.height / 2
@@ -23062,7 +23064,9 @@ var view = _honeycombGrid.Views.DOM({
 
 var last = null,
     dragging = false;
-var hexes = void 0;
+var hexes = void 0,
+    els = [],
+    order = [];
 
 (0, _util.requestAudioContext)(init);
 
@@ -23076,6 +23080,9 @@ function init() {
     document.addEventListener('mousemove', move);
     document.addEventListener('mouseup', up);
   }
+  document.querySelector('#frequency').addEventListener('click', sortByFrequency);
+  document.querySelector('#color').addEventListener('click', sortByColor);
+  document.querySelector('#brightness').addEventListener('click', sortByBrightness);
   build(_colundi2.default.list);
   _keys2.default.listen(function (index) {
     index += 20;
@@ -23083,8 +23090,29 @@ function init() {
     _kalimba2.default.play(freq);
   });
 }
+function sortByBrightness() {
+  els.sort(function (a, b) {
+    return a.lum > b.lum ? -1 : a.lum == b.lum ? 0 : 1;
+  }).map(resort);
+}
+function sortByColor() {
+  els.sort(function (a, b) {
+    return a.hue < b.hue ? -1 : a.hue == b.hue ? 0 : 1;
+  }).map(resort);
+}
+function sortByFrequency() {
+  els.sort(function (a, b) {
+    return a.freq < b.freq ? -1 : a.freq == b.freq ? 0 : 1;
+  }).map(resort);
+}
+function resort(tuple, i) {
+  var position = order[i];
+  hexes[position.id] = tuple;
+  tuple.el.style.top = position.top;
+  tuple.el.style.left = position.left;
+}
 function build(list) {
-  container.innerHTML = "";
+  container.innerHTML = '';
   var perimeter = [Hex(0, 0, 0)];
   hexes = {};
 
@@ -23100,7 +23128,11 @@ function build(list) {
     view.renderHexes([hex]);
     var el = container.lastChild;
     el.querySelector('polygon').setAttribute('fill', pair.color);
-    hexes[id] = { el: el, freq: pair.freq };
+    var hsl = rgbStringToHSL(pair.color);
+    var tuple = { el: el, freq: pair.freq, hue: (hsl[0] + 0.2) % 1, lum: hsl[2] };
+    hexes[id] = tuple;
+    els.push(tuple);
+    order.push({ id: id, top: el.style.top, left: el.style.left });
     _i++;
     i = _i;
   };
@@ -23120,6 +23152,7 @@ function down(e) {
   var pair = find(hex);
   if (!pair) return;
   pair.el.style.opacity = 0.5;
+  hertz_el.innerHTML = pair.freq;
   _kalimba2.default.play(pair.freq);
 }
 function move(e) {
@@ -23133,12 +23166,14 @@ function move(e) {
   if (last) last.el.style.opacity = 1;
   if (!pair) return;
   pair.el.style.opacity = 0.5;
+  hertz_el.innerHTML = pair.freq;
   _kalimba2.default.play(pair.freq);
   last = pair;
 }
 function up(e) {
   if (last) last.el.style.opacity = 1;
   last = null;
+  hertz_el.innerHTML = '';
   dragging = false;
 }
 function find(hex) {
@@ -23178,13 +23213,50 @@ function polygon(n, side) {
     points: points,
     pointString: points.map(function (p) {
       return p.toFixed(3);
-    }).join(" "),
+    }).join(' '),
     width: max_x - min_x,
     height: max_y - min_y
   };
 }
 function hexToString(hex) {
-  return [hex.x, hex.y, hex.z].join("_");
+  return [hex.x, hex.y, hex.z].join('_');
+}
+function rgbStringToHSL(s) {
+  var RGB = s.replace('rgb(', '').replace(')', '').split(', ').map(function (a) {
+    return parseInt(a);
+  });
+  var R = RGB[0];
+  var G = RGB[1];
+  var B = RGB[2];
+  var var_R = R / 255; //RGB from 0 to 255
+  var var_G = G / 255;
+  var var_B = B / 255;
+
+  var var_Min = Math.min(var_R, var_G, var_B); //Min. value of RGB
+  var var_Max = Math.max(var_R, var_G, var_B); //Max. value of RGB
+  var del_Max = var_Max - var_Min; //Delta RGB value
+
+  var H, S;
+  var L = (var_Max + var_Min) / 2;
+
+  if (del_Max == 0) //This is a gray, no chroma...
+    {
+      H = 0; //HSL results from 0 to 1
+      S = 0;
+    } else //Chromatic data...
+    {
+      if (L < 0.5) S = del_Max / (var_Max + var_Min);else S = del_Max / (2 - var_Max - var_Min);
+
+      var del_R = ((var_Max - var_R) / 6 + del_Max / 2) / del_Max;
+      var del_G = ((var_Max - var_G) / 6 + del_Max / 2) / del_Max;
+      var del_B = ((var_Max - var_B) / 6 + del_Max / 2) / del_Max;
+
+      if (var_R == var_Max) H = del_B - del_G;else if (var_G == var_Max) H = 1 / 3 + del_R - del_B;else if (var_B == var_Max) H = 2 / 3 + del_G - del_R;
+
+      if (H < 0) H += 1;
+      if (H > 1) H -= 1;
+    }
+  return [H, S, L];
 }
 
 /***/ }),