What causes the effect in the Sonos logo?


Question

Below is the new Sonos logo.

When you scroll up and down with the image on screen, it looks like sound waves are pulsing outward.

What causes this effect to occur?

enter image description here

1
36
2/17/2015 8:26:00 PM

Accepted Answer

It's called a Moiré pattern.

It forms when two 'grid' patterns (loose term that could apply to geometric lines, dots, etc.) are overlaid with each other and moved.

In this case, the two 'grid patterns' are the image, itself (which is geometric lines) and the pixel based screen-refresh of your screen.

A similar effect is when newscasters would wear tightly striped patterns on TV: https://www.youtube.com/watch?v=jXEgnRWRJfg

33
2/17/2015 8:35:00 PM

Moiré of the pattern overlaying itself

The pattern of the logo creates a surprising visual appearence of motion when it is shown on an LCD* and the view is scrolled by small fractions of the pattern size.

The effect seen when scrolling the image up and down is a Moiré pattern.
This kind of pattern appears when two regular line patterns overlay.
The two patterns, in this case, are both from the same image:

It's the current screen image over the afterimage of the previous screen state in the brain of the viewer.

The pattern in the logo image is called "Siemens star":

Siemens star cropped

(From forum.luminous-landscape.com)

Now, let's see how it looks when adding a 50% transparent layer with the same image, and shifting it down by some pixels:

Shifted down by 3 pixels:

Shifted down by 3 pixels

Shifted down by 10 pixels:

Shifted down by 10 pixels


Why pulsating?

Notice how the moire pattern has a different size - it gets larger for more offset. This explains the pulsating effect you can see while scrolling: The scrolling is not using equal steps, so the offset varies a little.


* The effect does not depend on using an LCD. It should occurr very similar on any display based on a physical pixel matrix. On CRT displays, the effect may be harder to observe. One reason is that the artifacts of the CRT display concept are such that they may interfere easily here. Also, an important difference between CRT and LCD is that a CRT represents a pixel usually a little too unsharp, compared to an ideal image, while an LCD typically shows pixels too sharp (!) - sharper than they should ideally be. As the Siemens star pattern is making explicit use of the upper limits of the display resolution, the difference has a strong influence.


Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^