This tutorial combines four types of gradients and blends them dynamically using u_time. The core structure is:
Let's look at how each of the four gradients is built.
Linear gradient: diagonal direction
Adding x and y coordinates and dividing by 2 creates a diagonal gradient — dark at the bottom-left, bright at the top-right.
Radial gradient: outward from center
distance measures how far each pixel is from the center. 1.0 - dist * 2.0 maps the center (distance 0) to the brightest value and the edges to the darkest.
Angular gradient: rotating around center
atan computes the pixel's angle relative to the center, in the range -π to +π. Adding π and dividing by 2π normalizes it to 0–1, which then maps to color.
Wave gradient: oscillating over time
sin oscillates between -1 and 1. * 0.5 + 0.5 shifts it to 0–1. u_time * 2.0 scrolls the wave to the right over time.
Try changing it
| Change | Effect |
|---|---|
Change u_time * 2.0 to u_time * 5.0 | Wave scrolls faster |
Change uv.x * 10.0 to uv.x * 3.0 | Wave becomes wider |
Change u_time * 0.5 to 0.0 | Freezes the dynamic blend at one state |
Comment out smoothstep(0.0, 1.0, finalColor) | Lower contrast, softer colors |
Exercise
In the exercise, fill in the blue component of the linear gradient with (uv.x + uv.y) * 0.5 to add a blue tint to the diagonal gradient.
Answer Breakdown
uv.x as the red channel brightens left to right. uv.y as the green channel brightens bottom to top. (uv.x + uv.y) * 0.5 as the blue channel is their average, creating a blue tint in the central region.
The exercise already has the full variable structure in place — just replace the placeholder for the blue component with (uv.x + uv.y) * 0.5.
Try changing the blue component to sin(uv.x * 6.28) * 0.5 + 0.5 to introduce a periodic horizontal variation in the blue channel.