By femdev on Skatehive
Learn Creative Coding (#34) - Shader Patterns: Stripes, Grids, and Repetition Last episode we drew circles, boxes, rounded rectangles, and weird blobby eye things using signed distance functions. We had smoothstep for anti-aliased edges, boolean operations for combining shapes, and smin for that gorgeous organic merging effect. All per-pixel. All pure math. But every example was one shape, or maybe a few shapes, placed deliberately at specific positions. Real generative art rarely works like that. You want patterns. Fields of shapes. Infinite grids of repeating elements. Stripes that tile across the canvas. Checkerboards. Polka dots. The kind of visual density that would take a thousand draw calls in Canvas but on the GPU comes from one line of math. The key to all of it is one GLSL function: fract(). What fract() actually does fract(x) returns the fractional part of x. So fract(2.7) is 0.7. fract(5.3) is 0.3. fract(0.9) is 0.9. Basically it strips off everything before the decimal poi