Drawing Curves with Math Using `pow()` - lesson 5 - GLSL

This is the fifth post in the GLSL learning series.

Previous posts:

• Learning GLSL as a Beginner
• Understanding gl_Position: My First Real Vertex Shader
• Fragment Shaders Made Simple: What gl_FragColor Does
• Drawing Your First GLSL Line
  

In the previous post, we learned how to draw a straight diagonal line by comparing the X and Y coordinates of each pixel.

The important lesson was that shaders are really just math. By taking simple values and comparing them, we can create graphics without using any images.

Our previous shader used:

float y = st.x;

Since the Y value was exactly the same as the X value, we got a straight line running from the bottom left corner to the top right corner.

Now let's take that idea one step further.

Instead of using the X coordinate directly, we can modify it with a mathematical function.

The result is a curve.

The New Shader

float y = pow(st.x,5.0);

This single line is what changes everything.

The pow() function means "raise a number to a power."

In this case:

pow(st.x,5.0)

means:

st.x × st.x × st.x × st.x × st.x

Let's see some example values:

X Value	X⁵ Result
0.0	0.0
0.2	0.00032
0.5	0.03125
0.8	0.32768
1.0	1.0

Notice something interesting.

Most of the values stay very close to zero until they approach 1.0.

This creates a curve instead of a straight line.

Understanding the Plot Function

The shader uses the same plotting function as before:

float plot(vec2 st, float pct){
    return smoothstep(pct-0.02, pct, st.y) -
           smoothstep(pct, pct+0.02, st.y);
}

The purpose of this function is simple.

It highlights pixels that are close to the curve.

Think of it as drawing a thin green marker around the mathematical line we created.

Without it, we would only see the grayscale gradient.

Creating the Curve

The normalized coordinates are still created in the same way:

vec2 st = gl_FragCoord.xy/u_resolution;

This converts the pixel coordinates into values between 0 and 1.

Then we calculate our curve:

float y = pow(st.x,5.0);

The result looks something like this:

|
|                    *
|                 *
|              *
|           *
|        *
|     *
|  *
|*
+-----------------------

Instead of moving upward at a constant rate like a straight line, the curve stays low for most of the graph before rapidly rising near the end.

Coloring the Curve

Just like in the previous example:

float pct = plot(st,y);

The shader checks whether a pixel belongs to the curve.

Then it blends a green color onto those pixels:

color = (1.0-pct)*color +
        pct*vec3(0.0,1.0,0.0);

This makes the curve easy to see.

The biggest lesson from this shader is that changing a single mathematical expression can completely change the shape being drawn.

Previously we used:

float y = st.x;

which created a straight line.

Now we use:

float y = pow(st.x,5.0);

which creates a curve.

This introduces one of the most powerful ideas in GLSL:

Graphics can be generated entirely from mathematical functions.

As we continue learning GLSL, we'll discover that many visual effects are really just combinations of simple mathematical operations applied to coordinates.

A straight line was only the beginning.

Now we're starting to draw curves.

Posted Using INLEO