Ping-Pong Band
A bright yellow vertical band bounces back and forth across the canvas. All the motion comes from one line:
Let's break it down.
Using sin to generate a bouncing position
sin(u_time) oscillates between -1.0 and 1.0.
* 0.5 + 0.5 remaps that to 0.0–1.0, which maps directly to the canvas from left (0%) to right (100%).
So x is the band's current center position, moving back and forth over time.
Drawing the band
abs(vUv.x - x) is the distance from the current pixel to the band's center.
smoothstep(0.03, 0.06, d) generates a 0.0–1.0 transition between distances 0.03 and 0.06:
- Distance less than 0.03 → outputs 0.0 (inside the band)
- Distance greater than 0.06 → outputs 1.0 (outside)
1.0 - ...inverts this so the band interior is 1.0 (bright) and exterior is 0.0 (dark)
Final color mix
When m = 1.0 (inside the band), the pixel shows bright yellow. When m = 0.0 (outside), it shows the dark background.
Try changing it
| Change | Effect |
|---|---|
sin(u_time * 2.0) | Band bounces twice as fast |
smoothstep(0.01, 0.015, d) | Thinner band with sharper edges |
smoothstep(0.05, 0.15, d) | Wider band with a soft glow |
Replace vUv.x with vUv.y | Horizontal band bouncing up and down |
Exercise
The exercise canvas has the band fixed at the center. Replace float x = 0.5 with a value computed from sin(u_time) to make the band bounce left and right.
Answer Breakdown
sin(u_time)oscillates between -1.0 and 1.0* 0.5 + 0.5remaps to 0.0–1.0, matching the canvas width
The starting code has x = 0.5, a constant — the band never moves. Replacing it with sin(u_time) * 0.5 + 0.5 makes x vary between 0 and 1 over time, and the band starts bouncing.
Try changing * 0.5 + 0.5 to * 0.3 + 0.5 — the bounce range shrinks and the band stays closer to the center.