Gradients: When Color Learns About Position

In the previous lesson, Your First Shader: Painting the Entire Screen One Color, we learned that a shader can fill the entire canvas with a single color by writing values into gl_FragColor.

If you missed that lesson, you can read it here:

https://ecency.com/@hey2d/your-first-shader-painting-the-entire-screen-one-color-bpy

That was our first step. Every pixel received the exact same color, so the whole screen became one flat surface.

Now we are going to make things a little more interesting.

Instead of giving every pixel the same color, we will let the color change depending on where the pixel exists on the screen.

If you want to follow along and experiment yourself, you can use the exercise here:

https://www.shader-learn.com/learn/basic/basic-gradients

One of the best ways to learn GLSL is simply by changing values and seeing what happens. The browser updates instantly, so you can develop an intuition for the code instead of memorizing it.

The Line That Creates the Gradient

The example shader comes down to this:

gl_FragColor = vec4(1., 1., uv.y, 1.0);

At first glance it may not look very different from the solid color example.

The important difference is the use of uv.y.

What Are UV Coordinates?

Every pixel knows where it is on the canvas.

Shaders usually represent that position using UV coordinates.

Think of them as normalized coordinates that always range from 0.0 to 1.0.

uv.x

Moves from left to right.

• Left edge = 0.0
• Right edge = 1.0

uv.y

Moves from bottom to top.

• Bottom edge = 0.0
• Top edge = 1.0

The bottom left corner becomes:

(0.0, 0.0)

The top right corner becomes:

(1.0, 1.0)

Every pixel in between gets its own unique values.

Using Position As Color

Let's look at the shader again:

gl_FragColor = vec4(1., 1., uv.y, 1.0);

The first value controls red.

The second value controls green.

The third value controls blue.

Red and green stay fixed at 1.0.

Blue is controlled by uv.y.

That means blue changes depending on how high the pixel is on the screen.

At the bottom:

uv.y = 0.0

vec4(1., 1., 0.0, 1.0)

Blue is off.

Only red and green remain.

The result is yellow.

At the top:

uv.y = 1.0

vec4(1., 1., 1.0, 1.0)

Blue reaches full strength.

Now all three color channels are active.

The result is white.

Every pixel between those two positions receives a slightly different amount of blue, creating a smooth transition from yellow to white.

That smooth transition is what we call a gradient.

Things Worth Trying

This lesson becomes much clearer when you start changing values yourself.

Try replacing:

uv.y

with:

uv.x

The gradient will run from left to right instead of bottom to top.

Try this:

gl_FragColor = vec4(uv.x, 1., uv.y, 1.0);

Now red changes horizontally while blue changes vertically.

You are controlling two gradients at the same time.

Try removing green:

gl_FragColor = vec4(1., 0., uv.y, 1.0);

The colors change completely.

Or flip the gradient:

gl_FragColor = vec4(1., 1., 1.0 - uv.y, 1.0);

Now the transition runs in the opposite direction.

The previous lesson taught us how to fill the screen with color.

This lesson teaches us something much more important.

Color does not have to stay constant.

It can depend on position.

That single idea sits behind many of the effects we will build later. Patterns, shapes, animation, noise, lighting, and even more complex shader art often begin by manipulating UV coordinates.

For now, do not worry about mastering the math.

Open the exercise page, change numbers, break things, and observe the results.

The goal is not to remember the code.

The goal is to develop an intuition for what happens when color starts responding to position.

Posted Using INLEO