Mathematics in Motion: GLSL Shader Explorations
In this series of GLSL shader experiments, I explored the intersection of mathematics and art through four dynamic visual compositions. Each shader harnesses the beauty of trigonometry, symmetry, and color theory to create mesmerizing animated patterns, from fractal spirals and neon mandalas to golden-ratio-inspired forms. These explorations are a celebration of how code can paint, algorithms can perform, and computation can become a canvas for creativity.
The Making Of
CLIENT - Self-Initiated Project
This project continues my exploration of generative digital art through shader programming. I set out to create a series of four mesmerizing GLSL-based animations that merge mathematical logic with artistic expression. Each piece explores the harmony between trigonometry, symmetry, and color, transforming abstract code into fluid, living visuals. The goal was to push the boundaries of what mathematical algorithms could express visually, turning formulas into art that feels organic and alive.
​
PROJECT OVERVIEW
The series features four distinct animated patterns, each powered by unique algorithms. The first combines radial symmetry and sine falloffs to form a kaleidoscopic dance of light and color. The second takes inspiration from neon aesthetics, where sine-wave distortions and tiling matrices create glowing mandala-like patterns. For the third, I worked with the golden ratio, designing fractal spirals that echo natural growth and rhythm. The final shader explores polar symmetry with layered noise and vivid palette shifts, resulting in hypnotic, ever-changing forms.
These explorations became a joyful study of how mathematics and art intersect, a place where trigonometric functions behave like brushstrokes and algorithms act as instruments of visual rhythm. Writing, debugging, and refining each shader was an act of play and precision. It was as much about problem-solving as it was about wonder.
​
ROLE - Concept, Shader Design, and Technical Implementation
I conceptualized, coded, and optimized each shader from scratch, experimenting with GLSL functions to control light, motion, and color transitions. My focus was on achieving fluid motion and balanced composition through mathematical relationships rather than traditional keyframe animation. This process strengthened my understanding of real-time rendering, trigonometric manipulation, and performance optimization. As a self-initiated project, it allowed me to explore pure creative coding, where logic meets aesthetics and where math, quite literally, paints.
So here are the shaders in motion, each one added below for your visual reference. Hope you enjoy watching them as much as I enjoyed creating them, and don’t forget to share them with your friends and fam! 💫
​​
vec3 palette(float t) {
// Palette limited to neon yellow, pink, and cyan
vec3 a = vec3(0.1, 0.1, 0.1);
vec3 b = vec3(0.8, 0.8, 0.8);
vec3 c = vec3(1.0, 1.0, 1.0);
vec3 d = vec3(0.5, 0.2, 0.7); // Creates a neon effect
return a + b * cos(6.28318 * (c * t + d));
}
​
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
// Normalize coordinates
vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
vec2 uv0 = uv;
vec3 finalColor = vec3(0.0);
// Layer multiple fractal-like iterations
for (float i = 0.0; i < 5.0; i++) {
uv = fract(uv * 1.8) - 0.5; // Creates repeating tiles
// Distance and decay for fractal pattern
float d = length(uv) * exp(-length(uv0));
// Dynamic color palette with motion
vec3 col = palette(length(uv0) + i * 0.3 + iTime * 0.5);
// Wave distortion for glow
d = sin(d * 12.0 + iTime) / 8.0;
d = abs(d);
d = pow(0.01 / d, 1.8); // Sharper falloff for vivid glow
finalColor += col * d;
}
​
fragColor = vec4(finalColor, 1.0);
}
For context, a GLSL fragment shader that generates the neon fractal patterns through trigonometric modulation and iterative symmetry shown in the section above.
Watch the shaders come alive in motion! 💫