SF/01 · Seed 9

Contour Bloom

A radial field folded into thin mineral contours.

Rings of equal distance are rotated, petalled and shaded by their distance from a moving boundary. The seed sets petal count, twist, density and palette.

Palette · Bone / vermilion / ink
Interaction · Pointer presses a dimple into the field · press to send a ripple
Runtime · WebGL2 / fragment shader

Seed 9

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

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

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.