Welcome, Dear Visitor, to this small and humble museum. You can see some pictures resulting from my playful work with vector graphics. Everything is realised as simple as possible, so may it run comfortably on all your devices!

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

Skip to Maurer Roses below.

Vector graphics are great, yet their rendering depends on your browser. The following two files allow a comparison (.png) or (.pdf).

Non-concentric nested circles ☛ (.html), Fresnel zone plates (.html), Pac-Man and his bro (.html).

the rotation, please.

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

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

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

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 “cirular inversion” one would obtain circles, see Conformal Map below.

Rotation and/or touch the image, please.

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

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.

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 appeard in 2007, the first edition of volume I appeard 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.

Rotation and/or move over the image, please.

Four layers of nested squares ☛ (.html).

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

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 aleksanderdrakulic.com | Nicky Assmann nickyassmann.net | Mathijs Delbaere behance.net | …

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!

Rotation and see what happens!

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)

rotation, please and find some 3D effects.

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

You might have observed some hexagonal structures while rotating the triangle grid above. What if we started with patterns of 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).

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).

Rotation, please.

Move over the circles, please.

Please note that on some mobile devices a moving vector image might be pixelated. If you can see it accurately, you might also notice a moiré effect between the circles and your screen at the end.

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

Check it yourself ☛ (.html)

Rotation and see what happens!

Beat the sine ☛ (.html)

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 is the film “Moirage” by Stan Van DerBeek (1970), archive.org.

Groups of parabolas superimposed (no drugs needed) ☛ (.html)

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 en.wikipedia.org). 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

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!

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

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

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

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 on: plus.maths.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), (.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.

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)/(.pdf), (.svg)/(.pdf), (.svg)/(.pdf), (.svg)/(.png)

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

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. 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.

Above you see a square grid, centered around (0, 0), after the conformal transformation with the function f(z) = z^{3}, 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) = z^{4} (.png), under f(z) = z^{2} (.png), superposed (.png); sin(z) superposed (.png); 1/z (circular inversion) (.png).

Nested squares (.png) transfomed 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) transfomed 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.

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 peeble into unmoved water. If you drop two peebles (or your feet youtube.com) you'll get an interference pattern, 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!

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 (.svg)

Try some curves yourself ☛ (.html)

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).

Try a Spirograph on nathanfriend.io.

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), (.svg)/(.pdf).

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

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 ‘mistery 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.