Greetings, my fellow shader artists! 👋 Today, we embark on a journey into the hypnotic realm of angular gradients. Prepare to be mesmerized by swirling vortexes of color that will transport you to a kaleidoscopic wonderland. 🌀✨

But first, let's delve into the mathematics behind these captivating patterns. Angular gradients are created by mapping the angle between a pixel and a reference point to a color range. And how, you might ask, do we calculate this mystical angle? Why, with the almighty atan function, of course!

Ah, the inverse tangent function, a true maestro of angles. By feeding it the coordinates of our pixel relative to the center, it bestows upon us the angle we seek, a value that will guide our colors in their mesmerizing dance.

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

             #ifdef GL_ES
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)
    vec2 diff = v - center; // Vector from center to current pixel
    float angle = atan(diff.y, diff.x); // Angle between the vector and positive x-axis
    float normalized_angle = (angle + PI) / (2.0 * PI); // Normalize angle to [0, 1] range
    vec3 color = vec3(normalized_angle, 0.5, 1.0 - normalized_angle); // Angular gradient from red to blue
    gl_FragColor = vec4(color, 1.0);
}

In this shader, we first calculate the vector from the center of the gradient to the current pixel (diff). We then use the atan function to find the angle between this vector and the positive x-axis, which gives us the angle value we need for our gradient.

Next, we normalize this angle to a range between 0 and 1 by adding π and dividing by 2π. This normalized angle value is then used to create a gradient that transitions from orange to blue as we move around the center in a circular pattern.

But why stop at just a simple orange-to-blue gradient? Let's crank it up a notch and create a stunning color wheel effect!

                 float angle = atan(diff.y, diff.x); // Angle between the vector and positive x-axis
    float normalized_angle = (angle + PI) / (2.0 * PI); // Normalize angle to [0, 1] range
    vec3 color = vec3(normalized_angle, 0.5, 1.0 - normalized_angle); // Angular gradient from red to blue
    vec3 color = vec3(cos(normalized_angle * 2.0 * PI), sin(normalized_angle * 2.0 * PI), 0.5); // Color wheel gradient
    gl_FragColor = vec4(color, 1.0);
}

In this shader, we're using the cos and sin functions along with the normalized angle value to create a smooth transition through the entire color spectrum, resulting in a vibrant and mesmerizing color wheel effect. Prepare to be dazzled by the rainbow of hues swirling around your canvas!

With angular gradients in our arsenal, we can create some truly mesmerizing spiral patterns and swirling vortexes that will leave your viewers in a state of hypnotic bliss. But be careful, stare too long into the swirling colors, and you might just get lost in the kaleidoscopic abyss! 😵‍💫 Stay tuned, my friends, and get ready to let your creativity spin out of control! 🌀🎨