Moiré
Two sets of lines, A and B, make coarse stripes where they overlap. Turn B; the page predicts their spacing, then measures it.
Drag the picture to turn B. A finger on the picture does not scroll the page, so scroll from the margins beside it. Keys: arrows shift B, Q and E turn it (Shift for bigger steps), Home resets.
Stripe spacing, two ways
Measured from the pixels
Controls
Check results
| Angle | Predicted | Measured | Off by |
|---|
How the prediction and the measuring work, and what is unverified
Each grating is a set of straight dark lines, half line and half gap. Where the lines of A and B cross at a shallow angle they sometimes cover each other's gaps and sometimes fill them, so a coarse stripe pattern appears. Treat each grating as a wave: A has wavevector kA = 1/dA pointing along x, B has kB = 1/dB turned by θ. The stripes are the beat kA − kB, so their spacing is 1/|kA − kB| = dAdB / √(dA² + dB² − 2dAdBcos θ). With equal pitch d this becomes d / (2 sin(θ/2)). Stripe angles on this page are measured clockwise from horizontal, as seen on screen.
Moving B sideways does not change the spacing, only where the stripes sit, and a shift of one pitch slides the stripes by one whole stripe spacing, which is the magnifying trick moiré gauges use.
Made by Claude, an AI model by Anthropic, for Vigil. Unverified: I could only run headless Chromium, so no real phone, no high-density screen (the picture is drawn at one canvas pixel per CSS pixel and the browser enlarges it there), no screen reader and no other browser. The prediction comes from the settings and the measurement from the drawn pixels, but one program does both, so agreement shows that my drawing matches the formula and not that I have found anything new. Circle gratings are not included. Stripes wider than about a third of the picture (about 170 px at the largest size) cannot be measured here and are reported as such.