Back to portfolio

Design Lab.

Small experiments in simulation, search, light and rendering. Everything here runs live in your browser, so go ahead and touch it.

Metaballs.

Liquid blobs that drift, merge and pull apart. There are no meshes or models: every pixel is computed from a formula describing the shapes.

How it works

Each blob is a sphere described by a signed distance function, which gives the distance from any point to its surface. A smooth minimum blends nearby spheres so they melt into one another instead of overlapping. For every pixel, a ray steps forward by that distance until it touches the surface (raymarching), and the surface normal drives the lighting. Rays that pass just beside a blob are blended into the background, which keeps the edges smooth.

A* versus Dijkstra.

Two pathfinding algorithms race through the same maze. Both find the shortest route; watch how much of the maze each one has to explore to get there.

How it works

Both algorithms always expand the cheapest cell next. Dijkstra only knows how far it has come, so its wavefront spreads evenly in every direction. A* adds an estimate of the distance left (the Manhattan distance, the same heuristic from my 8-puzzle work), so its wavefront leans toward the goal. Colour shows distance from the start, the dots are the frontier still waiting to be explored, and the counters show how many cells each has expanded so far.

Black hole.

Hot gas streaming round a black hole, inspired by Gargantua in Interstellar. Gravity bends the light so strongly that you see the far side of the disc arching over the top, and the stars behind smear into rings.

How it works

Every pixel is a ray of light traced backwards from the camera and bent toward the hole at each step, following a Schwarzschild black hole. Rays that fall in stay black: that is the shadow. The disc is a thick volume of gas, its swirls made by domain warping (noise fed through noise), glowing hotter near the centre and brighter on the side spinning toward you (Doppler beaming, toned down as in Interstellar). Inner gas orbits faster, so the streaks shear into rings. Rays that escape sample the stars, so stars behind the hole appear around its edge. More on how it works.

Water ripples.

A pool you can touch. Ripples spread, bounce off the edges and interfere, bending the tiles and light beneath them.

How it works

Each pixel stores the water's height now and a moment ago. The next height is the average of its four neighbours, times two, minus the previous height: a discrete form of the wave equation, with slight damping so waves fade. The surface slope bends the image underneath (refraction), and where the surface curves, light concentrates into bright caustics.

That's the lab, for now.

Every experiment here is plain JavaScript and GLSL, with no libraries.

How I built the site See my projects Get in touch