02 / PIXELS, PATTERNS & MOVEMENT
The invisible map
behind an effect.
A colourful animation starts with two coordinates.
49 seconds · English narration / Japanese subtitles available.
Change the map.
See the effect.
U and V describe positions across a surface. In our demo, a shader calculates a colour at each position. The coordinate grid helps make the calculation visible.
- Add an offset.The pattern moves inside the fixed frame.
- Multiply the coordinates.More pattern fits into the same frame, making each feature smaller.
- Correct the aspect ratio.Equal distances keep their proportions on a wider surface.
Pause the motion, change one value, then compare. Every control updates the working shader.
Read the full narration
This moving pattern starts with an invisible map. Two coordinates tell the shader where to calculate a colour.
Think of U and V as addresses across the surface. Here, both run from zero to one. The grid makes those addresses visible.
Add an offset to the coordinates. The pattern moves inside the frame, while the frame itself stays still. Our grid follows the same calculation.
Now multiply the coordinates. More of the pattern fits into the same frame, so each feature looks smaller. We're scaling the sampling map, not the screen.
On a wide screen, correct for the aspect ratio first. Otherwise equal distances can look stretched. Then let time change one coordinate to create motion.
Start with the map. Change one value, pause, and compare. Coordinates give you a practical way to design an effect, instead of guessing.