Discover More Oddities at Odd.Place → ×

Ring Lattice

A living pattern field. Rings, dots and diamonds grow out of random noise, sort themselves into crystals, collide along seams, and heal when you tear them.

What you are looking at

Underneath the drawing is a single smooth surface, a height that varies across the square, like a sheet of rubber with bumps pushed up from below. Nothing on the screen is drawn directly. The rings are contour lines, the same lines a topographic map uses to show hills. A tall bump crosses two contour levels and shows up as a ring with a dot in the middle. A shorter bump crosses only one and shows up as a dot. Where the bumps lean into each other they fuse into figure-eights and, in some regions, the hills invert into a checkerboard of diamond-shaped hollows.

The surface is never still. Each moment it is nudged by a rule that rewards bumps of two particular sizes and punishes everything else. From pure static, the surface discovers that the cheapest way to satisfy the rule is a square crystal of bumps, and it builds one. Different corners of the square start crystals at different angles and offsets, so you get grains that meet along seams. The seams slowly migrate as one crystal eats another.

A short history of patterns that make themselves

In 1900 the French physicist Henri Bénard heated a thin layer of oil from below and watched it organize itself into a honeycomb of convection cells. Lord Rayleigh worked out the theory in 1916: a uniform layer becomes unstable at a particular wavelength, and that wavelength sets the size of the cells. That idea, that a featureless system can choose a length scale for itself, runs under everything on this page.

In 1952 Alan Turing published The Chemical Basis of Morphogenesis, showing that two chemicals that react and diffuse at different rates can spontaneously form spots and stripes. Turing patterns are now used to explain the markings on fish, the spacing of hair follicles, and the ridges on the roof of a mouse's mouth. Anyone who has looked closely at a reef fish has seen one.

In 1977 Jack Swift and Pierre Hohenberg distilled convection into a compact equation that has become the workhorse of pattern formation. It has one preferred wavelength, and depending on a couple of knobs it produces stripes, hexagons or labyrinths. In 1993 Edwards and Fauve shook a dish of fluid at two frequencies at once and saw something stranger: squares, and twelve-fold quasipatterns that never repeat. In 1997 Ron Lifshitz and Dean Petrich showed that you can capture that behavior by giving the Swift–Hohenberg equation two preferred wavelengths instead of one. When those two wavelengths stand in a ratio of √2, the side and the diagonal of a square, the system favors square crystals and superlattices of big and small spots. That is the engine of Ring Lattice.

Cellular automata, and why this is not quite one

