Add picker

[rbdr/fyr] / js / updater.js

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);
});