Time Animation
The canvas breathes red — its brightness rises and falls over time. It all comes down to two lines:
Let's break each part down.
What is u_time
u_time is a value passed in from outside the shader. It represents how many seconds the program has been running — always growing: 0.0, 0.5, 1.2, 3.7…
Think of it as a stopwatch that never stops.
What sin does
sin(u_time) takes that ever-growing time value and turns it into something that oscillates between -1.0 and 1.0 over and over.
Like a pendulum: it doesn't keep swinging in one direction, it swings back and forth.
Why (oscillation + 1.0) * 0.5
sin outputs a range of -1.0 to 1.0, but color values only accept 0.0 to 1.0 — negative colors don't make sense.
So we remap it:
- Add 1.0 first: range becomes 0.0 to 2.0
- Then multiply by 0.5: range compresses to 0.0 to 1.0
After remapping, red goes from 0% (off) to 100% (full brightness) and back again in a continuous loop.
Try changing it
| Change | Effect |
|---|---|
sin(u_time * 2.0) | Animation runs twice as fast |
sin(u_time * 0.3) | Slow, relaxed breathing |
vec4(0.0, normalizedOscillation, 0.0, 1.0) | Green breathing instead |
vec4(normalizedOscillation, normalizedOscillation, 0.0, 1.0) | Yellow breathing |
Exercise
The exercise canvas shows a static red color. Use sin(u_time) to animate its brightness over time, creating a red breathing effect.
Answer Breakdown
sin(u_time)oscillates between -1.0 and 1.0(oscillation + 1.0) * 0.5remaps that to 0.0–1.0vec4(normalizedOscillation, 0.0, 0.0, 1.0)uses it as the red channel
The starting code has a fixed red value with no time variable. Adding sin(u_time) makes the red channel change over time, which creates the breathing effect.
Try changing * 0.5 to * 0.3 — the dark phases will retain more red, and the breathing range will be smaller.