0.00
60.0 fps

Moire Effect Xtreme

An attempt at a demo effect

Log in to post a comment.

#version 300 es
precision highp float;
uniform float iTime;
uniform vec2 iResolution;
out vec4 fragColor;

mat2 rot(float a) { float c=cos(a),s=sin(a); return mat2(c,-s,s,c); }

// ────── SLOW, PLEASANT PALETTE ──────
vec3 palette(float t) {
    vec3 a = vec3(0.5);
    vec3 b = vec3(0.45);
    vec3 c = vec3(1.0);
    vec3 d = vec3(0.00, 0.33, 0.67);
    return a + b * cos(6.28318 * (c * t + d));
}

float wavyDistance(vec2 uv, vec2 center, float waveAmp, float waveFreq, float morph) {
    vec2 p = uv - center;
    float d = length(p);
    float a = atan(p.y, p.x);
    float w = 1.0 + morph * waveAmp * sin(a * waveFreq + iTime * 0.7);
    return d * w;
}

float ringPattern(vec2 uv, vec2 center, float freq, float morph, float sharpness, float hueOffset) {
    float d = wavyDistance(uv, center, 0.18, 10.0, morph);
    
    // base wave
    float rings = sin(d * freq * 6.28318);
    rings = pow(abs(rings), sharpness);
    
    // NEW: colour changes with radius (smaller circles = different hue)
    float radiusHue = hueOffset + d * 2.0 - iTime * 0.05;  // gentle inward colour drift
    
    return rings;
}

void main() {
    vec2 uv = (gl_FragCoord.xy / iResolution.xy) * 2.0 - 1.0;
    uv.x *= iResolution.x / iResolution.y;
    float t = iTime * 0.12;  // ← super slow global time (was 1.0 → now 0.12)

    // frequencies
    float f1 = 9.0 + 30.0 * sin(t * 5.1);
    float f2 = 15.0 + 28.0 * cos(t * 6.7);

    vec2 c1 = rot(t * 4.5) * vec2(0.35, 0.0);
    vec2 c2 = rot(-t * 3.3) * vec2(0.42, 0.0);

    float morph = 0.5 + 0.5 * sin(t * 2.8);

    // slow breathing thickness (0=thin, 1=thick)
    float thicknessCtrl = sin(t * 0.9) * 0.5 + 0.5;
    float sharpness = mix(5.5, 0.95, thicknessCtrl);   // 5.5 = needle, ~0.95 = soft

    // ────── FORCE COMPLEMENTARY COLOURS ──────
    float baseHue = t * 0.07;               // very slow hue drift
    float hue1 = baseHue;
    float hue2 = baseHue + 0.5;             // exactly opposite on colour wheel

    float p1 = ringPattern(uv, c1, f1, morph, sharpness, hue1);
    float p2 = ringPattern(uv, c2, f2, morph, sharpness, hue2);

    float moire = abs(p1 - p2);

    // colour each layer with its own hue + radius-based variation
    vec3 col1 = palette(hue1 + p1 * 0.3 + length(uv - c1) * 1.2);
    vec3 col2 = palette(hue2 + p2 * 0.3 + length(uv - c2) * 1.2);

    vec3 color = mix(col1, col2, 0.5);
    
    // gentle moiré glow that works for both thick and thin phases
    color = color * (0.8 + 1.2 * moire) + moire * palette(t + moire * 3.0);

    // final gentle gamma & contrast
    color = pow(color, vec3(0.85));
    color *= 1.1;

    fragColor = vec4(color, 1.0);
}