Sin/Cos Curve
The sin() function turns a continuously growing number into a value that oscillates back and forth. Apply it to a y coordinate and you get a flowing wave:
What sin() returns
sin() cycles between −1 and +1. Using that value directly as a coordinate would go off the canvas, so you need to scale and shift it:
* 0.25: compresses the swing from ±1 down to ±0.25 — the wave stays away from the edges+ 0.5: moves the center line from 0 to the middle of the canvas (UV 0.5)
What is x * 6.2831853
6.2831853 is 2π — one full revolution. Multiplying vUv.x (which goes from 0 to 1) by 2π makes the wave complete exactly one full sine cycle across the canvas width. Use a larger multiplier like 12.566 (4π) to fit two cycles.
+ u_time animates it
u_time increases every frame. Adding it inside sin() shifts the phase forward each frame, pushing the wave to the left and creating the scrolling animation.
Turning y into a line
Once you know the wave y value at each horizontal position, compute how far the current pixel is from that y, then use smoothstep to convert that distance into brightness:
smoothstep(0.0, 0.01, d) transitions from 0 to 1 over a distance of 0.01. Inverted with 1.0 -, pixels closest to the wave are brightest (white); pixels farther away fade to the background.
Try changing it
| Change | Effect |
|---|---|
6.2831853 → 18.849 | Three wave cycles packed into the canvas |
0.25 → 0.45 | Larger amplitude, wave nearly touches the edges |
0.01 → 0.05 | Thicker, softer line |
u_time → u_time * 3.0 | Wave scrolls faster |
Exercise
Replace float y = 0.5; with the correct sine wave formula so a blue wave scrolls across the canvas.
Answer Breakdown
Starting state: y = 0.5 is a fixed horizontal line — it does not vary with x and never moves.
The fix: vUv.x * 6.2831853 drives the sine through one full cycle across the canvas width. + u_time shifts the phase each frame, scrolling the wave to the left. * 0.25 + 0.5 compresses and centers the ±1 range into the middle of the canvas.
Try changing * 0.25 to * 0.48 to push the wave peaks almost to the canvas edges.