Prompt

Create a GLSL (Shadertoy) script to express yourself. Be creative! Then, explain why you designed it this way.

Output 1

Concept & Design

• Swirling Motion: I applied a time-based rotation (rotate(uv, iTime * 0.3)) to introduce fluidity, symbolizing the constant flow of ideas and emotions.
• Fractal-like Pattern: By converting to polar coordinates (radius and angle) and layering sine functions, the shader produces complex, interwoven wave patterns. This complexity represents the depth and layered nature of creative thought.
• Dynamic Colors: The color channels are driven by sine functions offset in phase. This creates a vibrant, shifting color palette that evolves with time, reflecting the unpredictability and vibrancy of the creative process.
• Vignette Effect: A soft vignette (smoothstep) gradually dims the edges, drawing the viewer’s focus to the heart of the pattern, much like how deep introspection centers one’s creative energy.

Why This Approach?

I wanted to create a shader that felt both mathematical and soulful. The use of simple trigonometric functions to craft a complex, evolving visual reflects how simple ideas can combine to create profound artistic expression. This script is my way of saying that creativity, much like mathematics, is about finding beauty in patterns and movement—even in the abstract realms of thought and emotion.

Code

// Rotates a 2D vector by a given angle.
vec2 rotate(vec2 v, float angle) {

    float s = sin(angle);
    float c = cos(angle);

    return vec2(c*v.x - s*v.y, s*v.x + c*v.y);

}

// Main image function: computes the color for each pixel.
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalize pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord.xy / iResolution.xy;

    // Center the coordinates and correct for aspect ratio
    uv = uv * 2.0 - 1.0;
    uv.x *= iResolution.x / iResolution.y;

    // Apply a time-based rotation to swirl the space
    uv = rotate(uv, iTime * 0.3);
   
    // Compute polar coordinates
    float r = length(uv);
    float angle = atan(uv.y, uv.x);

    // Create a layered wave pattern
    float waves = sin(12.0 * r - iTime * 2.0 + 5.0 * sin(3.0 * angle));

    // Map the wave output to a dynamic color palette
    vec3 col = vec3(
        0.5 + 0.5 * sin(iTime + waves + 0.0),
        0.5 + 0.5 * sin(iTime + waves + 2.0),
        0.5 + 0.5 * sin(iTime + waves + 4.0)
    );

    // Apply a vignette effect to soften the edges
    float vignette = smoothstep(0.8, 0.2, r);
    col *= vignette;
    fragColor = vec4(col, 1.0);
}

Output 2

Concept & Design

I wanted to make a shader that reflects the internal process of creativity—fluid, evolving, and full of surprises. The swirling pattern represents the twists and turns of ideas, while the evolving color palette mimics the changing moods and insights that accompany creative work.

Technical Choices

• Polar Coordinates: By converting the normalized coordinates to polar space (using atan and length), the shader naturally creates circular, swirling patterns that radiate from the center.
• Sine Functions: The use of sine waves (with variables influenced by both radius and time) generates an organic movement reminiscent of waves or thoughts flowing. It’s an homage to the mathematical beauty underlying natural phenomena.
• Time Dependency: Incorporating iTime allows the pattern to evolve continually, much like how our creative ideas are never static but always shifting.
• Color Palette: The cosine-based color function produces a vibrant, ever-changing palette. This dynamic coloration was chosen to evoke the energy and unpredictability of inspiration.
• Vignette: A subtle vignette (using smoothstep) helps focus the viewer’s attention toward the center, much like how a spark of inspiration often feels like the heart of creativity.

In essence, I created this shader as a visual expression of the creative process—complex, dynamic, and always in motion.

Code

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    // Normalize pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord / iResolution.xy;

    // Center the coordinates around (0,0) and adjust for the aspect ratio
    vec2 centered = uv - 0.5;
    if (iResolution.y > 0.0) {
        centered.x *= iResolution.x / iResolution.y;
    }

    // Convert to polar coordinates
    float angle = atan(centered.y, centered.x);
    float radius = length(centered);

    // Create a swirling effect using sine waves influenced by time and angle
    float swirl = sin(10.0 * radius - iTime * 2.0 + angle * 5.0);

    // Generate a color palette using cosine waves for a dynamic color shift
    vec3 color = 0.5 + 0.5 * cos(iTime + radius * 15.0 + vec3(0.0, 2.0, 4.0));

    // Modulate color by swirl effect
    color *= 0.5 + 0.5 * swirl;

    // Apply a vignette effect for focus
    float vignette = smoothstep(0.9, 0.3, radius);
    color *= vignette;

    fragColor = vec4(color, 1.0);
}

Output 3

Concept & Symbolism

I envisioned this shader as a representation of my “mind”—a constantly rotating, ever-evolving universe of ideas. The swirling patterns and the transformation from Cartesian to polar coordinates evoke the notion of looking at things from different angles and perspectives. This mirrors the way I process and generate ideas, blending structured logic with creative spontaneity.

Design Choices

• Rotation & Time Variation:
  The gradual rotation driven by iTime symbolizes ongoing change and evolution. This dynamic movement is key to expressing how ideas are never static but continuously transform.
• Polar Coordinates & Swirling Pattern:
  Converting to polar coordinates allows the shader to create a radial, almost hypnotic pattern. The sine functions layered over the radius and angle give a sense of rhythm and harmony, much like the structured flow of thought.
• Noise Function:
  Adding a touch of noise introduces randomness, which represents the unpredictable, organic aspects of creativity—echoing how even logical processes can yield unexpected insights.
• Color Palette & Vignette:
  The gradient mix between a deep cosmic blue and a warm golden hue symbolizes the merging of calm, reflective thought with vibrant, illuminating ideas. The vignette focuses the viewer’s gaze, hinting at the idea that within a vast universe of thought, there is always a central core of inspiration.

This shader is my digital canvas—a blend of code and art that mirrors the dynamic and multifaceted nature of creativity. Enjoy exploring this little universe of evolving patterns!

Code

float noise(vec2 p) {
    return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453123);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalize pixel coordinates (from 0 to 1) and center them
    vec2 uv = fragCoord.xy / iResolution.xy;
    uv = uv * 2.0 - 1.0;
    uv.x *= iResolution.x / iResolution.y; // Correct aspect ratio

    // Apply a time-varying rotation to evoke a sense of evolving perspective
    float angle = iTime * 0.5;
    mat2 rot = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
    uv = rot * uv;

    // Convert to polar coordinates to create a radial pattern
    float r = length(uv);
    float a = atan(uv.y, uv.x);

    // Create a swirling, rhythmic pattern with layered sine waves
    float pattern = sin(10.0 * r - iTime * 2.0 + sin(3.0 * a + iTime));
    pattern = pattern * 0.5 + 0.5; // Normalize to 0.0 - 1.0

    // Add subtle noise for an organic feel
    pattern += noise(uv * 10.0) * 0.2;

    // Choose a color palette that evolves with the pattern
    vec3 colorA = vec3(0.1, 0.2, 0.5); // Deep, cosmic blue
    vec3 colorB = vec3(1.0, 0.8, 0.2); // Warm, vibrant gold
    vec3 col = mix(colorA, colorB, pattern);

    // Apply a vignette effect to focus the viewer's attention toward the center
    col *= smoothstep(1.2, 0.5, r);

    fragColor = vec4(col, 1.0);
}