Monday, October 30, 2017

When the moon hits your eye like a big pizza pie that's a Moiré.
- Dean Martin
Actually, Dean said "That's amore"
Amore is Italian for love.
Moiré is a more recent word that came into use around 1958 after we began using color TVs.

A moiré pattern is the result of drawing fine lines on two transparencies and moving one over the other.
Any time there are two repeating patterns they can interfere with each other.

On a color TV, fine lines can cause color moiré patters by interference with the rows and columns of red, green and blue dots. That is why newscasters wear solid ties, shirts and jackets, never pinstripes.

Fine lined repeating patterns displayed on a computer monitor interfere with the rows and columns of RGB dots.

Printers produce moiré patterns when the image interferes with the pattern the ink jet nozzles make when they pass in straight lines across the paper.

Moiré effects can be a bothersome side effect that ruins photos and video.

I recently decided to explore using patterns to create moiré effects in animated wallpapers.Here is one screen of notes from my experiments.

Click to enlarge

Simple moiré patterns can simulate waves on a lake, a waterfall, a flickering candle, or a forest fire.
In this case I wanted a hypnotic pattern on a sun.
The usual frame animation approach presents huge problems.
Consider a sun that is 300 pixels in diameter. That's 300 x 300 = 90,000 pixels.
We need three 8-bit bytes for each pixel so that is 24 bits times 90,000, or 2,160,000 bits.
So we need a little more than two megabits per frame.
At 30 frames per second for a pattern that lasts 15 seconds before it repeats, we need a total of 450 frames. Multiply 450 times 2,160,00 bits and get 97,200,000 bits, (12 megabytes)

Obviously, twelve megabytes of images being loaded from disk one frame at a time would kill the hard drive, or use up a lot of cache memory. If I load the entire set of frames into memory then the processor can put them on the screen one frame at a time. But, that uses up a lot of ram and 30 frames per second, the CPU has to move 8 MB per second into the display memory. Testing shows it uses about 9 percent of my CPU on my laptop. It can easily do it, but seems a total waste for a wallpaper.

Moiré to the rescue.
To create the moiré effect, I only need one 300x300 image. I display it twice, one on top of the other. Then 30 times a second., the CPU rotates the bottom image 1 degree. This requires almost no effort on the part of the CPU, The actual task of rendering the pattern is done by the GPUs in the video card.

By comparison, to the 9% CPU usage for the frame method, the task manager shows less than 1% CPU usage and a GPU usage increase to only 2% for the moiré effect.

Since most of the work is done by the video cards GPUs, this is called "Offloading" the work to the GPU to free up processor resources.