Add picker

1 files changed, 36 insertions, 0 deletions

diff --git a/js/updater.js b/js/updater.js
new file mode 100644
index 0000000..91c447e
--- /dev/null
+++ b/js/updater.js
@@ -0,0 +1,36 @@
+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);
+});