03 Time, interaction and repetition

uniform: a picture that follows you

Move over or tap the canvas to pass the pointer position to the GPU.

uPointer0.50, 0.50

Spot size0.15

0.030.4

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec2 p = (gl_FragCoord.xy - uPointer * uResolution) / min(uResolution.x, uResolution.y);
  float glow = exp(-dot(p, p) / (0.150 * 0.150));
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.96, 0.43, 0.30), glow);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - uPointer * uResolution) / min(uResolution.x, uResolution.y);
  float glow = exp(-dot(p, p) / (0.150 * 0.150));
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.96, 0.43, 0.30), glow);
  gl_FragColor = vec4(color, 1.0);
}

JS side

gl.uniform2f(uResolution, …, …)
gl.uniform2f(uPointer, 0.50, 0.50)

canvas.addEventListener('pointermove', (e) => {
  pointer = [e.offsetX / width, 1 - e.offsetY / height]
})
gl.uniform2f(uPointerLocation, ...pointer)

uPointer is just a vec2; events are handled in JS, which then hands the coordinate to the GPU.

Try it

Move the pointer over the canvas
Change exp to 1.0 - smoothstep(...) for a hard-edged spot