Stuff

2022-12-23
 function change(e) {
    const color = useRef(null);
    const container = useRef(null);

    let horizontal = Math.round(
      (e.clientX / container.current.clientWidth) * 255
    );
    let vertical = Math.round(
      (e.clientY / container.current.clientHeight) * 255
    );

    let color1 = `hsl(${horizontal},100%,30%)`;
    let color2 = `hsl(${vertical},100%,30%)`;
    let [x, y] = resetCoordinates(e.clientX, e.clientY);

    let angle = calcAngleDegrees(x, y);

    let gradient = `linear-gradient(${angle}deg,${color2},${color1})`;
    color.current.style.background = gradient;

  }

  function calcAngleDegrees(x, y) {
    return (Math.atan2(y, x) * 180) / Math.PI;
  }

  function resetCoordinates(x, y) {
    let centerX = container.current.clientWidth / 2;
    let centerY = container.current.clientHeight / 2;
    let newX = x - centerX;
    let newY = centerY - y;
    return [newX, newY];
  }