The Moiré Museum

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!

Groups of Circles

circles

On this page mainly vector graphics are used, whose 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).

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

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.

Rays in blue and red Rays black

Rotation and/or touch the image, please.

Colored Rays moved

A spiral shaped moiré pattern ☛ (.html), circular moiré pattern ☛ (.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 OE.57.3.030803 (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 appeard in 2007, the first edition of volume I appeard in 2000).

Pour une introduction aux mathématiques des moirés veuillez visiter mathkang.org.

Nested Squares

Rotation and/or move over the image, please.

Nested Squares moving

Four layers of nested squares ☛ (.html).

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 | Alberto Biasi albertobiasi.it | Ludwig Wilding galerie-la-ligne.ch | Werner Witschi kunstsammlung.biel-bienne.ch | 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!

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

Equilateral Triangles

rotation, please and find some 3D effects.

rotation rotation Black Triangles

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

Hexagon Mesh

You might have observed some hexagonal structures while rotating the triangle mesh 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).

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

Miraculous Tiles

Rotation, please.

Tiles moving Tiles fix

(.html)

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 might also notice a moiré effect between the circles and your screen at the end.

Rose Windows

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

Rosette Rosette moved

Maple leaves ☛ (.html)

Sine Lines

Rotation and see what happens!

Lines moving sine lines

Lines Cyan

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 (an easy example: (.svg)). 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); a few lines, nested ☛ (.svg)/(.pdf), (.svg)/(.pdf), spiraling (.svg)/(.pdf), just zoom in and see how far you can get.

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

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

Maurer Roses

Maurer Rose n44 d137

Try some Maurer roses yourself: (.html)

Experiments in Motion Graphics

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

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

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)

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

Mathematical Curve-Art

Try some curves yourself ☛ (.html)

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

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

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.

HTML 5 CSS ist valide!  Schlussstück

Copyright © SQRT.CH | IMPRESSUM