Generative shader archive · WebGL2

Rules become light.

Seeded Forms is a collection of small fragment shaders: fixed rules, a numeric seed, live pixels, and enough time for a pattern to reveal itself. Each visit draws a new seed.

Open this variation Evaluate your shader

#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;
}

#define TAU 6.28318530718

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

void main() {
    vec2 uv = toField(gl_FragCoord.xy / u_resolution.xy);
    vec2 pointer = toField(u_pointer);
    float petals = 3.0 + floor(seeded(1u) * 7.0);
    float twist = (seeded(2u) - 0.5) * 1.6;
    float density = 5.0 + floor(seeded(3u) * 6.0);
    float depth = 0.1 + 0.12 * seeded(4u);

// The pointer presses a dimple into the field; contours crowd around it.
    float pull = exp(-3.0 * dot(uv - pointer, uv - pointer));
    float age = u_click.z;
    float wave = exp(-1.4 * age) * exp(-pow((length(uv - toField(u_click.xy)) - 0.85 * age) * 9.0, 2.0));

vec2 q = rotate2d(0.12 * sin(u_time * 0.22) + seeded(5u) * TAU) * uv;
    float radius = length(q);
    float angle = atan(q.y, q.x) + twist * radius;
    float field = radius + depth * cos(angle * petals + sin(u_time * 0.18))
                + 0.035 * sin(angle * (11.0 + 2.0 * petals)) - 0.1 * pull + 0.06 * wave;
    float bands = abs(fract(field * density - u_time * 0.035) - 0.5);
    float contour = 1.0 - smoothstep(0.025, 0.095, bands);
    float core = smoothstep(0.72, 0.05, abs(field - 0.52));

int pick = int(floor(seeded(6u) * 4.0));
    vec3 ink = vec3(0.025, 0.03, 0.035), mid = vec3(0.78, 0.19, 0.08), hi = vec3(0.90, 0.85, 0.72);
    if (pick == 1) { ink = vec3(0.01, 0.03, 0.08); mid = vec3(0.04, 0.45, 0.55); hi = vec3(0.86, 0.94, 0.90); }
    if (pick == 2) { ink = vec3(0.08, 0.02, 0.10); mid = vec3(0.92, 0.40, 0.10); hi = vec3(1.00, 0.86, 0.60); }
    if (pick == 3) { ink = vec3(0.02, 0.04, 0.03); mid = vec3(0.16, 0.38, 0.18); hi = vec3(0.80, 0.90, 0.30); }

vec3 color = mix(ink, mid, core * 0.72);
    color = mix(color, hi, contour * (0.35 + 0.65 * core));
    color *= 1.0 - 0.28 * smoothstep(0.65, 1.55, length(uv));
    outColor = vec4(color + dither(gl_FragCoord.xy), 1.0);
}

WebGL2 preview unavailable. The GLSL source remains available on the work page.

Contour Bloom · Seed 9GLSL ES 3.00 · live

Selected works

Ten systems.
Endless seeds.

Each work is an inspectable fragment shader and a family of variations. Point at it, press it, reseed it, change the source, or export a frame, a clip or a seamless loop.

#version 300 es
precision highp float;

// 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;
}

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

float scene(vec3 p) {
    float scale = 5.2 + 2.0 * seeded(1u);
    float wall = 0.03 + 0.02 * seeded(2u);
    vec3 q = p * scale + vec3(0.0, 0.0, u_time * 0.12);
    float gyroid = abs(dot(sin(q), cos(q.zxy))) / scale - wall;
    float shell = max(length(p) - 1.0, gyroid * 0.75);
    return min(shell, length(p) - 0.15);
}

vec3 normalAt(vec3 p) {
    vec2 e = vec2(0.0015, -0.0015);
    return normalize(e.xyy * scene(p + e.xyy) + e.yyx * scene(p + e.yyx) +
                     e.yxy * scene(p + e.yxy) + e.xxx * scene(p + e.xxx));
}

