Sitemap

Moiré Patterns

Interference patterns on steroids.

--

Moire pattern in black
Moiré dot pattern

Moiré patterns are a type of pattern often seen when taking a picture of a screen or in photography when two opaque objects are moving in front of each other. They are formed from interference patterns between two distinct opaque patterns that overlap. An example of this might be a wire fence and another fence behind it. This forms a pattern when moving one in front of the other that gives the appearance of an entirely new pattern. To understand Moiré patterns, we first must understand interference.

Interference Patterns

Interference patterns are patterns that arise from interference between two distinct waves. An example of such an interference pattern occurs when we add two sine waves, one at 1 Hz and another at 2 Hz.

Interference pattern of waves at 1 and 2 Hz

Another interference pattern occurs when we add a wave of 1Hz and a phase of 0 with a wave at 1 Hz and a phase of π. The waves cancel each other out, and this causes no wave at all. Noise-canceling headphones use this technique to block out sounds. It can also be used by airplanes and stealth technology to hide the sound of the aircraft. Wave interference forms the basis of what we will discuss with Moiré patterns. A Moiré pattern is basically a graphical interference pattern that can be animated.

How To Create A Pattern

There are different ways to construct a Moiré pattern. Numberphile covers some of the methods, like the dot method. In this method, two patterns of dots are overlayed with different spacings. For my construction, I chose to use a rotating pattern where one pattern of dots rotates above the other. This causes a zooming effect when the dot size is large and makes it look like the pattern is almost zooming.

The crux of the pattern generation method is the createPattern function which generates a pattern that is of a certain width and height with a spacing between the dots.

function createPattern(x, y, pwidth, pheight, xs, ys) {
const pattern = [];
for(let xi = x; xi < pwidth; xi += xs) {
for(let yi = y; yi < pheight; yi += ys) {
// draw dot
pattern.push([xi, yi]);
}
}
return pattern;
}

The top pattern is rotated around the bottom pattern using a rotation transformation.

Get Noah Hradek’s stories in your inbox

Join Medium for free to get updates from this writer.

With different spacings and a continuous rotation, different patterns emerge as the animation continues. The interference pattern emerges from the interaction of the two patterns of dots, which creates a new wave-like pattern.

Black and white moire
Wide spacing for the second pattern.

Some look organic even and exhibit behaviors that look like a pulsating lifeform or a surface of some kind.

Organic moire
Organic looking pattern

Increasing the rotation speed creates a fast pattern that cycles through the various phases much more quickly and becomes a hypnotic dance.

Fast pattern

Modifying it so that a new color is picked for every dot makes the pattern multicolored.

Multicolored pattern

Another method is a circular construction method where two circular patterns are combined to create another interference pattern. A circular pattern is constructed by creating a series of concentric circles at certain intervals with a specified spacing in-between. Just by moving the screen a little, you can already see distortion effects from the pixel array.

Pattern caused by overlapping pixels.

This occurs because the pixels on the screen are written to in memory in the framebuffer. When the screen is moved, the device pixels overlap with the screen pixels in the framebuffer, causing this pattern to emerge.

Let’s look at what happens if we intersect the circles at their center. Right when the circles overlap exactly, we have a radial pattern of light and dark areas that fan out.

Radial overlap pattern

This pattern looks similar to many other radial patterns, like a sun pattern or a cyclical pattern. The two patterns interfere with each other like sine waves interfere, forming a new pattern that is a combination of both patterns.

Moiré in Nature

Interference patterns can be seen in arrangements of graphene, where it forms hexagonal patterns. Lattices like this can form other intricate patterns by moving and rotating the pattern around. If the top pattern is rotated, an entirely new pattern is created.

New types of particles also exhibit interference patterns that look like Moiré patterns. The applicability of these patterns extends beyond just particle physics to photography, with images with overlaid opaque patterns also possibly exhibiting this phenomenon. Some patterns in certain materials can have electrical and optical properties.

Hexogonal moire patterns.
Andrei, E.Y., Efetov, D.K., Jarillo-Herrero, P. et al. The marvels of moiré materials. Nat Rev Mater 6, 201–206 (2021). https://doi.org/10.1038/s41578-021-00284-1

Maybe within these types of materials, new properties can be found that solve problems we haven’t even thought of yet.

Exercises

Now that we went over some different patterns, try creating some of your own with different geometric shapes and spacings. Moire patterns can be replicated in photographs, so one possibility is to draw a photo and then pass a pattern on top of it and see how that affects the photograph. Try different scales and colors as well to see how that changes the patterns.

creative-commons-by-21pxcreative-commons-nc-21px

--

--

Noah Hradek
Noah Hradek

Written by Noah Hradek

"All I'm Offering Is The Truth."