Moire Magic: Creating Interference Patterns with "Big Holes" in p5.js

When we think of Moire patterns, we usually imagine incredibly fine lines or tiny grids. But what happens if we use big, bold punch-holes instead? In this post, I’ll show you how to generate surprising Moire effects using simple p5.js code.

It's so easy, and you'll get surprising results.

[Japanese version / 日本語版はこちら]

What is Moire?

According to Wikipedia, a Moiré pattern is a "large-scale interference pattern that can be produced when an opaque ruled pattern with transparent gaps is overlaid on another similar pattern."

Wquote from Wikipedia 'Moiré pattern'.

You’ve likely seen this effect in fine textiles or screen doors—thin, flickering stripes that seem to move as you change your perspective.

Wait, Does This Count as Moire?

Traditionally, Moire is associated with microscopic details. However, take a look at the image below. These are not fine lines; they are large, circular "punched" holes.

Large punched holes

The setup is incredibly simple. First, you create a "board" with a regular grid of holes.

Then, you simply stack two of these boards on top of each other and shift or rotate them slightly.

I was fascinated to find that even with such large gaps, the interference patterns remain vivid and beautiful. As long as you have an "opaque pattern with transparent gaps," the physics of Moire holds true.

The p5.js Implementation

Here is a simple p5.js example that generates these patterns. It creates a graphics buffer for the punchboard and overlays it on itself with random transformations. This code is released under the CC0 license—feel free to use it!

Pro Tip: The Magic of erase() for Digital Punching

In this sketch, I used the erase() function to create the holes. You might wonder: "Why not just draw circles with the background color?"

There is a subtle but powerful difference. When you use erase(), p5.js treats the shapes as physical cutouts.

/** 
 * Moire patterns by big holes (p5.js)
 * 
 * @author @deconbatch
 * @version 0.2
 * @license CC0 https://creativecommons.org/publicdomain/zero/1.0/
 * p5.js 1.1.3
 * created 2022.07.24
 */

const w = 720;
const h = w;
const offset = 120;
const pNum = 24;          // hole number
const pDiv = w / pNum;    // gap between holes
const pSiz = pDiv * 0.75; // size of hole

function setup() {
  createCanvas(w, h);
  noLoop();

  p = createGraphics(w - offset * 2, h - offset * 2);
  p.noStroke();
  p.background(0);
  p.erase();
  p.fill(0);
  for (let x = 0; x < pNum; x++) {
    let yDiv = (x % 2 == 0) ? 0 : pDiv * 0.5;
    for (let y = 0; y < pNum; y++) {
      p.circle(x * pDiv, y * pDiv + yDiv, pSiz);
    }
  }
  p.noErase();
}

function draw() {
  background(208, 48, 32);
  imageMode(CENTER);

  push();
  translate(w * 0.5, h * 0.5);
  image(p, 0, 0);

  translate(w * random(-0.2, 0.2), h * random(-0.2, 0.2));
  rotate(random(PI));
  image(p, 0, 0);
  pop();
}

function mouseClicked() {
  redraw();
}

Final Thoughts: Keep Experimenting

Seeing Moire patterns emerge from such large elements felt like rediscovering a fundamental law of nature. It’s a great reminder that sometimes, scaling up a tiny phenomenon can lead to bold new visual styles.

Why not try experimenting with different shapes? What if the holes were rectangles or stars? Fork the code, play around, and discover your own Moire magic!