← Previous     ↑Up to portfolio     Next →

Here’s an example of a Moire pattern. One ring of radiating black and white spokes is drawn at the center of the window. The other ring follows your mouse. Try bringing the centers close together!

To control this animation, first click your mouse on the picture and then use the following keys:

  • s   make everything slower
  • S   make everything faster
  • y   move center upwards with respect to the mouse
  • Y   move center downwards with respect to the mouse

Note that due to the variety of browsers, the moving center might not be centered on your mouse. If this bugs you, use the y and Y keys to adjust it up or down in small steps. Remember that the speed and smoothness of the animation is entirely dependent on your computer and what else it’s doing at the moment!

Download the source code here.