void main() {
    vec2 uv = toField(gl_FragCoord.xy / u_resolution.xy);
    vec2 look = (u_pointer - 0.5) * vec2(1.6, 1.0);
    vec3 ro = vec3(0.0, 0.0, 3.1);
    vec3 rd = normalize(vec3(uv, -2.2));
    mat2 pitch = rot(0.35 + look.y);
    mat2 yaw = rot(u_time * 0.09 + look.x + 6.2831853 * seeded(3u));
    ro.yz *= pitch; rd.yz *= pitch;
    ro.xz *= yaw;   rd.xz *= yaw;

int pick = int(floor(seeded(4u) * 3.0));
    vec3 night = vec3(0.016, 0.02, 0.05), metal = vec3(0.86, 0.72, 0.50), core = vec3(1.0, 0.46, 0.14);
    if (pick == 1) { night = vec3(0.01, 0.035, 0.035); metal = vec3(0.74, 0.80, 0.80); core = vec3(0.20, 0.80, 0.90); }
    if (pick == 2) { night = vec3(0.04, 0.015, 0.04); metal = vec3(0.86, 0.56, 0.46); core = vec3(1.0, 0.32, 0.42); }
    float flare = 1.0 + 2.5 * exp(-2.5 * u_click.z);

vec3 color = night + vec3(0.04, 0.05, 0.11) * (1.0 - 0.5 * length(uv));
    // Only march where the ray crosses the bounding sphere.
    float b = dot(ro, rd);
    float h = b * b - dot(ro, ro) + 1.0;
    if (h > 0.0) {
        float travelled = -b - sqrt(h);
        float exit = -b + sqrt(h);
        float glow = 0.0;
        bool hit = false;
        vec3 p = ro;
        for (int i = 0; i < 96; i++) {
            p = ro + rd * travelled;
            float d = scene(p);
            glow += exp(-3.5 * length(p)) * 0.09;
            if (d < 0.0008) { hit = true; break; }
            travelled += d;
            if (travelled > exit) break;
        }
        if (hit && length(p) < 0.17) {
            color = mix(core, vec3(1.0, 0.95, 0.85), 0.6) * flare;
        } else if (hit) {
            vec3 n = normalAt(p);
            vec3 toCore = -p / max(length(p), 0.001);
            float inner = (0.25 + max(dot(n, toCore), 0.0)) / (1.0 + 5.0 * dot(p, p));
            float key = max(dot(n, normalize(vec3(-0.5, 0.8, 0.6))), 0.0);
            float rim = pow(1.0 - max(dot(n, -rd), 0.0), 3.0);
            float depth = smoothstep(1.05, 0.2, length(p));
            color = metal * (0.06 + 0.42 * key) * (0.3 + 0.7 * (1.0 - depth));
            color += core * inner * 7.0 * flare;
            color += vec3(0.3, 0.36, 0.6) * rim * 0.25;
        }
        color += core * glow * flare;
    }
    color = color / (1.0 + color);
    color = pow(color, vec3(0.85));
    outColor = vec4(color + dither(gl_FragCoord.xy), 1.0);
}

WebGL2 preview unavailable. The GLSL source remains available on the work page.

SF/07

Gyroid Lantern

A minimal surface cut into a sphere and lit from within.

#version 300 es
precision highp float;

// 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);
    float turn = 0.06 * sin(u_time * 0.08);
    mat2 rotation = mat2(cos(turn), -sin(turn), sin(turn), cos(turn));

// c travels a ring that hugs the Mandelbrot boundary. The pointer moves it
    // along an arc chosen by the seed, so every position is a different specimen.
    float arc = 3.2 + (seeded(1u) - 0.5) * 1.2;
    float angle = arc + (u_pointer.x - 0.5) * 2.6 + 0.04 * sin(u_time * 0.1);
    float ring = 0.7885 + (seeded(2u) - 0.5) * 0.025 + (u_pointer.y - 0.5) * 0.02;
    vec2 c = ring * vec2(cos(angle), sin(angle));

vec2 z = rotation * uv * 1.35;
    float smoothIter = 0.0;
    float trap = 10.0;
    float escaped = 0.0;
    for (int i = 0; i < 160; i++) {
        z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
        trap = min(trap, abs(z.y) + 0.4 * abs(z.x - 0.2));
        float m = dot(z, z);
        if (m > 256.0) {
            smoothIter = float(i) + 1.0 - log2(log2(m));
            escaped = 1.0;
            break;
        }
    }

int pick = int(floor(seeded(3u) * 3.0));
    vec3 midnight = vec3(0.012, 0.016, 0.05), copper = vec3(0.78, 0.29, 0.09), quartz = vec3(0.96, 0.86, 0.66);
    if (pick == 1) { midnight = vec3(0.02, 0.01, 0.05); copper = vec3(0.52, 0.22, 0.72); quartz = vec3(0.92, 0.86, 1.0); }
    if (pick == 2) { midnight = vec3(0.005, 0.03, 0.04); copper = vec3(0.10, 0.52, 0.56); quartz = vec3(0.86, 0.98, 0.94); }

float rim = smoothstep(2.0, 42.0, smoothIter);
    float facet = pow(0.5 + 0.5 * cos(smoothIter * 0.42), 5.0);
    vec3 color = mix(midnight, copper, rim) * escaped;
    color = mix(color, quartz, escaped * rim * rim * facet);
    vec3 interior = midnight * 1.6 + copper * 0.85 * exp(-24.0 * trap);
    color += (1.0 - escaped) * interior;
    outColor = vec4(color + dither(gl_FragCoord.xy), 1.0);
}

