Wave Warp
The horizontal gradient bends into a wave, and that wave travels across the canvas over time. The whole effect is one line:
Let's break it down.
Distorting the image by nudging UV coordinates
Normally uv.y is just the pixel's vertical position, from 0.0 (bottom) to 1.0 (top).
Adding an offset to uv.y pushes each column of pixels up or down. Since different columns get different offsets, the overall image becomes warped.
What sin(uv.x * 10.0 + u_time) does
uv.x * 10.0: makes the wave repeat 10 times horizontally (frequency)+ u_time: advances the phase over time, making the wave travel left* 0.04: the amplitude — controls how tall the wave is; 0.04 means a maximum shift of 4% of the canvas height
Higher frequency means more ripples; larger amplitude means more bending; u_time keeps it flowing.
How the gradient is generated after warping
The gradient runs from dark to light based on uv.y. Since uv.y has been warped by the wave, the gradient boundary bends with it — making it look like ripples on water.
Try changing it
| Change | Effect |
|---|---|
uv.x * 5.0 | Longer waves, gentler bending |
uv.x * 20.0 | Denser ripples, tight pattern |
* 0.1 | Larger amplitude, more dramatic distortion |
uv.x += sin(uv.y * 8.0 + u_time) * 0.04 | Horizontal warp instead — very different feel |
Exercise
The exercise canvas shows a flat, static gradient. Add uv.y += sin(uv.x * 10.0 + u_time) * 0.04 to bend it into a flowing wave.
Answer Breakdown
sin(uv.x * 10.0 + u_time)computes the vertical offset for each column based on its position and time* 0.04scales the offset to a reasonable rangeuv.y +=applies the offset to the vertical coordinate, creating the distortion
The starting code leaves uv unchanged, so the gradient is perfectly flat. Adding this line nudges each column's y-coordinate up or down, bending the gradient boundary into a wave.
Try changing 10.0 to 3.0 — the wave becomes a slow, wide undulation.