import { glCanvas, onPointerEvents } from "@radiancejs/gl";
import "./styles.css";

const canvas = document.querySelector("canvas")!;

const { uniforms, onAfterRender } = glCanvas({
  canvas,
  fragment: /* glsl */ `
    varying vec2 vUv;
    uniform vec2 uPointerPosition;
    uniform vec2 uResolution;
    uniform vec3 uCircleColor;

    void main() {
      vec2 uv = (vUv - .5) * uResolution / min(uResolution.x, uResolution.y);
      float dist = distance(uv, uPointerPosition);
      float circleMask = 1. - smoothstep(.099, .101, dist);
      vec3 circle = mix(vec3(0.), uCircleColor, circleMask);
      gl_FragColor = vec4(circle, 1.);
    }
  `,
  uniforms: {
    uPointerPosition: [0, 0],
    uCircleColor: [1, 1, 1],
    uResolution: ({ canvasResolution }) => canvasResolution,
  },
});

onPointerEvents(canvas, {
  move: ({ pointer, boundingRect, center }) => {
    uniforms.uPointerPosition = [
      (pointer.x - center.x) / Math.min(boundingRect.width, boundingRect.height),
      (center.y - pointer.y) / Math.min(boundingRect.width, boundingRect.height),
    ];
  },
  down: () => {
    uniforms.uCircleColor = [1, 0, 0];
  },
  up: () => {
    uniforms.uCircleColor = [1, 1, 1];
  },
});

const renderCount = document.querySelector("#renderCount")!;
onAfterRender(() => {
  renderCount.firstChild!.nodeValue = `${Number(renderCount.textContent) + 1}`;
});

Open Sandbox