WebGL2 preview unavailable. The GLSL source remains available on the work page.

SF/05

Night Mineral

A Julia boundary catches light like a fractured specimen.

#version 300 es
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_pointer;          // 0–1, eased
uniform vec3 u_click;            // xy = last press (0–1), z = seconds since that press
uniform float u_pointer_down;    // 1 while pressed
uniform float u_seed;
// Declaring u_state makes this a stateful work: the runtime keeps two
// floating-point buffers and calls main() with u_pass = 0 to advance them,
// then once with u_pass = 1 to draw.
uniform sampler2D u_state;
uniform vec2 u_state_resolution;
uniform int u_pass;
uniform int u_frame;             // simulation steps since the state was reset
out vec4 outColor;

#define STATE_STEPS 12
#define STATE_SCALE 0.5
#define STATE_WARMUP 1400

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;
}

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

vec2 cellAt(ivec2 p) {
    ivec2 size = ivec2(u_state_resolution);
    return texelFetch(u_state, (p + size) % size, 0).xy;
}

vec4 advance() {
    vec2 uv = gl_FragCoord.xy / u_state_resolution;
    float aspect = u_state_resolution.x / u_state_resolution.y;

if (u_frame == 0) {
        // Seed a scatter of catalyst spores.
        float spore = 0.0;
        for (int i = 0; i < 24; i++) {
            vec2 centre = vec2(seeded(uint(10 + 2 * i)), seeded(uint(11 + 2 * i)));
            float radius = 0.015 + 0.03 * seeded(uint(80 + i));
            spore = max(spore, step(length((uv - centre) * vec2(aspect, 1.0)), radius));
        }
        return vec4(1.0, spore, 0.0, 1.0);
    }

// Gray–Scott reaction–diffusion. The seed chooses the regime.
    int regime = int(floor(seeded(1u) * 4.0));
    vec2 rates = vec2(0.0545, 0.062);                 // coral
    if (regime == 1) rates = vec2(0.0367, 0.0649);    // dividing cells
    if (regime == 2) rates = vec2(0.029, 0.057);      // labyrinth
    if (regime == 3) rates = vec2(0.078, 0.061);      // worms
    rates.y += 0.0012 * (uv.y - 0.5);

ivec2 p = ivec2(gl_FragCoord.xy);
    vec2 c = cellAt(p);
    vec2 laplacian = -c
        + 0.20 * (cellAt(p + ivec2(1, 0)) + cellAt(p - ivec2(1, 0)) + cellAt(p + ivec2(0, 1)) + cellAt(p - ivec2(0, 1)))
        + 0.05 * (cellAt(p + ivec2(1, 1)) + cellAt(p + ivec2(-1, 1)) + cellAt(p + ivec2(1, -1)) + cellAt(p - ivec2(1, 1)));
    float a = c.x;
    float b = c.y;
    float reaction = a * b * b;
    a += laplacian.x - reaction + rates.x * (1.0 - a);
    b += 0.5 * laplacian.y + reaction - (rates.y + rates.x) * b;

// Press and drag to write fresh catalyst.
    vec2 toPointer = (uv - u_pointer) * vec2(aspect, 1.0);
    if (u_pointer_down > 0.5 && dot(toPointer, toPointer) < 0.0002) {
        a = 0.5;
        b = 0.25;
    }

// Now and then a spore lands on its own, so the script never quite finishes.
    if (u_frame % 960 == 480) {
        uint k = hashu(uint(u_frame) ^ uint(u_seed));
        vec2 centre = vec2(float(k & 0xffffU), float(k >> 16)) / 65535.0;
        if (length((uv - centre) * vec2(aspect, 1.0)) < 0.025) b = 1.0;
    }
    return vec4(clamp(a, 0.0, 1.0), clamp(b, 0.0, 1.0), 0.0, 1.0);
}

