home/ atoms/ glsl-uv-coordinates-spatial-variation

GLSL UV coordinates let shaders vary per-pixel, turning time oscillators into spatial patterns

In a GLSL fragment shader, uv() (or equivalent) returns the normalized x and y screen coordinates of the pixel currently being computed — typically ranging from -1 to +1 or 0 to 1. By replacing a constant frequency with p.x or p.y, a time oscillator becomes a spatial pattern that varies across the screen. Combining coordinates — dividing p.x / p.y or multiplying p.x * p.y — creates non-linear distortions, producing hyperbolic and organic shapes. This is the fundamental technique for generating 2D spatial patterns in fragment shaders: the GPU runs the same function for every pixel simultaneously, and the UV coordinates differentiate the per-pixel output.

Examples

A uniform red field: gl_FragColor = vec4(1.,0.,0.,1.). A spatial sine oscillator: float color = sin(p.x * frequency + time); — produces vertical stripes that scroll over time. Dividing p.x / p.y creates a hyperbolic pattern.

Assessment

Given float color = sin(p.x * 10. + time), predict what the screen looks like and what happens when you replace p.x with p.x / p.y. Then explain why the GPU can compute spatial patterns efficiently.

“The Force comes with a function `uv()` that returns the `x` and `y` coordinates of the current pixel being calculated. We can use this to make a classic video oscillator on our screen.”
corpus · workshop-notes-audiovisual-programming-wac-2019-charlie-robe · chunk 1