Cellular automata go back to John von Neumann and Stanislaw Ulam in the 1940s: a grid of cells, each updated from its neighbors by a fixed rule. John Conway's Game of Life, popularized by Martin Gardner in 1970, made them famous. Later work widened the neighborhoods (Kellie Evans' "Larger than Life"), made the states continuous (Bert Chan's Lenia, 2019), and stacked several ring-shaped neighborhoods together (the multiple-neighborhood automata that circulate in generative-art communities). The animation that inspired this page came from that world.

Ring Lattice takes the same spirit, every point updated from its surroundings, again and again, but uses a smooth continuous field and the physics of two-wavelength pattern formation. That is why its lines are so clean: they are contours of a smooth surface rather than edges of blocky cells.

How it works

The height u evolves under a two-mode Swift–Hohenberg equation:

• Drive (r) sets how strongly the flat state is unstable. Higher values give taller, sharper bumps.
• The bracketed operator is zero at two wavelengths, 1 and ρ. Those are the only sizes that are allowed to grow. Second mode strength (m) fades between a single wavelength (ordinary Swift–Hohenberg, which favors stripes and hexagons) and two (which favors squares).
• Spot bias (g) breaks the symmetry between hills and valleys, so the field prefers isolated spots over stripes.
• Saturation (c) stops the bumps from growing forever.

Everything runs on your graphics card through WebGPU. Each time step applies the nonlinear terms point by point, then transforms the whole field into frequencies with a fast Fourier transform. In frequency space the stiff derivative operator becomes a simple multiplication, so it can be solved implicitly and stays stable even with large steps. Then the field is transformed back. On a 512 × 512 grid that is several hundred thousand points, many times a frame.

The drawing pass upsamples the field with smooth bicubic interpolation and draws anti-aliased bands wherever the height crosses one of the contour levels. The walls hold the edge of the field at a fixed height, which is why ripples line up parallel to the border, just as waves line up against a seawall.

Your finger or mouse doesn't paint. It creates a small current centered on the pointer, flowing inward, outward or around, and the pattern is carried along by it. The pattern's own rule keeps trying to restore its crystal, so what you see is a tug-of-war between your current and the field's preference for order. When you let go, the scar slowly heals.

Save SVG traces each contour level directly from the field with marching squares and writes them as true vector paths, ready for a plotter, a laser cutter or large-format print.

Things to try

• Set Agitation around 0.3 to keep domains churning, much like the animation that started all this.
• Move the second wavelength ratio to 1.932, which is 2 × cos 15°. Squares give way to twelve-fold quasicrystals.
• Set Second mode strength to 0 and Spot bias to 0 for the classic fingerprint labyrinth.
• Hold Swirl in one place, then let go and watch the lattice heal around the wound.
• Raise Wall height for concentric ripples that march in from the border.

Hearing it

Press the speaker button and the pattern makes its own sound. About thirty times a second the graphics card samples the field, and every ring is found and tracked from one moment to the next, so the sound is made of what the rings are actually doing.

• Moving rings sing. A still crystal is quiet. Stir it and the rings that move get voices, louder and brighter the faster they go, pitched by their height on screen, panned by their position, bending up or down with their direction.
• Births and merges are events. A ring condensing out of the noise chimes where it appears; two rings fusing, or one being swallowed, knocks. Defects on the move crackle. Watch a fresh run crystallize and you hear a shower of chimes settle into calm.
• Harmony follows order. The drone's chord is measured from the spacing between neighbouring rings: perfectly in tune when the lattice is regular, drifting out of tune when it's disordered, and lower when the rings are bigger.
• Your finger plays the field itself. The circle of heights around your finger is used as the shape of a sound wave, a technique called scanned synthesis, so a ring under your finger sounds round and hollow and a seam sounds buzzy.
• Every finger counts. On a touch screen up to ten fingers stir the pattern at once, and each finger gets its own voice from the field beneath it.
• Strings. Guitar and harp are plucked with the Karplus-Strong method: a burst of noise circulates in a string-length delay that softens it on every pass, so it rings at the string's pitch. With them chosen, each moving ring plucks its string as it travels. Violin and cello keep "bowing" the same kind of string, with vibrato and a body resonance, and the moving rings are bowed continuously.
• Choose the voices. The voice under your fingers can be the field itself or a choir whose vowel opens from "oo" to "ah" as your finger crosses a ring, a solo voice, flute, violin, cello, trumpet, clarinet or theremin. The drone can be a synth pad, organ, choir, string section, didgeridoo (its mouth "wah" quickens when the pattern is stirred), tanpura, bagpipe drones or singing bowls.
• Play a melody. Load MIDI files, or try the built-in Ode to Joy and Greensleeves, and every note becomes a simulated finger: higher notes touch higher up, stir the pattern with your chosen pointer mode, and sing with your chosen voice.
• You can see what you hear. Sounding rings glow: pale for moving and newborn rings, warm for merges.

The Music box mode is the alternative: a playhead sweeps the screen and plays each bump it passes, like a music-box cylinder. Everything is synthesized live in your browser, and recorded clips carry the sound with them.

Sharing your creation

Share your creation makes a 1200 × 630 picture of what's on screen and, if you like, a clip of up to 15 seconds: vertical for Reels and Stories, landscape, or square. While it records, the screen shows the exact frame being filmed and you can keep playing with the pattern. Both are posted to a page of their own on rings.odd.place, with a button that opens Ring Lattice with your exact settings. A Facebook post shows the picture; the clip plays when people open the page. To post the clip itself as a Facebook video, download it from the share window and upload it to Facebook.

Privacy

Everything runs in your browser. The site keeps simple daily counts, such as visits, shares and which buttons get used, with no cookies and no IP addresses stored. Shared pictures and clips are public at their link, and anyone can report one that shouldn't be there.

Credits

Pattern physics after Swift & Hohenberg (1977) and Lifshitz & Petrich (1997). Inspired by a cellular-automaton animation shared in the generative-art community.

Discover More Oddities at Odd.Place →