A Study in Moiré Patterns
In mathematics, physics, and art, moiré patterns are large scale interference patterns that can be produced when an opaque pattern with transparent gaps is overlaid on another similar pattern.
Besides being areas of study in mathematics and physics (e.g. in image processing and computer vision) they have real world applications like bank note forgery detection.
But as art itself, moiré patterns can be beautiful and hypnotic.
They are particularly suitable for visualization as procedurally generated art, and can create some really interesting optical illusions.
I was inspired by the below excellent Numberphile video on how random dots arranged on a page can create stunning optical dot illusions, and I wanted to duplicate the effect on an interactive medium.
So I coded up this interactive piece: A Study in Moire Patterns
Using D3 + Greensock
D3 (Data-Driven Documents) is an extremely popular javascript library often known for its use in creating data visualizations.
However, it can also be used to create all kinds of fun code art experiments that have little to do with data visualization.
If you want to create SVG on the fly, I would well recommend D3. It is well supported, has excellent traction and there are lots of resources to find information. D3 is really excellent when it comes to binding data to the views.
For animation, my go-to library is Greensock.
Sure, there are tons of other animation libraries out there. You can even do some nice transition work in D3. If it is simple, you can even just use CSS.
However I really like Greensock as it is pretty robust, and more importantly it provides a useful mental framework for animation using timelines and tweens.
The rest of the project used Bootstrap for easy responsive layout, and JQuery and JQuery UI was added to hook the interface together.
One of the best things about vector-based graphics like SVG is that they are size invariant, and can look equally sharp on desktop to mobile.
There are tons of good reasons why animated SVG are a great way to build animations.
Code time
I’ve put up a few examples used for this project on bl.ocks.org, a viewer for mainly D3 code on Github’s Gist. (This, like D3, is created by Mike Bostock).
In them, you will see that the actual code is not that complicated. Draw the SVG using D3, then animate it using Greensock.
Final thoughts
The reason why we are able to build beautiful code so easily now is because of the amazing amount of high quality libraries, platforms and packages being released by the tech community as a whole.
So as coders we owe a huge debt to all the free tools and libraries we use to build our stuff.
At the same time it can easily feel overwhelming, and you constantly wonder why there are always so many things to learn. Here’s a humorous take on take on that. If you work in the frontend space, you’ll grok it immediately. :D
Perhaps the answer is that there is no need to be an expert in everything because the simple answer is that you can’t be.
Just focus on an area that you like and work on that. Eventually like any craft if you do enough work in an area, you will acquire some experience and be better at it.
Once in a while, go learn something new because you are intrigued by something, not because it is the “next best thing” you need to learn.
And that is the way to keep the passion for your craft alive. :D
