Polka Dots
Split the canvas into an 8×8 grid and draw a circle at the center of each cell. The key is these two lines:
Here's how each part works.
fract tiles the grid, subtracting 0.5 centers it
vUv * count stretches UV coordinates by 8. fract() folds 0–8 back into 8 individual 0–1 local coordinates.
Subtracting 0.5 shifts each cell's origin from the bottom-left corner to the center: the local range goes from (0, 0)–(1, 1) to (-0.5, -0.5)–(0.5, 0.5).
Now the center of every cell sits at (0, 0), which is the natural origin for drawing circles.
length and smoothstep draw the circle
length(gv) is the distance from the current pixel to the cell center: 0 at the center, about 0.5–0.7 at the edges.
smoothstep(0.18, 0.19, d) transitions from 0 to 1 between distances 18%–19% of the cell size: pixels closer than 0.18 return 0 (inside the dot), farther than 0.19 return 1 (outside).
1.0 - smoothstep(...) inverts this: 1 inside the dot (foreground), 0 outside (background).
mix(bg, fg, dot) uses that 0/1 mask to switch between the background and dot colors.
Try changing it
| Change | Effect |
|---|---|
Set count from 8.0 to 4.0 | Fewer, larger dots |
Change 0.18 to 0.3 | Dots grow larger, nearly filling each cell |
Change 0.18 to 0.05 | Tiny dots |
Replace smoothstep(0.18, 0.19, ...) with step(0.2, ...) | Hard circle edges, no anti-aliasing |
Exercise
Replace vec2 gv = vec2(0.0); and float dot = 0.0; with the correct expressions to produce an 8×8 grid of dots.
Answer Breakdown
fract(vUv * 8.0) tiles the coordinates into 8×8 cell-local values. Subtracting 0.5 moves each cell's origin to its center, so length(gv) measures distance from that center. smoothstep(0.18, 0.19, d) draws a smooth circular boundary at radius 0.18–0.19. 1.0 - ... inverts the mask so the inside of each dot is 1.
The starting code gv = vec2(0.0) makes the local coordinate 0 for every pixel, so length(gv) is always 0, dot is always 1, and the canvas shows solid foreground color with no dot pattern.
Try changing 0.18, 0.19 to 0.1, 0.4 to see how a wider smoothstep range affects the circle's edge.