Catalogue 2026

Live works

Ten fragment shaders built from distance fields, iterative systems, noise, interference, sphere tracing and reaction–diffusion.

Every preview below is rendered on your device and moves while it is on screen. Open a work to reseed it, play it with the pointer, or inspect and change its complete source.

#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.

SF/01

Contour Bloom

A radial field folded into thin mineral contours.

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

vec2 cellPoint(vec2 cell) {
    uvec2 c = uvec2(ivec2(cell) + 4096);
    uint h = hashu(c.x * 0x8da6b343U ^ c.y * 0xd8163841U ^ uint(u_seed) * 0xcb1ab31fU);
    return vec2(float(h & 0xffffU), float(h >> 16)) / 65535.0;
}

void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
    vec2 aspect = vec2(u_resolution.x / u_resolution.y, 1.0);
    float scale = 4.0 + 2.5 * seeded(1u);
    float pace = 0.18 * (0.7 + 0.6 * seeded(2u));
    vec2 p = (uv - 0.5) * aspect * scale;

// Cells swell under the pointer like water under a lens.
    vec2 lens = (u_pointer - 0.5) * aspect * scale;
    vec2 away = p - lens;
    p = lens + away * (1.0 - 0.38 * exp(-0.35 * dot(away, away)));
    p.x += 0.2 * sin(p.y * 0.7 + u_time * 0.22);

// Exact distance to the cell borders: find the nearest point, then measure
    // to the bisector with each neighbour (avoids the smears of F2 - F1).
    vec2 cell = floor(p);
    vec2 local = fract(p);
    vec2 nearestCell = vec2(0.0);
    vec2 toNearest = vec2(0.0);
    float nearest = 10.0;
    for (int y = -1; y <= 1; y++) {
        for (int x = -1; x <= 1; x++) {
            vec2 offset = vec2(float(x), float(y));
            vec2 point = 0.5 + 0.4 * sin(u_time * pace + 6.2831853 * cellPoint(cell + offset));
            vec2 r = offset + point - local;
            float d = dot(r, r);
            if (d < nearest) {
                nearest = d;
                toNearest = r;
                nearestCell = offset;
            }
        }
    }
    float edge = 10.0;
    for (int y = -2; y <= 2; y++) {
        for (int x = -2; x <= 2; x++) {
            vec2 offset = nearestCell + vec2(float(x), float(y));
            vec2 point = 0.5 + 0.4 * sin(u_time * pace + 6.2831853 * cellPoint(cell + offset));
            vec2 r = offset + point - local;
            vec2 between = r - toNearest;
            if (dot(between, between) > 1e-5) {
                edge = min(edge, dot(0.5 * (toNearest + r), normalize(between)));
            }
        }
    }
    nearest = sqrt(nearest);

vec2 press = (u_click.xy - 0.5) * aspect * scale;
    float age = u_click.z;
    float swell = exp(-1.2 * age) * exp(-pow((length(p - press) - 2.4 * age) * 2.2, 2.0));

float line = 1.0 - smoothstep(0.012, 0.06 + 0.05 * swell, edge);
    float glow = exp(-4.8 * nearest);

int pick = int(floor(seeded(3u) * 3.0));
    vec3 deep = vec3(0.018, 0.045, 0.12), tide = vec3(0.02, 0.47, 0.58), chalk = vec3(0.83, 0.93, 0.88);
    if (pick == 1) { deep = vec3(0.05, 0.02, 0.09); tide = vec3(0.42, 0.18, 0.62); chalk = vec3(0.93, 0.86, 0.96); }
    if (pick == 2) { deep = vec3(0.01, 0.06, 0.05); tide = vec3(0.06, 0.52, 0.38); chalk = vec3(0.90, 0.95, 0.80); }

vec3 color = mix(deep, tide, glow);
    color = mix(color, chalk, min(1.0, line * 0.82 + swell * 0.4));
    color *= 0.78 + 0.22 * sin((uv.y + uv.x) * 4.0 + u_time * 0.12);
    outColor = vec4(color + dither(gl_FragCoord.xy), 1.0);
}

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

