Sine Wave Animation
The sin() function oscillates between −1 and +1. Feed u_time into the phase and the wave scrolls every frame:
The range problem
sin() produces values from −1 to +1, but UV coordinates are 0 to 1. Using a raw sin value as a y coordinate would go negative and fall off the canvas. The standard fix is scale-and-shift:
* 0.5: compresses ±1 to ±0.5+ 0.5: shifts the range from [−0.5, +0.5] to [0, 1]
The result is always between 0 and 1, safe to use as a y coordinate or blend factor.
Turning the wave into a visible stripe
Once you know the wave's y value at each column, compute how far the current pixel is from that y, then use smoothstep to convert distance into a brightness mask:
abs(uv.y - normalizedWave) is the distance to the wave. smoothstep(0.0, 0.1, d) transitions from 0 to 1 over a distance of 0.1. Inverted with 1.0 -, pixels close to the wave are bright and pixels far away are dark.
Color changing over time
colorMix is another normalized sin value — it oscillates between 0 and 1, making the wave's color alternate between orange and blue as time progresses.
Try changing it
| Change | Effect |
|---|---|
10.0 → 5.0 | Half frequency, wave peaks spread further apart |
0.1 (smoothstep width) → 0.02 | Thinner, sharper wave line |
colorMix = sin(u_time) * 0.5 + 0.5 → colorMix = uv.x | Color gradients by position instead of time |
u_time → u_time * 3.0 | Faster scrolling and faster color change |
Exercise
Change float colorMix = sin(u_time) * 0.5 + 0.5; to float colorMix = uv.x; so the wave color gradients horizontally by position instead of changing over time.
Answer Breakdown
Starting state: sin(u_time) * 0.5 + 0.5 makes the whole wave switch between orange and blue uniformly over time.
The fix: uv.x uses the horizontal coordinate as the blend factor. The left side of the canvas leans orange (colorMix near 0) and the right side leans blue (colorMix near 1). The wave color no longer changes with time — it now varies spatially from left to right.
This change illustrates a core pattern: any value in the 0–1 range can drive mix as the third argument, whether it comes from time, position, or noise.