Moiré Interference

About this piece

Two fields of straight parallel lines, identical in every way, are laid one over the other and turned in opposite directions by a fraction of a degree. Nothing else happens on this plate. No shading is painted, no gradient, no blur: the whole picture is 510 straight strokes of one width in one of two flat inks, and the broad soft bands you can see rolling through it are not drawn at all. They are what is left over.

The mechanism is easier to feel than to describe. Where the two sets of lines happen to fall into step, each line of the second grid hides behind a line of the first, and the frame is left as bare as a single grid would leave it. A little further along, the two sets have drifted half a pitch out of step, the lines interleave, and twice as much of the frame is covered in ink. Between those two states the covering is somewhere in between. That alternation — light band, dark band, light band — is the moiré, and it is a property of the pair. Neither grid contains it.

The name is a textile word before it is an optical one. French moire is watered silk, a fabric given its shimmer by pressing two ribbed layers together under a roller so that their ribs beat against each other; the pattern was on bolts of cloth for centuries before anybody wrote down the arithmetic. This plate does exactly what the roller does, on a grid of 4.2-pixel lines.

At the size this page draws it — a stage about 908×511 — each grid holds 255 lines spaced 4.2 pixels apart, each stroke 1.76 pixels wide. The two are never as much as four degrees apart, and at the loosest they are one and a half. That small angle is not a stylistic choice: it is the only place large soft bands live, and the section below explains why.

One equation does all the work

Two gratings of pitch p crossed at a relative angle α produce fringes whose spacing is

D = p ÷ (2 sin(α ÷ 2))

and the fringes run perpendicular to the bisector of the two line directions — roughly crosswise to the lines themselves, which is why the bands on this plate always cut across the grain rather than along it. Put numbers in it. At p = 4.2 pixels and α = 2°, D comes out at 120 pixels: a structure whose finest feature is four pixels across is producing a band you could measure with a ruler. The ratio D ÷ p is 1 ÷ (2 sin(α ÷ 2)), which at one degree of half-angle is 28.6×. Halve the angle and the bands get twice as wide.

That magnification is the whole reason moiré is worth caring about, and it also explains the constraint this plate works under. Push α up to 90° and D collapses to 0.7 p — the two grids are now a fine square mesh with no large-scale banding whatever. Push it to zero and D runs off to infinity: the grids coincide and you are looking at one plain grating. Large soft bands exist only in a narrow window of small angles, so the animation keeps its half-angle inside 0.45° to 3.4° across every size it is drawn at, and swings back and forth rather than rotating one way for ever.

There is a second piece of exact arithmetic here, and it is the reason no shading is needed. Call the fraction of the frame one grid inks its duty; on this plate that is 0.42. Where the grids coincide the union of the two is still 0.42. Where they are half a pitch apart the union is 2 × 0.42 = 0.84. So the local ink coverage swings by exactly a factor of two between a light fringe and a dark one — for any duty at or below one half, at every size, with no gradient painted anywhere on the canvas. The contrast you see is a counting fact, not a paint choice.

Why moiré is an instrument, not just an effect

The 28.6× above is a free amplifier for small displacements, and industry has been using it for a long time. Lord Rayleigh, writing about diffraction gratings in 1874, pointed out that laying one ruled grating over another turns a ruling error far too small to see into a visible kink in the fringes — moiré as a measuring instrument rather than an ornament. The same idea is still in machine tools: a moiré fringe encoder reads a scale grating through a fixed index grating, and a photocell counts one fringe passing for each pitch of relative travel, so a coarse ruling you can manufacture cheaply yields a fine measurement. Strain gauges built the same way turn a specimen’s stretch into fringes; the alignment marks in a photolithography stepper use gratings on the wafer and the mask so that a misregistration of nanometres shows up as a fringe shift of micrometres.

You also meet it as a nuisance, which is the same physics with the sign flipped. Colour printing overlays four halftone screens, and if two of them share an angle their dots beat into ugly blotches — hence the standard practice of separating them, black at 45°, magenta at 75°, cyan at 105°, yellow at 90°, so that the residual pattern is a tight symmetric rosette rather than a slow band. Photograph a screen with a phone and the sensor’s pixel grid beats against the display’s: moiré. A finely striped shirt on television shimmers for the same reason. So does the false banding in a scanned newspaper photograph.

And the most consequential case of all is one people rarely name as moiré: aliasing is moiré against the sampling grid. When a signal carries detail finer than the sampling raster can hold, the raster and the detail beat, and the beat is a low-frequency pattern that was never in the original. That is precisely why this plate refuses to let its own pitch fall below 3.5 CSS pixels no matter how small the frame gets. Below that the grating stops beating against its twin and starts beating against the screen, and what you see is your monitor’s artefact rather than the artwork’s.

Reading the plate: three motions

Nothing on this plate moves quickly, and three separate motions are running at once. Watching for them individually is most of the pleasure in it.

