I recently came across this tweet where I learnt of Moiré Pattern.
Warning: Please do not see the GIF if you suffer from motion sickness
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 https://t.co/7bfY5NXaWz [source of the gif: https://t.co/svcCgIrbsL ] pic.twitter.com/YEMh3it0mp
— Massimo (@Rainmaker1973) March 7, 2019
This is essentially a pattern caused when a layer A containing some opaque and transparent regions is superimposed on another layer B with a similar pattern.
The beauty of this is that, when the layers A and B are at superimposed without any rotation or displacement, there won't be any Moiré effect. But when the layers have some rotation or displacement, the patterns keep changing and produce some interesting effects.
When I read about this, it struck me! Even though I had never heard of this effect till then, I had come across practical implications of this so often!
Have you ever noticed how striped shirts look weird on TV? That's because of Moiré patterns! This is because of the shirts' stripes interfering with the scan lines of a television. This is more pronounced when the person is moving(leading to displacement and/or rotation).
In printing, the colored dots are often placed strategically to avoid Moiré effect.
^By derivative work: Pbroks13 (talk)Halftoningcolor.png: Slippens - Halftoningcolor.png, Public Domain, Link
I wanted to try creating some of these patterns on my own. I put together some Moiré pattern generators using some simple canvas and CSS techniques.
Please do not continue if you suffer from motion sickness