Breathing Color Block
The whole canvas gently fades in and out over time — like breathing. It comes from two lines:
Let's break them down.
Generating the breathing brightness
sin(u_time) oscillates between -1.0 and 1.0.
0.5 + 0.5 * sin(u_time) remaps that to 0.0–1.0:
- At its lowest:
0.5 + 0.5 * (-1.0) = 0.0(completely dark) - At the midpoint:
0.5 + 0.5 * 0.0 = 0.5(half bright) - At its highest:
0.5 + 0.5 * 1.0 = 1.0(fully bright)
This brightness value is used as the red channel — it cycles from 0% to 100% over and over.
Fixed green and blue, only red moves
Green is fixed at 60% and blue at 90%. Only red is animating.
When red is low, the canvas leans cool (dominated by blue and green). When red is high, it shifts warmer (a reddish-purple tone). The whole color breathes between cool and warm.
Try changing it
| Change | Effect |
|---|---|
sin(u_time * 2.0) | Breathing is twice as fast |
0.3 + 0.7 * sin(u_time) | Darker floor, stronger contrast |
vec3(0.9, brightness, 0.6) | Green channel breathes instead |
vec3(brightness, brightness, brightness) | Pure grayscale breathing |
Exercise
The exercise canvas is empty. Use sin(u_time) to generate a brightness value and build a color block where the red channel breathes over time.
Answer Breakdown
0.5 + 0.5 * sin(u_time)remaps the sine wave to 0.0–1.0vec3(brightness, 0.6, 0.9)animates only the red channel; green and blue stay fixedvec4(color, 1.0)writes the result to the screen
The starting code has an empty main(), so nothing is output. Adding these three lines computes a different brightness each frame, and the canvas starts to breathe.
Try replacing 0.6 with sin(u_time + 1.0) * 0.5 + 0.5 — green will breathe too but at a different phase, making the color shifts much more varied.