Caustic09
Nothing here is solid.
Including the light.
A real wave field. A little optical mischief. Move through it, then take a frame home.
HTML + CSS + JS / NO DEPENDENCIESUnder the surface. The idea, the maths & the source ↙
A surface remembers
where you have been.
Two floating-point textures exchange height and velocity. Each point feels its four neighbours; your pointer adds an impulse. The resulting height gradient bends the poster underneath it. Red, green, and blue sample slightly different positions to imitate dispersion. Procedural highlights suggest concentrated light; this is an artistic optical model, not a ray-traced fluid solver.
Download the complete working source ↓laplacian = left + right + above + below - 4 * height;
velocity = (velocity + laplacian * 0.24) * damping;
height += velocity;
normal = gradient(height);
refractedUV = uv + normal * refraction;
colour = sampleRGB(poster, refractedUV, dispersion);
The ZIP includes this exact live experiment: HTML, CSS, JavaScript, both shaders, shared runtime, a README and MIT licence. Unzip, open caustic/index.html, and play. No account, CDN, install or build step.