git.r.bdr.sh - rbdr/fyr/blob - js/updater.js

   1 function getColors({x, y}, [{x: ax, y: ay}, {x: bx, y: by}, {x: cx, y: cy}]) {
   2
   3   if (x < 50 && y < 50) return {r: 255, g: 255, b: 255};
   4   if (x > 150 && y < 50) return {r: 0, g: 0, b: 0};
   5
   6   var { abs, round, min } = Math,
   7       area = abs((bx - ax) * (cy - ay) - (cx - ax) * (by - ay)),
   8       R = abs((bx - x) * (cy - y) - (cx - x) * (by - y)),
   9       G = abs((ax - x) * (cy - y) - (cx - x) * (ay - y)),
  10       B = abs((ax - x) * (by - y) - (bx - x) * (ay - y));
  11
  12   // Normalize the areas to get the weights
  13   const weights = {
  14     r: round(255 * min(1, R / area)),
  15     g: round(255 * min(1, G / area)),
  16     b: round(255 * min(1, B / area))
  17   };
  18
  19   return weights;
  20 }
  21
  22 var updater = document.querySelector('.updater'),
  23     color = {r: 0, g: 0, b: 0};
  24 updater.addEventListener('mousemove', ({offsetX: x, offsetY: y}) => {
  25   var {r, g, b} = color = getColors(
  26     {x, y},
  27     [{x: 0, y: 200}, {x: 200, y: 200}, {x: 100, y: 0}]
  28   )
  29   updater.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
  30 });
  31 updater.addEventListener('mousedown', () => {
  32   console.log('Adding Color', color);
  33 });
  34 updater.addEventListener('mouseup', () => {
  35   console.log('Stop Adding Color', color);
  36 });