The Moiré Museum

Welcome, Dear Visitor, to this small and humble museum. Everything is realised as simple as possible, so may it run comfortably on all your devices!

Aside from the ludic and aesthetic aspect of some moiré effects that I hope you will enjoy, this museum aims to highlight the increasingly important role they play in research and provide links to further resources.

Maurer Roses

A N I M A T I O N  ☛ I (.html),  II (.html)

Skip to Maurer Roses below.

Groups of Circles

circles

In this museum mostly vector graphics are used; they are great, yet their rendering depends on your browser. The following two files allow a comparison (.png) or (.pdf).

Non-concentric nested circles (.html) | Circle machine (.html)

Fresnel zone plates (Pac-Man and his bro) (.html), Spiral zone plates (.html)

Growing circles ☛ (.html) | Spiral animation (.html)

Colored Rays

the rotation, please.

rotation rotation rotation rotation

Move the image by your hand ☛ (.html), simple rays in a square ☛ (.html), in a rose ☛ (.html).

Some more? ☛ (.html). If not exactly centered one obtains some prodigious outlines (.html). Tiled ray patterns ☛ (.html).

You can move the cursor over the picture below if you like.

Rays in blue and red Rays black

The resulting Moiré in the image above consists of parabolas ending in straight line segments, a shape that also results under “square inversion” (.html) of parallel lines (.svg)/(.pdf), diagonals result in (.svg)/(.pdf). Under “circular inversion” one would obtain circles, see Conformal Map below.

Rotation and/or touch the image, please.

Colored Rays moved

A spiral shaped moiré pattern ☛ (.html), circular moiré pattern ☛ (.html). Ellipse over ellipse ☛ (.html)

Beat the Moiré

Some physical and mathematical routes to the description

A moiré effect is not always aesthetically pleasing (as it should on this page), it can be quite annoying at times. Therefore, when planning a screen or a projection surface, you have to calculate first in order to minimise the moiré effects. One treats this like a beat in physics where the beat frequency can often be determined by basic mathematics.

Hear a beat. Typically, you have two sine tones with frequencies close to each other e. g. 440 Hz (.opus) and 444 Hz (.opus). Adding them up together you get a louder signal with a beat:

What does a frequency have to do with the moiré effect? Well, if you have a line grating with black bars on a white background, the fineness of this grating can be read as “frequency”: How many black bars are there per metre or: how often changes black to white, while translating the image at constant speed. Overlaying in this case is a child’s play ☛ (.pdf), but quickly becomes more complicated yet still manageable using a bit more sophisticated beat maths, the Fourier transform (.html). It is a striking example of how two phenomena from completely different areas of perception are virtually the same, since described by identical mathematics.

Create beat frequencies without bothering your neighbours ☛ (.html).

Read more on the moiré effect in displays spiedigitallibrary.org (Moiré effect in displays: a tutorial), arxiv.org (The basics of line moire patterns and optical speedup).

Overlaying bars (scales) of different periods shows off an ingenious invention, the “vernier scale” (nonius) miniphysics.com

Perhaps you have already heard of Joseph Fourier or seen how his series produce quite baffling, yet extremely useful results. Learn more at bbc.co.uk or watch a video by Grant Sanderson (3Blue1Brown): “But what is a Fourier series? From heat flow to drawing with circles.”, youtube.com.

Fourier Squarefunction  with 40 summands

For a deeper description of moiré patterns by the Fourier transform, see:

Isaac AMIDROR, The Theory of the Moiré Phenomenon, Volume I: Periodic Layers. Springer, 2009. (Vol. II treats aperiodic layers and appeared in 2007, the first edition of volume I appeared in 2000).

At the École polytechnique fédérale de Lausanne, where Amidror led his group, they are currently working with high resolution moirés as counterfeit security features nature.com, epfl.ch.

Pour une introduction aux mathématiques des moirés veuillez visiter mathkang.org. Un travail pionnier, également en français, a été réalisé par Jacques Harthong en 1981, voir sciencedirect.com.

Nested Squares

Rotation and/or move over the image, please.

Nested Squares moving

Four layers of nested squares ☛ (.html).

Barrier-grid Animation

magic-moving-pictures

A Magic Moving Pictures promo card by G. Felsenthal & Co., 1906.
Source: wikimedia.org.

Ride the famous horse ☛ (.html), triple color barrier (.html)/(.svg)/(.pdf), rotate a tesseract (.html), running balls (.html), Ombro-Cinéma (.html)

How to make it by hand: youtube.com/@SalihArtAndTech. This principle, a kinoptical effect, comes in various ingenious toys, for example in the zoetrope: yt/@QuestaconTV. 3D: yt@InsiderArt.

