Time Pulse
The blue canvas keeps brightening and dimming — like a heartbeat. It all comes from one line:
Let's break it down.
Turning sin output into brightness
sin(u_time) oscillates between -1.0 and 1.0.
* 0.5 + 0.5 is a standard remapping formula that shifts and compresses that range to 0.0–1.0:
- When
sinis -1.0 (lowest) →-1.0 * 0.5 + 0.5 = 0.0(0%) - When
sinis 0.0 (middle) →0.0 * 0.5 + 0.5 = 0.5(50%) - When
sinis 1.0 (highest) →1.0 * 0.5 + 0.5 = 1.0(100%)
Using pulse to control brightness
base is the target color (a bright blue). Multiplying by (0.2 + 0.8 * pulse) scales its overall brightness:
- When
pulseis 0: brightness factor is 0.2 — the color stays at 20%, not fully black - When
pulseis 1: brightness factor is 1.0 — full brightness
This makes the pulse cycle between "dim" and "full" rather than "completely black" and "full".
Try changing it
| Change | Effect |
|---|---|
sin(u_time * 3.0) * 0.5 + 0.5 | Pulse beats faster |
sin(u_time * 0.5) * 0.5 + 0.5 | Very slow breathing |
0.0 + 1.0 * pulse (replace 0.2 + 0.8) | Stronger contrast, from black to full |
Change base to vec3(0.95, 0.15, 0.25) | Red pulse instead |
Exercise
The exercise canvas has pulse fixed at 1.0, so the brightness never changes. Replace it with sin(u_time) to generate a proper pulse value and animate it.
Answer Breakdown
sin(u_time)oscillates between -1.0 and 1.0* 0.5 + 0.5remaps that to 0.0–1.0
The starting code has pulse = 1.0, a constant, so the brightness factor is always 0.2 + 0.8 * 1.0 = 1.0 and the canvas never changes. Replacing it with sin(u_time) * 0.5 + 0.5 makes pulse vary between 0 and 1, and brightness follows.
Try changing 0.2 + 0.8 * pulse to 0.4 + 0.6 * pulse — the dark phase will be brighter and the pulse will feel softer.