Welcome back, my fellow shader artists! 👋 It's time to dive once again into the mesmerizing world of radial gradients. 🌀 These captivating patterns radiate outward from a central point, creating a sense of depth and movement that will have your viewers gazing in awe. After our previous explorations of linear and combined gradients, I know you're eager to unleash the full power of radial gradients upon your digital canvases.

But before we unleash the full power of radial gradients, let's take a moment to appreciate the mathematical beauty that lies beneath the surface. After all, what's a little shader art without a sprinkle of complex equations to really make your brain hurt? 🧠

Ah, yes, the good old distance formula. This little gem is the key to unlocking the radial gradient realm. By calculating the distance between the current pixel and a central point, we can create a smooth transition of colors that radiates outward like a colorful shockwave.

Now, let's put this knowledge into action with a basic radial gradient shader:

             #ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution; // Canvas resolution

void main() {
    vec2 v = gl_FragCoord.xy / u_resolution.xy; // Normalized pixel coordinates
    v.xy = v.xy * 2.0 - 1.0; // Normalized device coordinates
    v.x *= u_resolution.x/u_resolution.y;
    vec2 center = vec2(0.0, 0.0); // Center of the gradient (in normalized device coordinates)
    float dist = distance(v, center); // Distance from the center
    vec3 color = vec3(dist, 0.0, 1.0 - dist); // Radial gradient from red to blue
    gl_FragColor = vec4(color, 1.0);
}

In this version, we've hardcoded the center of the gradient to be at the coordinates (0.5, 0.5), which represents the center of the canvas in normalized coordinates. By using this fixed center point, we can create a radial gradient that radiates outward from the middle of the canvas.

             precision mediump float;
#endif
#define PI 3.14159265359
uniform vec2 u_resolution; // Canvas resolution

void main() {
    vec2 v = gl_FragCoord.xy / u_resolution.xy; // Normalized pixel coordinates
    v.xy = v.xy * 2.0 - 1.0; // Normalized device coordinates
    v.x *= u_resolution.x/u_resolution.y;
    vec2 center = vec2(0.0, 0.0); // Center of the gradient (in normalized device coordinates)
    float dist = distance(v, center); // Distance from the center
    vec3 color = vec3(dist, 0.0, 1.0 - dist); // Radial gradient from red to blue
    vec3 color = vec3(0.5*dist*dist, sin(PI*dist), cos(PI*dist)); // Quadratic radial gradient
    gl_FragColor = vec4(color, 1.0);
}

But why stop there? We're shader artists, dammit! Let's spice things up with some funky math and create a truly mind-bending radial gradient that would make even Pythagoras question his life choices. Stay tuned, my mathematical mavericks, and get ready to bend reality to your will! 🔮