vec3 render() {
    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
    vec2 texel = 1.0 / u_state_resolution;
    float b = texture(u_state, uv).y;
    float bx = texture(u_state, uv + vec2(texel.x, 0.0)).y - texture(u_state, uv - vec2(texel.x, 0.0)).y;
    float by = texture(u_state, uv + vec2(0.0, texel.y)).y - texture(u_state, uv - vec2(0.0, texel.y)).y;
    vec3 normal = normalize(vec3(-6.0 * bx, -6.0 * by, 1.0));
    float light = dot(normal, normalize(vec3(-0.5, 0.6, 0.65)));

int pick = int(floor(seeded(2u) * 3.0));
    vec3 abyss = vec3(0.012, 0.03, 0.06), coral = vec3(0.86, 0.33, 0.22), bone = vec3(0.96, 0.90, 0.80);
    if (pick == 1) { abyss = vec3(0.03, 0.02, 0.02); coral = vec3(0.78, 0.56, 0.24); bone = vec3(0.98, 0.94, 0.82); }
    if (pick == 2) { abyss = vec3(0.01, 0.04, 0.035); coral = vec3(0.16, 0.62, 0.52); bone = vec3(0.88, 0.97, 0.90); }

float body = smoothstep(0.12, 0.32, b);
    vec3 color = mix(abyss * (0.9 + 0.3 * uv.y), coral * (0.55 + 0.6 * light), body);
    color = mix(color, bone, smoothstep(0.30, 0.46, b) * 0.55 * clamp(light, 0.0, 1.0));
    color *= 1.0 - 0.3 * smoothstep(0.55, 1.0, length(uv - 0.5) * 1.4);
    return color;
}

void main() {
    if (u_pass == 0) {
        outColor = advance();
        return;
    }
    outColor = vec4(render() + dither(gl_FragCoord.xy), 1.0);
}

WebGL2 preview unavailable. The GLSL source remains available on the work page.

SF/10

Coral Script

Two simulated chemicals write a slow, branching script.

#version 300 es
precision highp float;

// 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;
}

#define PI 3.14159265359

float grainHash(vec2 p) {
    vec3 q = fract(vec3(p.xyx) * 0.1031);
    q += dot(q, q.yzx + 33.33);
    return fract((q.x + q.y) * q.z);
}

float plate(vec2 p, float n, float m) {
    return cos(n * PI * p.x) * cos(m * PI * p.y) - cos(m * PI * p.x) * cos(n * PI * p.y);
}

vec2 modeFor(float k) {
    float n = 2.0 + mod(k, 5.0);
    return vec2(n, n + 1.0 + mod(k * 2.0 + floor(seeded(1u) * 4.0), 4.0));
}

void main() {
    vec2 uv = toField(gl_FragCoord.xy / u_resolution.xy);
    vec2 p = uv * 0.62;
    float t = u_time * 0.045 + seeded(2u) * 7.0;
    float k = floor(t);
    float morph = smoothstep(0.55, 0.95, fract(t));
    vec2 a = modeFor(k);
    vec2 b = modeFor(k + 1.0);
    float field = mix(plate(p, a.x, a.y), plate(p, b.x, b.y), morph);

// The pointer chooses where the bow sits, and so which overtone joins in.
    vec2 bow = vec2(1.0 + floor(u_pointer.x * 6.0), 0.0);
    bow.y = bow.x + 1.0 + floor(u_pointer.y * 4.0);
    field += 0.22 * plate(p + 0.03 * sin(u_time * 0.3), bow.x, bow.y);

// A press strikes the plate: grains jump, then settle back onto the nodes.
    float strike = exp(-1.3 * u_click.z);
    float restless = max(morph * (1.0 - morph) * 4.0, strike);
    float nodal = exp(-abs(field) * 15.0);
    float grain = grainHash(floor(gl_FragCoord.xy) + floor(u_time * 14.0) * restless * 17.0);
    float sand = step(grain, nodal * (0.92 - 0.55 * restless));
    float dust = step(grain, 0.035 + 0.05 * strike) * 0.35;

vec3 steel = mix(vec3(0.07, 0.075, 0.08), vec3(0.06, 0.07, 0.09), seeded(3u));
    vec3 sheen = vec3(0.19, 0.20, 0.21);
    vec3 bone = mix(vec3(0.93, 0.88, 0.76), vec3(0.95, 0.80, 0.62), seeded(4u));
    float gloss = pow(max(0.0, 1.0 - length(uv - vec2(-0.45, 0.55)) * 0.7), 3.0);
    vec3 color = mix(steel, sheen, gloss);
    color = mix(color, bone, max(sand, dust * (1.0 - nodal)));
    color *= 1.0 - 0.35 * smoothstep(0.8, 1.6, length(uv));
    outColor = vec4(color + dither(gl_FragCoord.xy), 1.0);
}

WebGL2 preview unavailable. The GLSL source remains available on the work page.

SF/08

Chladni Sand

Sand gathers on the still lines of a vibrating plate.

Open instrument

Bring a fragment shader.

Compile GLSL ES 3.00 locally as you type, see compiler errors on the lines that caused them, scrub time, keep state between frames, and export a PNG, a video clip or a seamless GIF loop. Source never leaves the browser.

Open the playground

Rules become light.

Ten systems.Endless seeds.

Gyroid Lantern

Night Mineral

Coral Script

Chladni Sand

Bring a fragment shader.

Ten systems.
Endless seeds.