Grid Lines
6 / 30
Use fract() and step() to draw grid lines.
Stripes repeat in one direction. Grid lines repeat in both directions and draw a line near each tile boundary.
Build tiled coordinates
fract(vUv * 10.0) divides the canvas into a 10×10 grid. Inside each cell, g runs 0–1 again.
Draw lines at boundaries
Within each cell, g.x near 1.0 means near the right edge. Use step to detect it:
step(0.95, g.x)= 1 wheng.x > 0.95(near right edge)- Adding the y test covers horizontal lines too
min(line, 1.0)prevents the value exceeding 1 at intersections
Exercise
The exercise starts with line = 0.0 (all background). Compute the line mask with step(1.0 - lw, g.x) + step(1.0 - lw, g.y), then clamp with min.
Answer Breakdown
Each direction contributes one set of lines. Adding them together means corner intersections get a value of 2 — min(line, 1.0) brings that back to 1.
Try lw = 0.02 for thinner lines, or change density to control how many grid cells appear.