Lesson 3 of 10 · Shader patterns
The grid
One eye per cell. The grid watches you.
Until now your stripes were a continuous wave, sin() stretches smoothly from side to side. Now you will learn to cut space into cells.
fract() takes only the decimal part of a number. If you give it 3.7, it returns 0.7. If you give it 5.2, it returns 0.2. The result: the coordinates reset every time they cross an integer. Space repeats.
fract(), space resets. Infinite tiling.
fract(p * N)You multiply the coordinates by
N and then take fract(). Space splits into N × N identical cells. Each cell goes from 0 to 1. Whatever you draw in one cell shows up in all of them. Infinity for free.Change
3. to 8., more cells, smaller. To 2., fewer cells, bigger. Change length(cell - 0.5) to cell.x to see gradients per cell instead of circles.Freebie
EYES
Find// replace this in the code and swap that single line for these five:vec2 id = floor(p * 3.); float h = fract(sin(dot(id, vec2(127.1, 311.7))) * 43758.5); float blink = pow(max(0., sin(T * .8 + h * 6.28)), 50.); iris *= 1. - blink; pupil *= 1. - blink;
Paste it. Each eye gets its own rhythm and blinks whenever it wants. They are watching you.
The code
[object Object]