---
url: /examples/interactions/pointer.md
description: >-
Track pointer events and feed normalized cursor coordinates into shader
uniforms.
---
::: example-editor
```ts
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}`;
});
```
```css
html {
color-scheme: light dark;
}
body {
margin: 0;
}
canvas {
width: 100svw;
height: 100svh;
display: block;
}
```
```html
RadianceJS Example
Renders: 0
```
:::