Gradient Effects

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.