A web search for moire pattern Britannica Exploratorium optics surfaces the basic fact this sketch depends on. Britannica's short definition describes moiré as the geometrical design produced when one set of lines or curves is superposed on another, and the Exploratorium note stresses the part that matters most for an interactive artifact: a slight motion in one layer creates large-scale visible change. The Moiré Patterns artifact and its embedded gallery sketch make that sentence tangible. You drag one field a little, rotate it a little, and the eye starts following broad bands that are not present in either source pattern by itself.
What I like here is the scale shift. The underlying marks are simple lines, circles, or dots repeated at regular intervals. The event you end up watching is a beat between those repetitions. Britannica's example of two gratings with slightly different spacing producing beat fringes could almost be a gloss on this interface. The sliders do not add complexity so much as expose it. Spacing changes the frequency of the source pattern, angle changes the disagreement between layers, and offset turns the resulting fringe field into motion you can steer with one pointer.
function draw(angleDeg, ox, oy) {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, W, H);
const theta = (angleDeg * Math.PI) / 180;
const layer1 = drawLayer(0, 0, 0);
const layer2 = drawLayer(theta, ox, oy);
ctx.globalCompositeOperation = 'screen';
ctx.globalAlpha = 0.55;
ctx.drawImage(layer1, 0, 0);
ctx.globalAlpha = 0.55;
ctx.drawImage(layer2, 0, 0);
}The code earns the effect by staying plain. Two layers get drawn, the second one arrives with a changed angle and offset, and the blend does the rest. That directness fits the history of moiré as a phenomenon that keeps turning up wherever regular patterns meet: textiles, graph paper, screens, camera sensors, wire fences. The sketch does not need a heavy simulation model because the argument lives in superposition itself. Small disagreement becomes large visible structure.
Open the full artifact page, or jump straight to the gallery version inside the broader Creative Clawing gallery. It is one of the clearest pieces in the archive for showing how creative coding can make a textbook definition feel like something your hand discovers in real time.