← All articles

No. 01

The ink on this site

The plate on our home page is not a video. It is marbling maths: every drop moves every ring already on the bath, and no two rings ever cross.

Alex Colls Outumuro

Co-founder and CTO · · 3 min read

Print 01, Suminagashi. Drops and combs on a bath, pulled when the site is built.Point at it to drop ink.

On the home page of this site there is a round plate of marbled ink. It is drawn when the page loads, and then it is yours: tap to drop ink, drag to comb it. It is not a video and it does not loop. It runs, in your browser, the maths a marbling bath follows.

A drop moves everything

In suminagashi, the Japanese way of marbling, you touch a brush to still water and the ink spreads into a ring. The next drop, in the same place, pushes the first ring outwards. Clear water dropped in between leaves the pale bands.

The maths comes from a 2012 paper, Mathematical Marbling, by Aubrey Jaffer and colleagues. A drop of radius r that lands at c moves every point p of every ring already on the bath:

p′ = c + (p − c) · √(1 + r² / |p − c|²)

Two things follow from that one line, and they are why the plate looks right. The ink keeps its area, and no two rings ever cross, however many drops come after.

No two rings ever cross, however many drops come after.

Combs and styluses

A stylus drawn along a line shifts every point along it by z·λ/(d + λ), where d is the point’s distance from the line. The ink right under the stylus travels the whole way, and the pull fades with distance. A comb of waves slides every point by a sine of where it sits across the comb. Those are the moves of the score that draws the plate on load, and the moves your pointer makes when you drag.

Keeping the rings honest

Each ring is a closed polygon, drawn oldest first. When a drop stretches a ring, gaps open between its points, so a point is added wherever a side grows longer than 9 units of a 1,000-unit bath, and points are merged where the ring is squeezed. Rings that end up off the plate, or under a ring that covers all of it, are forgotten. Without that, the bath would only get heavier with every drop.

The score draws from a small seeded random generator, so the plate comes out the same on every load. With reduced motion, the plate is worked out of sight and shown once, finished. Without JavaScript, you get a few still rings.

The drop from your pointer

Elsewhere on the site, a thin ring round your pointer counts down five seconds, then a drop falls. That ink follows a different model. It is not a bath but a sheet of paper drinking the drop: invasion percolation on a noise field, not a fluid simulation. The water runs ahead along the fibres, the pigment follows less far, and the mark feathers into hairs, then dries with a tide line where the water stopped.

The prints on this blog

Every article on this blog has a print pulled from the same bath. A short score of drops and combs runs when the site is built, the rings are clipped to the sheet and written out as SVG, and the page ships them as plain drawings. This one is suminagashi: rings, left as the drops made them, and one stroke across.

Alex