SF/02 · Seed 2

Tidal Cell

Drifting cells gather and separate under a slow tide.

A Voronoi field measured to its exact borders uses time as a current, not a clock: each cell follows a related but distinct orbit. The seed sets scale, pace and palette.

Palette · Cobalt / cyan / chalk
Interaction · Pointer magnifies the cells beneath it · press to raise a swell
Runtime · WebGL2 / fragment shader

Seed 2

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

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

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.