intermediate

#6 Patterns & Tiling

Repeating with fract()

The fract() function returns only the fractional part of a number (e.g., fract(3.7) = 0.7), which means multiplying your UVs and taking fract creates a grid of repeating 0–1 tiles across the screen. Draw a shape once, and it appears in every tile. Pair it with floor() to get each tile's unique index, letting you vary color, size, or animation per cell. This is how procedural textures create infinite repeating patterns from minimal code.

Key Concepts

Try this shader live in the Shader Sandbox editor with real-time preview.
Open in Sandbox

Source Code


    
← Previous Shapes: Rectangles Next → Smooth Functions

All Tutorials