Ripple

Rings spread outward from the center like a stone dropped in water. It all comes from one line:

Let's break it down.

A wave that uses distance as its input

d is the distance from the current pixel to the center of the canvas (0.5, 0.5).

sin(12.0 * d) uses distance as the input variable, creating concentric sine wave rings. 12.0 controls frequency — higher values pack more rings closer together.

Subtracting u_time makes the waves radiate outward

In sin(12.0 * d - u_time * 3.0), the - u_time * 3.0 decreases the phase over time.

The sine wave's peaks continuously shift toward larger values of d — visually, the rings appear to travel outward. 3.0 controls the propagation speed: larger means faster.

Changing it to + u_time would make the rings collapse inward instead.

Turning the wave into color

wave * 0.5 + 0.5 remaps the -1.0–1.0 sine output to 0.0–1.0. mix then interpolates between dark and light blue — wave peaks show as bright cyan, troughs as dark.

Try changing it

Exercise

The exercise canvas has wave fixed at 0.0, so the whole canvas is a uniform mid-tone. Compute wave using sin(12.0 * d - u_time * 3.0) to make rings radiate outward from the center.

Answer Breakdown

• 12.0 * d uses distance as the variable to produce concentric rings
• - u_time * 3.0 propagates the rings outward over time
• The result is a -1.0 to 1.0 value representing the wave height at each pixel

The starting code has wave = 0.0, a constant, so t is always 0.5 and the color is stuck at the midpoint between the two gradient colors. Replacing it with sin(12.0 * d - u_time * 3.0) makes wave vary with both distance and time, and the ripples appear.

Try changing 12.0 to 20.0 — the rings become very dense, like fine water ripples.