SF/02

Tidal Cell

Drifting cells gather and separate under a slow tide.

#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);
    vec2 pointer = toField(u_pointer);
    // The aperture leans toward the pointer and opens as it rises.
    vec2 q = uv - 0.12 * pointer;
    float folds = 4.0 + floor(seeded(1u) * 6.0);
    float rayCount = 12.0 + 2.0 * floor(seeded(2u) * 7.0);
    float spiral = 2.0 + 1.4 * seeded(3u);
    float spin = seeded(4u) < 0.5 ? -0.055 : 0.055;

float radius = length(q) + 0.0001;
    float angle = atan(q.y, q.x) + u_time * spin;
    float crease = abs(sin(angle * folds + log(radius) * spiral));
    float opening = 0.54 + 0.1 * (u_pointer.y - 0.5);
    float aperture = abs(radius - opening - 0.16 * crease);
    float rim = 1.0 - smoothstep(0.018, 0.09, aperture);
    float rays = pow(0.5 + 0.5 * cos(angle * rayCount - radius * 14.0), 7.0);
    float flare = 1.0 + 2.2 * exp(-2.5 * u_click.z);
    float halo = exp(-3.2 * radius / flare) * (0.55 + 0.45 * crease);

int pick = int(floor(seeded(5u) * 3.0));
    vec3 shade = vec3(0.10, 0.025, 0.16), ember = vec3(0.92, 0.24, 0.06), cream = vec3(1.0, 0.83, 0.54);
    if (pick == 1) { shade = vec3(0.01, 0.07, 0.09); ember = vec3(0.86, 0.58, 0.12); cream = vec3(0.98, 0.95, 0.80); }
    if (pick == 2) { shade = vec3(0.04, 0.03, 0.08); ember = vec3(0.86, 0.22, 0.38); cream = vec3(0.96, 0.88, 0.92); }

vec3 color = mix(shade, ember, min(1.0, halo + rays * 0.3));
    color = mix(color, cream, rim * (0.55 + 0.45 * rays));
    color *= 1.0 - 0.45 * smoothstep(0.85, 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.

SF/03

Radiant Fold

Polar light is creased into a slowly turning aperture.

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

float lattice(vec2 cell) {
    uvec2 c = uvec2(ivec2(cell) + 32768);
    return float(hashu(c.x * 0x8da6b343U ^ hashu(c.y ^ uint(u_seed) * 0x9e3779b9U))) / 4294967295.0;
}

float noise2d(vec2 p) {
    vec2 i = floor(p), f = fract(p);
    f = f * f * (3.0 - 2.0 * f);
    return mix(mix(lattice(i), lattice(i + vec2(1.0, 0.0)), f.x),
               mix(lattice(i + vec2(0.0, 1.0)), lattice(i + 1.0), f.x), f.y);
}

float fbm(vec2 p) {
    float value = 0.0;
    float weight = 0.52;
    mat2 turn = mat2(0.80, -0.60, 0.60, 0.80);
    for (int i = 0; i < 5; i++) {
        value += weight * noise2d(p);
        p = turn * p * 2.03 + 7.1;
        weight *= 0.5;
    }
    return value;
}

void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
    vec2 aspect = vec2(u_resolution.x / u_resolution.y, 1.0);
    float scale = 2.6 + 1.2 * seeded(1u);
    vec2 p = (uv - 0.5) * aspect * scale;

// The pointer is a stone in the current: the flow parts around it.
    vec2 away = p - (u_pointer - 0.5) * aspect * scale;
    p += away * 0.35 * exp(-1.6 * dot(away, away));

float drift = u_time * 0.035;
    vec2 warp = vec2(fbm(p + drift), fbm(p + vec2(4.1, 1.7) - drift));
    float field = fbm(p + (1.3 + 0.8 * seeded(2u)) * warp + 10.0 * seeded(3u));
    vec2 press = (u_click.xy - 0.5) * aspect * scale;
    float age = u_click.z;
    field += 0.05 * exp(-age) * sin(length(p - press) * 9.0 - age * 6.0) * exp(-0.5 * dot(p - press, p - press));

// Relief lighting from screen-space slope; contours keep a constant pixel width.
    float slope = fwidth(field);
    vec2 gradient = vec2(dFdx(field), dFdy(field)) * u_resolution.y;
    vec3 normal = normalize(vec3(-0.12 * gradient, 1.0));
    float light = clamp(dot(normal, normalize(vec3(-0.45, 0.6, 0.66))), 0.0, 1.0);

vec3 abyss = vec3(0.010, 0.035, 0.045);
    vec3 deep = vec3(0.018, 0.11, 0.12);
    vec3 teal = vec3(0.05, 0.40, 0.37);
    vec3 shoal = vec3(0.38, 0.60, 0.50);
    vec3 salt = vec3(0.90, 0.88, 0.76);
    vec3 color = mix(abyss, deep, smoothstep(0.26, 0.42, field));
    color = mix(color, teal, smoothstep(0.44, 0.58, field));
    color = mix(color, shoal, smoothstep(0.62, 0.74, field));
    color *= 0.8 + 0.45 * light;

float isobath = abs(fract(field * 16.0) - 0.5) / max(slope * 16.0, 1e-4);
    float lines = (1.0 - smoothstep(0.6, 1.4, isobath)) * smoothstep(0.42, 0.55, field);
    float foam = 1.0 - smoothstep(slope * 0.8, slope * 2.6, abs(field - 0.6));
    color = mix(color, salt, max(lines * 0.16, foam * 0.85));
    color *= 1.0 - 0.3 * smoothstep(0.55, 1.0, length((uv - 0.5) * aspect));
    outColor = vec4(color + dither(gl_FragCoord.xy), 1.0);
}

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

