Experiments

Lab

Fluid Simulation

Hand-written Navier-Stokes solver: ping-pong FBO, vorticity confinement, Jacobi pressure iterations — drag to inject velocity & dye.

The full fluid pipeline is hand-written. No off-the-shelf fluid library.

WebGL2 · GLSL · 0 deps

Blue and violet dye curling and diffusing through a velocity field on a dark canvas.Blue and violet dye curling and diffusing through a velocity field on a dark canvas.

Physics Sandbox

Verlet integration + spatial hash collision: click to spawn balls, drag to throw, gravity toggle, elastic collisions.

The integrator and broad-phase collision are hand-written. No physics engine.

Canvas 2D · Verlet · 0 deps

Five colored balls resting against the sandbox floor.Five colored balls resting against the sandbox floor.

Flow Field Particles

Curl noise divergence-free flow: 2500 particles with long trails, mouse attract/repel toggle.

The curl-noise field and trail integration are hand-written. No particle library.

Canvas 2D · Curl Noise · 0 deps

Blue particles tracing curved flow lines with continuous trails.Blue particles tracing curved flow lines with continuous trails.

Particle System

Real-time particle simulation: thousands of particles with mouse repulsion and 3D drift, all on the GPU.

The GPU update step and mouse repulsion are hand-written. No Three.js.

WebGL · GLSL · 0 deps

Blue, violet and white particles distributed on a dark canvas.Blue, violet and white particles distributed on a dark canvas.

3D Morph

Parametric surface per-point morph: sphere→torus→cube→wave, drag to rotate, auto-cycle.

The parametric surface and per-vertex morph are hand-written. No model files.

WebGL · ogl · 0 deps

Blue-violet particles forming an undulating parametric surface.Blue-violet particles forming an undulating parametric surface.

Shader Mixer

Live GLSL noise art: drag sliders to tune hue, flow speed and turbulence octaves — every frame computed in real time.

The FBM noise fragment shader and uniform binding are hand-written.

WebGL · FBM Noise · 0 deps

Violet and pink noise patterns forming curling streams.Violet and pink noise patterns forming curling streams.

SDF Raymarching

Combine and subtract sphere, box and torus distance fields, then adjust shape, lighting and material to explore soft shadows and reflections.

Distance functions, ray marching, normal estimation, soft shadows and a single reflection bounce are implemented directly in GLSL, without a 3D engine.

WebGL2 · GLSL · SDF

A smooth union of sphere and box in a studio cove, sitting on the floor with contact shadows and reflections.A smooth union of sphere and box in a studio cove, sitting on the floor with contact shadows and reflections.

Cloud Sea Train

A steam train on a suspension bridge in a sunset sea of clouds. Layered height-field clouds and vector-rasterized train and bridge, with live controls for framing, speed, and cloud relief.

The fragment shader follows mdb's Up in the Cloud Sea and Tianxiu Zhou's WebGL port: blue-noise sampling, layered FBM height fields, and vector-to-raster train and bridge. Parameter binding and the page integration are local.

WebGL2 · GLSL · Blue noise

A suspension bridge sits in the lower middle of stacked orange-red clouds, with steam rising from a locomotive.A suspension bridge sits in the lower middle of stacked orange-red clouds, with steam rising from a locomotive.

Tearable Cloth

Drag, cut or pin cloth nodes, adjust wind and toggle a circular obstacle to see how mesh constraints hold the fabric together.

Verlet integration, XPBD distance constraints, cutting and obstacle collision are implemented in local algorithms, with simulation running in a Web Worker.

Canvas 2D · XPBD · Web Worker

A pinned cloth mesh above a spherical obstacle.A pinned cloth mesh above a spherical obstacle.

Voronoi / Delaunay

Add, move or remove sample points to see Voronoi regions and the Delaunay triangulation update with the point set.

Bowyer–Watson triangulation and equidistant half-plane clipping are implemented directly to generate the triangle mesh and bounded Voronoi regions.

SVG · Bowyer–Watson · Half-plane clipping

Voronoi regions and a Delaunay triangulation of sample points.Voronoi regions and a Delaunay triangulation of sample points.