Have you ever looked at a video game and wondered how the water ripples so perfectly, or how a magical portal seems to glow and swirl with neon light? It looks like movie magic, but it’s actually something even cooler: Math.

In the world of computer graphics, we use a special kind of code called a Shader.

What is a Shader?

Imagine you have a giant coloring book page with millions of tiny squares (pixels). Instead of coloring each one by hand, you write a single "rule" that every pixel has to follow at the same time.

A shader is basically a tiny brain that lives inside your graphics card. It asks every pixel on your screen two questions:

1. Where are you? (Your coordinates)

2. What time is it? (How many seconds have passed since the game started)

Using Math as a Paintbrush

To make things move, we use math functions you might recognize from school—specifically Sine and Cosine.

In your math book, a Sine wave looks like a smooth "S" curve that goes up and down. In a shader, we use that "up and down" motion to tell a pixel how bright to be or where to move.

• Want a light to pulse? Tell the brightness to follow a Sine wave.

• Want a flag to wave in the wind? Use a Sine wave to wiggle the pixels left and right.

Creating "Infinite" Complexity

The coolest part about shaders is that you can layer math on top of math. If you take a simple circle and tell the computer to "fold" the screen like a piece of paper (using the absolute value function), you suddenly get symmetry. If you repeat that math ten times, you get a Fractal—a pattern that looks incredibly complex but is actually just one simple rule repeating over and over.

Why Does It Matter?

Shaders are the secret sauce of modern technology. They are used in:

• Video Games: To create realistic shadows and glowing effects.

• Movies: To simulate massive explosions or flowing capes.

• Your Phone: To create those cool filters that put sparkles in your hair or change the color of the sky.

Next time you see something beautiful on a screen, remember: it’s not just art. It’s a bunch of numbers dancing to the rhythm of a math equation!

// A vibrant color palette function
// a = brightness, b = contrast, c = frequency, d = phase (the color shift)
vec3 palette( float t ) {
    vec3 a = vec3(0.5, 0.5, 0.5);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(1.0, 1.0, 1.0);
    vec3 d = vec3(0.263, 0.416, 0.557);
    return a + b * cos( 6.28318 * (c * t + d) );
}

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
    // 1. Normalize coordinates (Center the screen)
    vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
    vec2 uv0 = uv; // Store original uv for color reference
    vec3 finalColor = vec3(0.0);
    
    // 2. Setup the "Cycle" for the ripple frequency
    // This oscillates between 1.0 and 4.0 every few seconds
    float cycle = 1.5 + 1.5 * sin(iTime * 0.1);
    
    // 3. Optional: Add "Space Folding" (uncomment the line below for chaos)
    // uv = fract(uv * 4.5) - 0.5;

    // 4. The Ripple Math
    float d = length(uv); // Distance from center
    
    // Applying your dynamic cycle to the frequency
    // We use exp(-length(uv0)) to make the center brighter than the edges
    d = sin(d * cycle + iTime) / 8.0; 
    d = abs(d); // Create the "line" effect
    
    // 5. Apply "Glow" logic
    // The smaller 'd' is (the closer to the line), the higher the intensity
    float intensity = 0.05 / d;
    intensity = pow(intensity, 1.9); // Sharpen the glow
    
    // 6. Color Logic
    // We use the distance from the center (uv0) to pick the color
    vec3 col = palette(length(uv0) + iTime * 0.2);
    
    finalColor = col * intensity;

    fragColor = vec4(finalColor, 1.0);
}