Animating with time

u_time + sin() makes it move — a shader runs every frame.

Because the GPU re-runs your shader every frame, anything you tie to time moves. You are given u_time — the seconds since the shader started. Feed it through sin(), which oscillates smoothly between -1 and 1, and you get motion. The pattern 0.5 + 0.5 * sin(u_time) turns that into a value that pulses between 0 and 1 — perfect for a fading brightness, a breathing glow, or a moving highlight.

Your final exercise: make the whole screen pulse between dark and bright over time. It is graded while it animates, so a still image will not pass — it has to actually move.

Your turn

Make the screen pulse between dark and bright over time.

Compute brightness = 0.5 + 0.5 * sin(u_time), and use it for all three color channels. u_time is the seconds since start.

Tip This is exactly how in-game shader effects work: water, fire, force fields and UI glows are mostly coordinates, mix(), shapes and time — the four things you just learned — layered together.

▶ Build an animated effect Combine everything: a pulsing, colored glow you could drop into a game.

← Previous Next lesson →