SF/06 · Seed 13

Phase Garden

Interference bands open and close like nocturnal leaves.

Three phase-shifted wave systems meet inside a soft vignette. The seed tunes their frequencies and orientation; pointer movement changes their alignment.

Palette · Moss / acid yellow / charcoal
Interaction · Pointer re-centres the waves · press to drop a fourth
Runtime · WebGL2 / fragment shader

Seed 13

Loading…

Time 6.00 s

Fragment shaderGLSL ES 3.00

#version 300 es
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_pointer;   // 0–1, eased; drifts by itself while nobody is pointing
uniform vec3 u_click;     // xy = last press (0–1), z = seconds since that press
uniform float u_seed;
out vec4 outColor;

// Integer hash: a given seed renders the same work on every GPU.
uint hashu(uint x) {
    x ^= x >> 16; x *= 0x7feb352dU;
    x ^= x >> 15; x *= 0x846ca68bU;
    x ^= x >> 16;
    return x;
}

float seeded(uint k) {
    return float(hashu(uint(u_seed) * 0x9e3779b9U + k)) / 4294967295.0;
}

vec2 toField(vec2 q) {
    return (2.0 * q - 1.0) * u_resolution / min(u_resolution.x, u_resolution.y);
}

float dither(vec2 p) {
    return (fract(52.9829189 * fract(dot(p, vec2(0.06711056, 0.00583715)))) - 0.5) / 255.0;
}

void main() {
    vec2 uv = toField(gl_FragCoord.xy / u_resolution.xy);
    vec2 pointer = (u_pointer - 0.5) * 0.7;
    float t = u_time * 0.16;
    vec3 tune = 0.65 + 0.75 * vec3(seeded(1u), seeded(2u), seeded(3u));
    float lean = 6.2831853 * seeded(5u);
    vec2 axis = vec2(cos(lean), sin(lean));
    float a = sin(dot(uv, axis) * 7.0 * tune.x + sin(dot(uv, axis.yx * vec2(-1.0, 1.0)) * 3.0 + t));
    float b = sin((uv.x + uv.y) * 5.2 * tune.y - t * 1.3 + pointer.x * 4.0 + 6.2831853 * seeded(6u));
    float c = cos(length(uv - pointer) * 13.0 * tune.z - t * 1.8);
    // A press drops a stone: one more wave system, fading as it spreads.
    float age = u_click.z;
    float d = cos(length(uv - toField(u_click.xy)) * 18.0 - age * 6.0) * exp(-0.9 * age);
    float field = (a + b + c + 0.9 * d) / 3.0;
    float leaf = smoothstep(0.02, 0.62, abs(field));
    float vein = pow(1.0 - min(abs(field), 1.0), 9.0);
    float vignette = smoothstep(1.5, 0.25, length(uv));

int pick = int(floor(seeded(4u) * 3.0));
    vec3 charcoal = vec3(0.025, 0.04, 0.035), moss = vec3(0.12, 0.32, 0.16), acid = vec3(0.76, 0.88, 0.22);
    if (pick == 1) { charcoal = vec3(0.02, 0.03, 0.05); moss = vec3(0.06, 0.26, 0.30); acid = vec3(0.55, 0.95, 0.80); }
    if (pick == 2) { charcoal = vec3(0.04, 0.02, 0.03); moss = vec3(0.32, 0.10, 0.18); acid = vec3(0.98, 0.62, 0.46); }

vec3 color = mix(charcoal, moss, leaf * vignette);
    color = mix(color, acid, vein * vignette);
    outColor = vec4(color + dither(gl_FragCoord.xy), 1.0);
}

Remix in playground Live compile Animate

Export a loop Format Size Length Seamless

Keys outside the editor: F fullscreen · Space play or pause · R reseed

The source above is the complete fragment shader. Changes remain in this tab unless you take them to the playground. Download the original GLSL.