Animated Noise
Animating noise takes just one small addition — a time offset applied to the coordinate:
Let's break it down.
Why adding time creates motion
valueNoise takes a 2D coordinate as input. Every frame u_time increases, so adding it to the coordinate shifts the sampling point forward through noise space — the pattern on screen appears to flow.
0.2 is the speed. A larger value makes the noise rush past quickly; a smaller value makes it drift almost imperceptibly.
If you change it to vec2(u_time * 0.2, 0.0), the offset is only along the X axis and the pattern flows horizontally.
Offset vs scaling
Adding + u_time * 0.2 is a translation — like sliding a window across an infinite noise field. Old patterns don't change, they just scroll off screen as new ones enter.
Changing the scale factor changes the frequency, not the animation. Motion comes from shifting the coordinate, not from stretching it.
Try changing it
| Change | Effect |
|---|---|
0.2 → 1.0 | Fast flow, like rushing water |
0.2 → 0.02 | Very slow drift, like floating mist |
u_time * 0.2 → vec2(u_time * 0.2, u_time * 0.1) | Diagonal flow |
valueNoise → fbm (already defined above) | Animated fractal noise, richer look |
Exercise
Modify main so that the coordinate passed to valueNoise includes + u_time * 0.2, making the noise animate.
Answer Breakdown
Change valueNoise(vUv * 8.0) to valueNoise(vUv * 8.0 + u_time * 0.2).
vUv * 8.0— noise frequency, unchanged+ u_time * 0.2— pushes the sampling point a little further each frame, creating flow0.2— speed factor, controls how fast the pattern moves
The starter has a static coordinate, so the noise does not move. Adding the time offset makes the sampling position drift every frame, and the pattern flows with it.
Try limiting the offset to one axis: valueNoise(vUv * 8.0 + vec2(u_time * 0.2, 0.0)) to get a purely horizontal scroll.