Note: This document is a work in progress. If you have any comments, corrections, or suggestions, please email me at 1337arts@gmail...

Background Information

Moiré patterns occur when you have two striped images of similar periodicity overlaid one on top of one another. Superimposing the two images (e.g., by printing them out on transparencies and overlaying them) effectively "multiplies" the two images together.

Let's do a quick check with our intuition:
- a dark patch (representing "0") overlaid over a bright patch (representing "1") will yield a dark patch.
- a bright patch overlaid over another bright patch will yield a bright patch
- a grayish patch (say representing "0.5") laid over another grayish patch ("0.5") will yield a darker grayish patch ("0.25").

Moiré patterns are beat phenomena between the two striped images. Consider you have image with a stripe waveform that can be described/approximated as: I1(x)=sin(k1x) and another striped image with waveform: I2(x)=cos(k2x). Superimposing one image over the other gives you an output image (by multipling the two together) of: I1(x)*I2(x) = sin(k1x)*cos(k2x). Now, recall from basic trigonometric identities, we have (product-to-sum rule):

sin(a)cos(b) = (1/2)*(sin(a+b)+sin(a-b))

So really the above can be expressed as:

I1(x)*I2(x) = 0.5*(sin(k1x+k2x)+sin(k1x-k2x))

The first term has a high frequency and our eyes don't really notice it (more on this later), but the second term has a low frequency (sometimes call the "beat frequency") and is observed as a "larger/less-fine" pattern over the area of the images. Those patterns are referred to as Moiré patterns.

*Sidenote: Overlaying two striped images with slightly different frequencies and moving one over the other is actually demonstration of both phase velocity (the speed at which the transparency moves) and group velocity (the rate at which the "pulse" formed by the interference pattern moves). MIT Professor Walter Lewin demonstrates this pretty nicely (video below), and more information can be found here and here.

How the Moiréme Demo Works

(Note: For mathematical simplicity, this discussion considers only a single vertical line of the image. All such vertical lines of the image have the same operation performed on them.)

First, consider a sine wave, sin(k*x), and a sine wave with a message encoded into its phase (via a position-dependent phase shift), sin(k*x + m(x)), where m(x) is the message we wish to encode.

As mentioned earlier, stacking two transparencies one on top of another effectively to 'multiplies' the two patterns together. So superimposing the two transparencies (the original sine wave and the one with the position-dependent phase shift) and applying the product-sum trig rule mentioned earlier yields:

output(x) = sin(k*x + m(x))*cos(k*x) = sin(2k*x+m(x)) + sin(m(x))

This is the pattern our eyes see. Because our eyes have finite size, we can only see spatial frequencies up to a certain point, so the high frequencies in the first sine term get 'blurred' out. We are left with:

output(x)observed ≈ sin(m(x))

If m(x) is confined to small angles, then sin(m(x)) ≈ m(x) and the output we see upon superposition of our two striped images is proportional to m(x)!

Now, going back to our uploaded imaged. The uploaded image (converted to grayscale) has an intensity I(x). The scripts I wrote simply converts the intensity value (e.g, for 8-bits, from 0-255) to a corresponding (small) angular shift value, then shift the "upper" image in phase by that amount. When the images are overlaid, you see (approximately) m(x), which is the image that you originally encoded.

Giving Credit Where It's Due

The moiré demonstration was developed by Stanley Hong, a former PhD student in Professor Dennis Freeman's lab at MIT. I was a student in Prof. Freeman's Signals and Systems class (6.003, many years ago...) when he demo'd this as a 'visual depiction of phase modulation.' I have reverse-engineered the code and you may upload your own images here, see them Moiré'd, and then download them to print free of charge. Everything is written in javascript, and you're welcome to right click and view the source as well. My only request is that if you do use/repost the code elsewhere, please give reference to this website, myself, Professor Freeman, and Stanley Hong.

How the Scanimation Demo Works

The scanimation demo is easier to understand than the Moiréme demo. The images are divided into repeating bands with a 1:5 ratio (see figure below). The location of the light bands is shifted by 1 width between each image in the animation, and only the light bands are kept to be used in the "bottom picture."

Let's take for example the following animated gif:

We start by converting that animated gif into a sequence of 6 static images. I did this by opening the gif in Preview and saving each frame individually. There are plenty of websites that can do this automatically for you as well.

Next, for each of these 6 images, we take every 6th column's pixel(s) (the column width can be arbitrarily chosen)...

... and smush them all together.

Running a 5:1-ratio striped pattern over the image above reveals just a single frame of the original gif to the viewer at any point in time. The user can change the frame revealed by horizontally shifting the striped image... and that's it! :)

Giving Credit Where It's Due

I stumbled across scanimations when googling 'Moiré images' online. I'm not 100% sure, but I think it has origins (or at least the origins of its popularity) in the book: Gallop!: A Scanimation Picture Book. Feel free to use anything on my site for your personal projects/applications (e.g., to make your own scanimations), but please credit this website/myself if you do use the site to make your scanimations.


Back in 2009, two of my friends (Oliver Yeh & Eric Newton) and I launched a digital camera into near-space to take photographs of the earth from high up above. We did this on a budget of $150 and published a how-to-guide online. The project received a bit of publicity, and we made a few waves on the internet.

Anyways, around that time we started a website called 1337arts (pronounced “leet arts” or “elite arts”) to showcase a variety of nerdy yet artsy science projects. Unfortunately, we never really found too much motivation to keep the website up-to-date, and it’s largely been neglected (except for the near-space photography pages which receive a fair amount of traffic from people interested in replicating our project).

I’m interested in revamping the 1337arts website to make it closer to what we originally envisioned. Obviously, this is going to take a lot of time, but I'll take things one step at a time. Feel free to contact me if you have any questions, comments, or suggestions!