Color Cycle
The canvas cycles continuously through red, green, blue, and back again. It all comes down to these three lines:
Let's break it down.
Three channels, each offset
Each of the red, green, and blue channels uses sin to generate a value from 0.0 to 1.0. The key is that they start at different points in the cycle.
What are 2.094 and 4.188? They're the radian values of 2π/3 — which is 120°. One full circle (360°) divided equally into three parts.
Because the three channels are offset by exactly one-third of a cycle each, their peaks never align — when red is at its brightest, green and blue are at different stages. That's what produces a smooth, continuous sweep through the color wheel instead of all three channels pulsing in sync (which would just be a gray pulse).
Why 2.094
2π ÷ 3 ≈ 2.094.
2π is one complete sin cycle. Dividing it into thirds spaces the three channels evenly around the color wheel, producing a smooth, full-spectrum color loop.
Try changing it
| Change | Effect |
|---|---|
sin(u_time * 2.0) | Colors cycle twice as fast |
sin(u_time * 0.3) | Slow, drifting color flow |
Change offsets to 1.5 and 3.0 | Unequal phases, asymmetric color cycle |
Fix blue at 0.5, vary only red and green | Canvas shifts between red and green tones |
Exercise
The exercise canvas is solid black. Use three sin(u_time) values — each offset by 2.094 from the last — to drive the red, green, and blue channels and produce a continuous color cycle.
Answer Breakdown
- Each channel uses
sin * 0.5 + 0.5to remap to 0.0–1.0 - The offsets 0, 2.094, and 4.188 space the channels evenly around the cycle
- The phase gap is 2π/3, distributing the three channels equally on the color wheel
The starting code has c = vec3(0.0) — solid black. Replacing it with three offset sin values makes the channels take turns being dominant, and the canvas flows through the full color spectrum.
Try changing the third offset from 4.188 to 3.0 — the cycle becomes asymmetric and the canvas develops a color bias.