• The counter-rotation — the two grids turn against each other, at most 0.0022 degrees per frame each at this page’s stage size. At that rate the half-angle takes twelve seconds to cross its whole one-degree range, and on its own the turning would be invisible. Multiplied by the magnification above, it is what makes the bands widen and tighten: they run from roughly 3.2 fringes across the short side of the frame at the loosest to 7.5 at the tightest, and back, once every 24 seconds.
• The slide — each grid also creeps along its own normal, in opposite directions. That does not change the band spacing at all, only where the bands sit, so it shows up as a steady drift of about 32 pixels a second across the stage. Eight whole fringes pass per swing. This is the motion that keeps the piece alive at the two instants each cycle when the counter-rotation reverses.
• The roll — the axis the pair is counter-rotated about turns slowly too, 0.042 degrees a frame, carrying the lines and their bands right around the frame. A grating rotated 180° about its own centre is the same grating, so a half-turn is a full lap; that takes 72 seconds, and it is the period of the entire composition. Frame f and frame f + 4,320 are pixel-identical, so this loop closes exactly rather than being hidden behind a cross-fade.

Two things are worth watching for specifically. The first is that a band moves faster than anything drawn. Follow a single line with your eye and it barely creeps; follow a band edge and it crosses the short side of the frame in about sixteen seconds. Nothing is moving at that speed — the band is a place, not an object, and places can move faster than the things that define them. The second is what happens as the fringes tighten: past about six bands across the frame the eye stops reading them as bands and starts reading them as texture, and the picture flips from “waves” to “weave” without any parameter jumping. Both readings are correct.

If plate 07, Color Symphony, seemed to do something like this, it is worth being precise about the difference, because the word moiré gets used for both. Colour Symphony stacks curved sine waves of different frequencies and lets them slide past each other, so its shimmer is a beat between frequencies. Here the two grids have exactly the same frequency and differ only in angle, so the beat is geometric and its spacing is governed by the single equation above. Different cause, different arithmetic, and a visibly different picture: sine stacks give soft curved lobes, two rigid gratings give straight-edged bands running crosswise to the grain.

Colour, and how the picture is put together

Two inks, both taken from this site’s shared palette rather than invented here. Three lines in four are cobalt and every fourth is coral, which is the same 3 : 1 weighting the rest of the gallery uses. The coral is carried at a lower alpha than the cobalt on purpose: at equal strength a warm ink reads considerably hotter than a cool one against a near-black plate, and matching the numbers would not have matched the balance.

The coral lines are worth watching on their own, because every fourth line of a grating is itself a grating, of four times the pitch. It therefore has its own moiré with the coral of the other grid, at four times the spacing — less than one full band across the frame at most sizes. That is why the warmth in the picture is not evenly spread: one region drifts warmer while another cools, on a rhythm four times slower than the main bands. Nothing paints that gradient; it falls out of the same rule.

Two more construction notes, in case the mechanism matters to you more than the picture. The pitch does not scale in strict proportion to the frame. In proportion, the 4.2 pixels at this page’s stage size would be 1.8 pixels on a gallery thumbnail — below the pixel grid, which is the aliasing trap above — and 8.9 pixels on a 1080-tall screen, which is a bar rather than a line. It follows a square root with a floor instead, which holds the pitch between 3.5 and 7 pixels and the stroke between 1.5 and 3 everywhere the plate is drawn. The honest cost of that is that the gallery thumbnail is not an exact miniature of this view: its lines are relatively coarser, 8 to 20 per band against 24 to 64 on a large screen. What is held constant across every size is the composition — the number of bands across the short side — not the texture. And a soft radial vignette closes the four corners back toward the background, because a grating covers every pixel it is given and a frame of uniform density is a repeating swatch rather than a composition.

Honest limits

Several, and none of them are hidden.

This is not a screenshot-friendly plate. Its content is a fine grating, so any resampling — a thumbnail, a compressed social preview, a screen photographed rather than captured — will beat against it and produce banding that is the copy’s, not the plate’s. The share card for this page is a real 1200×630 render and is honest at that size; scaled down in a timeline it will not be. That is a property of the subject rather than a defect in the render, and it is the same effect the piece is about.

The counter-rotation reverses rather than running one way for ever. A steady one-way rotation is the more elegant description and it is not what this does, for the reason given above: past a few degrees the bands stop existing. The swing is sinusoidal, so it slows to a stop and turns around twice a cycle; the constant slide is what stops those two instants reading as a pause.

The fringe equation used throughout assumes the two gratings are identical in pitch. Real moiré also arises between gratings of slightly different pitch at zero angle, which gives fringes parallel to the lines rather than crosswise, and the general case mixes the two. This plate only does the rotational case, so half of the subject is missing by choice.

Antialiasing does the plate a quiet favour and it is worth saying so. A 1.76-pixel stroke on a pixel grid is rendered as partial coverage, and partial coverage is exactly the quantity the moiré is made of — so the bands survive at line widths where the individual lines are already softening. On a display without antialiasing they would be harsher and noisier.

Finally, motion. Under prefers-reduced-motion nothing animates: the plate is drawn once, at a fixed point of the swing, and left as a still. It is a slow piece even when it does run — a full lap of the composition is 72 seconds, and if you want to see the other end of the swing without waiting, clicking the animation jumps it a quarter of the way round the swing.

Curious how the loop and canvas fit together? Read how it works →