Checkerboard Pattern

Checkerboard

The graphic above contains the element ‘pattern’. Compare the rendering of it by your browser with ☛ (.png) or (.pdf).

Green-Blue-Black moving ☛ (.html), Magenta-Blue ☛ (.html).

Op Art

The somewhat pejorative term “Op art”, coined from “optical art” in 1964 by Time magazine, is today quasi the “Big Bang” of this art form, already celebrated at the MoMA in 1965: “The Responsive Eye” ☛ moma.org, inauguration film youtube.com.
As so often, a heated debate arose about this art form and whether it was art at all – rather abstruse, considering what else is traded as art at completely exorbitant prices nowadays. In my opinion, the aspect of optical irritation, which forces one to take a second look, is a core characteristic of fine art: Learning how to see.

Artists who worked or are still working with the moiré effect: Toni Costa galleriafutura.com | Gabriele Devechi gabrieledevecchi.it | Alberto Biasi albertobiasi.it | Ludwig Wilding galerie-la-ligne.ch | Werner Witschi kunstsammlung.biel-bienne.ch | Richard Allen richardallenartist.uk | Jean-Pierre Yvaral tate.org.uk | Takahiro Kurashima takahirokurashima.com | Anoka Faruqee anokafaruqee.com | Aleksander Drakulic | Nicky Assmann nickyassmann.net | Gianni A. Sarcone giannisarcone.com | Mathijs Delbaere behance.net | Andrea Minini andrea-minini.com | …

Find some of the best known op artists, like Bridget Riley or Victor Vasarely on op-art.co.uk. In case you are aware of an artist who should be on the above list, let me know!

Emergent SQRT

Rotation and see what happens!

SQRT Signs moving

Does emergence only occur when an entity is observed having properties its parts do not have on their own? See quantamagazine.org.

Apart from emergence you might also have noticed a kind of “convex lens effect” here. Recently it has been shown that it is possible to build lenses using the moiré effect: JOSAB.36.002810 (Wide-angle Moiré metalens with continuous zooming), OE.21.006955 (Demonstration of focus-tunable diffractive Moiré-lenses).

Points over points and additive color mixing ☛ (.html), 30° symmetry rotation ☛ (.svg) Point pattern and its complement ☛ (.html)

The emergence does also work with a random distribution point pattern if tuned to your object pattern ☛ (.html)

Equilateral Triangles

rotation, please and find some 3D effects.

rotation rotation Black Triangles

Move the triangle pattern yourself ☛ (.html). Base = height ☛ (.html), in contemplation (.html)

Hexagon Grid

You might have observed some hexagonal structures while rotating the triangle grid above. What if we started with patterns of hexagons?

rotation rotation White Hexagons

When centered around the edge of three hexagons, one can observe a cube illusion (isometric cube) ☛ (.html). More layers and a flickering screen ☛ (.html) and here you get the triangles back ☛ (.html).

“When Magic Is Seen in Twisted Graphene, That’s a Moiré”, quantamagazine.org.

Moiré superlattices can play a pivotal role in nano physics acs.nanolett.8b05061 (New Generation of Moiré Superlattices in Doubly Aligned hBN/Graphene/hBN Heterostructures).

Moiré physics in 2D crystals nature.com, geometrymatters.com. Oh yes, geometry matters!

Miraculous Tiles

Rotation, please.

Tiles moving Tiles fix

Nested Squares and Circles

Move over the circles, please.

50 squares 50 circles zoomed

Please note that on some mobile devices a moving vector image might be pixelated. If you can see it accurately, you will perhaps notice a moiré effect between the circles and your screen at the end. You d’like to explore this Moiré pattern with your screen any further? ☛ (.html)

Rose Windows

the rotation, step back and contemplate the resulting symmetrical patterns!

Rosette Rosette moved

Maple leaves and other patterns ☛ (.html)

Sine Lines

Cosine Lines multiplicative

Check it yourself ☛ (.html)

Rotation and see what happens!

Lines moving sine lines

Beat the sine (.html), sine spaces ☛ (.html)/(.jpg)

Lines Cyan

Lines, spaced as a function of a Gaussian distribution (.html), such a graphic already formed the cover of one of the most famous articles on the Moiré effect by Gerald Oster and Yasunori Nishijima: scientificamerican.com/jstor.org. Oster even experimented with LSD and other drugs to enhance the visual effects. This was very much in the spirit of a psychedelic interest at the time. Capturing that particular mood does the film “Moirage” by Stan VanDerBeek (1970, 16 mm).
Groups of parabolas superimposed (no drugs needed) ☛ (.html)