SF/04

Salt Current

Layered noise resolves into channels, shoals, and foam.

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

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

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

SF/06

Phase Garden

Interference bands open and close like nocturnal leaves.

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

#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.

#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

void main() {
    vec2 uv = toField(gl_FragCoord.xy / u_resolution.xy);
    float symmetry = 5.0 + floor(seeded(1u) * 5.0);
    float density = 12.0 + 6.0 * seeded(2u) + 6.0 * u_pointer.y;
    float t = u_time * 0.35;
    // A press sends a phase front outward through the lattice.
    float age = u_click.z;
    float front = exp(-age) * exp(-pow((length(uv - toField(u_click.xy)) - 0.9 * age) * 6.0, 2.0));
    float field = 0.0;
    for (int i = 0; i < 9; i++) {
        if (float(i) >= symmetry) break;
        float a = float(i) * PI / symmetry + 0.25 * (u_pointer.x - 0.5);
        field += cos(dot(uv, vec2(cos(a), sin(a))) * density + t + 2.0 * front);
    }
    field /= symmetry;
    float bands = abs(fract(field * 3.0 + 0.5) - 0.5);
    float ink = 1.0 - smoothstep(0.04, 0.12, bands);
    float bloom = smoothstep(0.15, 0.9, field);

int pick = int(floor(seeded(3u) * 3.0));
    vec3 paper = vec3(0.94, 0.92, 0.86), indigo = vec3(0.07, 0.09, 0.22), signal = vec3(0.89, 0.25, 0.11);
    if (pick == 1) { paper = vec3(0.03, 0.04, 0.06); indigo = vec3(0.86, 0.80, 0.62); signal = vec3(0.10, 0.62, 0.70); }
    if (pick == 2) { paper = vec3(0.90, 0.93, 0.90); indigo = vec3(0.05, 0.20, 0.16); signal = vec3(0.96, 0.66, 0.10); }

vec3 color = mix(paper, indigo, ink * 0.92);
    color = mix(color, signal, bloom * (1.0 - ink) * 0.85);
    color *= 1.0 - 0.18 * smoothstep(0.9, 1.7, length(uv));
    outColor = vec4(color + dither(gl_FragCoord.xy), 1.0);
}

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

SF/09

Sevenfold

Plane waves overlap into a pattern that never repeats.

#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.