SF/08 · Seed 4

Chladni Sand

Sand gathers on the still lines of a vibrating plate.

Standing-wave modes of a square plate are crossfaded; grains settle where the displacement vanishes and scatter while the mode changes. The seed sets the sequence of modes.

Palette · Steel / bone
Interaction · Pointer chooses the bowing overtone · press to strike the plate
Runtime · WebGL2 / fragment shader

Seed 4

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

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.