Lunometer

Hans Peter Luhn, a researcher in the field of computer science for IBM, entered after the Second World War the textile field, which eventually led him to the United States, where he invented a thread-counting gauge, the Lunometer, still on the market. When laid across the sample material and oriented properly, the thread or wire count can be instantly determined within an accuracy of ± 1%.

That is exciting insofar as the term “Moiré” originates exactly from the textile area. The old English word “mohair” (a soft yarn or cloth made from the outer hair of angora goats) originates from the Arabic mukhayyar (مُخَيَّر, lit. “selected, chosen”, meant in the sense of “a choice, or excellent cloth”; cited after etymonline.com). In French this word was used in the verb “moirer” (to produce a watered textile by weaving or pressing) in the 18th century. The adjective “moiré” is also associated with “brown, black” from a source written in 1540, cf. cnrtl.fr.

In any case, the textile circle is perfectly closed with this clever invention!
lunometer.com, Fadenzähler lunometer.de

Etymology Fiction

By the way: there are tales about ominous gentlemen, who are said to have been the patron saint of the Moiré phenomenon. Thus, a certain Swiss, Ernst Moiré, failed photographer, is said to be the father of the name (see “The Moiré Effect” by Lytle Shaw cabinetmagazine.org, ISBN-10 395233913X, Lehni-Trueb, 2012). As the etymology in the section above shows, this fictional one would be a pretty late name patron.

Luminescent Curves

Mutual Pursuit in a Square

Leonhard Euler’s method for approximating solutions to differential equations lets you draw appealing images. The pictures illustrate the so called Mice Problem wikipedia.org and, who knows, the Mouse Problem from “Monty Python’s Flying Circus”: “… there’s a big clock in the middle of the room, and about 12:50 you climb up it and then… eventually, it strikes one and you all run down”. Drawn using python.org!

Euler Lines 0 Overlapping Euler Lines 1

Moiré ☛ (.svg)/(.pdf), double star system? (.svg)/(.pdf)

Mutual Pursuit in a Triangle

Pursuit in a Triangle

Other combinations into a hexagon ☛ (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), (.svg)

Read more on these “inspiraling” images (in German (.html)).

String Models

Spotlight Lines

Linien im Quadrat

Lissajous with large step

Envelopes

Mathematisches Fadenmodell im Sechseck

String models built from nails and threads are an appealing type of modelling in mathematics. Normally, one looks for the resulting curve, the so-called envelope (a basic example as a function (.svg), as a quadratic Bézier curve (.svg)). Does this pique your interest? Then I recommend “Bridges, string art and Bézier curves” by Renan Gross: degruyter.com/archive.org.

As you may have noticed in the section above on the mutual pursuit problem, these curves, some of which are not so simple, do not have to be drawn at all, they simply result visually from their tangents. An aesthetically stunning appearance!

A finer grid ☛ (.svg)/(.pdf), other arrangements of the same elements ☛ (.svg)/(.pdf), (.svg)/(.pdf), 45° in a square ☛ (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf); in a triangle (.svg)/(.pdf), (.svg)/(.pdf), in a regular pentagon (.svg)/(.pdf)

A cardioid (.svg)/(.pdf) results here from the straight lines connecting the n edges of a polygon by the connection rule k ↦ 2k mod n (i. e. connect edge 1 with edge 2, edge 2 with edge 4, edge 3 with edge 6 and so on); a generalisation with k ↦ 6k (.svg), with 2000 edges and k ↦ 211k (.svg), awesome k ↦ 223k (.svg)/(.pdf), k ↦ 301k edges (.svg). Animation based on the work of Burkard Polster by Mathias Lengler ☛ lengler.dev

A few lines, nested ☛ (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), spiraling (.svg)/(.pdf), (.svg)/(.pdf) — just zoom in and see how far you can get.

According to ams.org curve stitching was invented by Mary Everest Boole in the mid 1800s.

Maurer Roses

So far, lines were drawn from points living on a polygon. You can also choose other curves where your points live on, e. g. a rose. By adding an even-odd fill rule for the color one gets special Moiré effects (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.png), (.svg)/(.webp), (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.png)

Maurer Rose n44 d137

Create some rhodonea curves (roses) first (.html)

Try some Maurer roses yourself: (.html), with circle subdivisions (.html), animation (.html), in bright design (German) (.html)

Experiments in Motion Graphics

by John H. Whitney and Dr. Jack Citron of I.B.M., 1968

Source: archive.org.

Sir John also provided some of his drawings for the masterpiece “Vertigo” by Alfred Hitchcock in 1958. Combined with the brilliant music by Bernard Herrmann only the opening credits to this film an exceptional atmosphere not to speak of the whole movie.

