Wood Rings

Real wood rings are concentric bands radiating from the center. A polar radius plus noise distortion is enough to simulate this:

The idea: radius + noise

r = length(p) * 8.0 computes the distance from the canvas center. Multiplying by 8 scales it so the canvas edge is about 4 units out.

fract(r) takes the fractional part, folding this growing distance into a repeating 0–1 pattern — one ring per unit. Without noise, this would produce perfectly circular concentric rings.

Adding n (FBM noise) distorts the rings: the boundary of each ring shifts irregularly in different directions, producing the natural grain-like curves of real wood.

How fract creates repetition

fract(x) keeps only the decimal part of x:

• fract(0.0) = 0.0
• fract(1.7) = 0.7
• fract(3.2) = 0.2

The output is always between 0 and 1. Applied to a value that grows linearly with distance, it creates a sawtooth repeating pattern — visually, a series of rings.

FBM noise as distortion

n = fbm(vUv * 6.0) is a 0–1 value built from 4 layers of smooth noise, with the irregular large-scale variation of real wood grain. Adding it to r introduces a random radial offset, making each ring bend slightly.

Try changing it

Exercise

Replace float w = 0.0; with fract(r + n) to produce a noise-distorted ring pattern.

Answer Breakdown

Starting state: w = 0.0 outputs black for every pixel — nothing is visible.

The fix: fract(r + n) takes the radial distance r plus the FBM noise n, then keeps only the fractional part. As r increases outward, fract resets to 0 repeatedly, creating rings. Adding n shifts the ring boundary at each position by a noise amount, bending the rings irregularly the way real wood grain bends.

Try replacing vec3(w) with mix(vec3(0.35, 0.2, 0.05), vec3(0.8, 0.5, 0.15), w) to give the rings actual wood colors.