The Mysterious Moiré Pattern.
How the brain is deceived into the perception of the existence of a non-existing thing.
We all came across this mysterious pattern ,while trying to take the screenshot of a computer screen or looking at some cloth making an unusual wavy pattern.In both cases , what we see is an optical illusion called “Moiré Pattern”.
What is “Moiré Pattern”?
‘ Moiré ’ is a French word meaning a silk fabric that has been subjected to heat and pressure rollers after weaving to give it a rippled appearance.
The “Moiré Pattern” is an interference pattern produced by placing the similar templates , slightly offset by spacing or angle .
These patterns can also be observed in photography and radiology, but as an artifact.
In photography ,the odd stripes and pattern is called Moiré Effect .Some of the cameras now come with anti aliasing filter to remove the Moiré effect.
In radiology, this artifact is called Moiré Fringes,which are lines or cloudy or frosted appearance .This occurs when two films are either tilted or differs in focal distance or lines per inch.
Another interesting fact, I came across about Moire effect is from this video of Tom Scott , where he explained about the use of Moire Effect as marine navigation lights called the “Moire Effect lights or Inogon Lights” , it’s function is to navigate the ships away , from coming closer and dropping their anchor ,as it points in the direction of the underwater cable.
Experiment:
Let’s do a simple experiment, take two combs and place them over each other,and then move slowly over each other.You observe the pattern appearing as move.
In computer graphics , we can observe the Moiré Pattern when combining similar or different shapes . In this video,the two similar patterns of circular wheels ,of which one is static and the other is moved across ,cause the effect due to slightly different spacing .
Let’s try creating some optical illusion of Moiré Pattern ourselves using p5.js.
Create a new project using p5.js Web Editor. The p5js Web Editor has following two functions. The setup() function runs only once and draw() function runs in a loop.
In the function draw(), make an ellipse() and put it inside the for loop .Use the variable j in the y-axis of the ellipse. You will see the circles formed vertically down.
Challenge:
Now , in the similar way make the rest of the circular tubes in different colours with equal spacing.
Next step , is to make linear grid starting from 0 to width of the canvas. Use mouse function to make the grid move in the x-axis.
Congratulations!!!.You have made the optical illusion of Moiré Pattern, which in this case the fluid moving up and down in the tubes.
This is happening because ,the two interference patterns circle and line are moved across at an angle .
If you find anything difficult, you can always check the solution code here.
For more inspiration ,check out these Moiré Pattern and try making yourself.
Resources:
1-Getting Started with p5.js- A book about programming for in p5.js.
2-p5.js Reference:References for all the p5.js functions.
3- About Moiré Pattern : Reference from Wikipedia and Britannica .
4-What are Moiré Pattern?-An interesting YouTube video by Mr.Wizard
5-The Moire Effect in Radiology:A research paper in American Journal of Roentgenology.
6-What is Moire and How it can ruin your photos:Article in Photography Life.
7- Byte Size Coding :Website with free resources tutorials for kids and beginners.
7-Byte Size Coding YouTube Channel:YouTube Channel with lots of fun ideas.