Moiré patterns are particularly prominent in the film “Catalog” (1961) archive.org.

Conformal Map

konforme Abbildung 26 Gitterlinien mit z hoch 3

Above you see a square grid, centered around (0, 0), after the conformal transformation with the function f(z) = z3, a finer grid ☛ (.png), centered near to (1, i) under f(z) = ln(z) (.png), superposed (.png); repeated element from f(z) = sqrt(z) (.png); a triangle grid in a hexagon shape (.png) under f(z) = z4 (.png), under f(z) = z2 (.png), superposed (.png); sin(z) superposed (.png); 1/z (circular inversion) (.png).

Nested squares (.png) transformed under f(z) = z + 1/z and overlapped ☛ (.png), f(z) = tan(z) (.png)/(.pdf), f(z) = sin(z) (.png) and finally, Pac-Man is back: f(z) = z/2 sin(z) (.svg)/(.png)!

Nested equilateral triangles with centroid at (0, 0) (.png) transformed under f(z) = z−2 (.png), “The Tangent at Heart” (.png), (.png); with triangles centered in a square (.png), (.png)

Tilted square illusion (.png) (can you see the flipping squares?) from a hexagon grid under f(z) = cosh(z) (.png)/(.pdf), a regular triangle pattern (.png) under f(z) = 1/z + z (.png)/(.pdf), again the lovely tan(z) (.svg)/(.pdf)

A tiny bit of explanation? ☛ (.html) (in German) or visit the virtualmathmuseum.org or play with David Bau’s app on davidbau.com.

Moiré Fringes in Physics Teaching

There are mainly two topics where in some Physics books you find a Moiré effect for a visualisation. One is interference of elementary waves. You can see such circular waves by just dropping a pebble stone into unmoved water. If you drop two peebles (or your feet youtube.com) you’ll get an interference pattern (.html), that not only looks like, but is this: (.html), namely hyperbolas.

One other topic where a Moiré might show up is electromagnetism. If you want to visualise how a dipole (or two electric charges wikimedia.org) works, for example as an emitter, you can use two circles where you draw radial triangles or just lines, the radii, to represent the field lines (direction that a small positive charge would take) and let the students play a bit with this analogue (.html). The radii alone would yield circles as a Moiré, so with the triangles we cheat a bit in order to get closer to the real functions of the field lines. Nice but not exactly the same, of course!

Sierpiński-Carpet

Sierpinski Carpet Cross

Orders 1 ☛ (.svg), 2 (.svg), 3 (.svg), 4 see above, 5 (.svg), 6 (.svg) (may take some time); other variants (.svg), (.svg), (.svg) 3 kB; Swiss cross (.html)

Mathematical Curve-Art

Orthogonal Oscillations

Lissajous

Try some curves yourself ☛ (.html)

Lissajous

Lissajous curve with the first summands of the Fourier square wave function ☛ (.svg)/(.pdf)

When using a client for plotting it is sometimes advisable not to export a vector graphic or a pdf; nowadays I use and adore matplotlib.org, yet so far the export is limited, providing a jagged path whatever one sets for the step size (.svg), while the png export takes the full command (.png)!

In order to obtain a made-to-measure plot, instead of a jagged vector graph, it is worthwhile to take your own program, e. g. (.py), in which the steps can be selected individually; the vector can then be converted to a (.png) or a (.pdf).

Spirograph

Try a Spirograph on nathanfriend.io.

Spirograph

Well, the above is quite an economical Spirograph! For the sake of size reduction I just transformed my file (.svg)/(.pdf) using line segments. Some other of my Spirographs with a moiré effect resulting from the even-odd color fill rule (.svg)/(.pdf), (.svg)/(.pdf).

Mitchell Warr used three wheels and made some interesting findings, see github.io, video youtube.com.

exp(it) + exp(6it)/2 + exp(-14it)/3

Whether there is really no permanent place for ugly mathematics in the world, as G. H. Hardy suggested, I ultimately do not know (as a physicist I doubt it), yet there is a huge amount of beauty in and from mathematics. I suggest, you and I read now a bit in the marvelous book by Frank A. Farris, “Creating Symmetry: The Artful Mathematics of Wallpaper Patterns” princeton.edu, where this ‘mystery curve’ (.svg) is taken from. Would you like to learn more on vector graphics or just see further of my images? Then, please visit my vector graphics page. In any case, I express my thanks for your kind visit here.

Maurer Rose with plus sin

HTML 5 CSS ist valide!  Schlussstück

Copyright © SQRT.CH | IMPRESSUM