2 files changed, 112 insertions, 36 deletions
diff --git a/js/fyr.js b/js/fyr.js
new file mode 100644
index 0000000..e6c727c
--- /dev/null
+++ b/js/fyr.js
@@ -0,0 +1,112 @@
+var color = document.querySelector('.color'),
+    light = document.querySelector('.light'),
+    timeline = document.querySelector('.timeline'),
+    clear = document.querySelector('.clear'),
+    colors = [],
+    selecting = false,
+    recording = false,
+    animationTime = 0,
+    lastFrame = 0,
+    t = null,
+    h = 0,
+    s = 100,
+    l = 50;
+
+function render() {
+  color.style.backgroundColor = `hsl(${h} ${s}% ${l}%)`;
+  light.style.transform = `translateY(-${l*2.2}px)`;
+}
+
+function renderTimeline() {
+  var background = 'linear-gradient(90deg,',
+      last = 0;
+  for (var {h, s, l, t: now} of colors) {
+    background += `hsl(${h} ${s}% ${l}%) ${Math.round(100*last/3000)}%,`;
+    background += `hsl(${h} ${s}% ${l}%) ${Math.round(100*(last+now)/3000)}%,`;
+    last += now;
+  }
+  background += `black ${Math.round(100*last/3000)}%, black 101%)`;
+  timeline.style.background = background;
+}
+
+function length() {
+  return colors.map((c) => c.t).reduce((s, t) => s + t, 0);
+}
+
+function addColor() {
+  t = Date.now();
+  colors.push({h, s, l, t: 0});
+}
+
+function record() {
+  if (recording) setTimeout(record, 100);
+  var c = colors[colors.length - 1],
+      l = length();
+  if (c.h !== h || c.s !== s || c.l !== l) {
+    c.t = Math.min(3000, Date.now() - t);
+    addColor();
+    c = colors[colors.length - 1];
+  }
+  if (l >= 3000) return;
+  c.t = Math.min(3000, Date.now() - t);
+  renderTimeline();
+}
+
+function preview(current) {
+  if (selecting || recording) return; 
+  window.requestAnimationFrame(preview);
+  var dt = current - lastFrame,
+      last = 0;
+  if (dt > 32) {
+    animationTime = (animationTime + dt) % 3000
+    color.style.background = `hsl(0 0% 0%)`;
+    for (var {h, s, l, t: now} of colors) {
+      if (animationTime >= last && animationTime < last+now) {
+        color.style.background = `hsl(${h} ${s}% ${l}%)`;
+        break;
+      }
+      last += now;
+    }
+    lastFrame = current;
+  }
+}
+
+color.addEventListener('mousemove', ({offsetX: x, offsetY: y}) => {
+  h = Math.round(360 * x / 200);
+  s = Math.round(100 * (200 - y) / 200);
+  render();
+});
+
+color.addEventListener('wheel', ({deltaY: y}) => {
+  selecting = true;
+  l = Math.min(Math.max(0, l + y/4), 100)
+  render();
+});
+
+color.addEventListener('mousedown', () => {
+  addColor();
+  recording = true;
+  setTimeout(record, 100);
+});
+
+color.addEventListener('mouseup', () => {
+  recording = false;
+});
+
+color.addEventListener('mouseenter', () => {
+  selecting = true;
+});
+
+color.addEventListener('mouseout', () => {
+  recording = false;
+  selecting = false;
+  window.requestAnimationFrame(preview);
+});
+
+clear.addEventListener('click', () => {
+  colors = [];
+  renderTimeline();
+});
+
+render();
+renderTimeline();
diff --git a/js/updater.js b/js/updater.js
deleted file mode 100644
index 91c447e..0000000
--- a/js/updater.js
+++ /dev/null
@@ -1,36 +0,0 @@
-function getColors({x, y}, [{x: ax, y: ay}, {x: bx, y: by}, {x: cx, y: cy}]) {
-
-  if (x < 50 && y < 50) return {r: 255, g: 255, b: 255};
-  if (x > 150 && y < 50) return {r: 0, g: 0, b: 0};
-
-  var { abs, round, min } = Math,
-      area = abs((bx - ax) * (cy - ay) - (cx - ax) * (by - ay)),
-      R = abs((bx - x) * (cy - y) - (cx - x) * (by - y)),
-      G = abs((ax - x) * (cy - y) - (cx - x) * (ay - y)),
-      B = abs((ax - x) * (by - y) - (bx - x) * (ay - y));
-
-  // Normalize the areas to get the weights
-  const weights = {
-    r: round(255 * min(1, R / area)),
-    g: round(255 * min(1, G / area)),
-    b: round(255 * min(1, B / area))
-  };
-
-  return weights;
-}
-
-var updater = document.querySelector('.updater'),
-    color = {r: 0, g: 0, b: 0};
-updater.addEventListener('mousemove', ({offsetX: x, offsetY: y}) => {
-  var {r, g, b} = color = getColors(
-    {x, y},
-    [{x: 0, y: 200}, {x: 200, y: 200}, {x: 100, y: 0}]
-  )
-  updater.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
-});
-updater.addEventListener('mousedown', () => {
-  console.log('Adding Color', color);
-});
-updater.addEventListener('mouseup', () => {
-  console.log('Stop Adding Color', color);
-});