Pointer Tracker

This demo uses singlePointer() from cereb to track pointer movements and draw dots following the cursor.

Click and drag to draw

x -

y -

phase -

type -

Clear

Code

import { pipe, singlePointer } from "cereb";
import { offset, singlePointerSession } from "cereb/operators";

pipe(
  // Subscribe to a single-pointer signal from `window`.
  singlePointer(window),

  // Treat start → end as one session (signals outside the session are ignored).
  singlePointerSession(),

  // `singlePointer(window)` yields window-relative x/y.
  // Compute canvas-relative coordinates and add `offsetX`/`offsetY`.
  offset({ target: canvas }),
).subscribe((signal) => {
  // Read values from the signal and draw.
  const { phase, offsetX, offsetY, pointerType } = signal.value;

  drawTrackingPointer({
    x: offsetX,
    y: offsetY,
    phase,
    pointerType,
  });
});