: What causes the effect in the Sonos logo? 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

@XinRu324

The moire effect and similar visual effects are a, likely big, part of the story. However, with LCDs you have an extra twist that depends on the LCD model:

The reponse time (time for a pixel to change state to what is needed) depends on the grey levels (begin and end).
www.lagom.nl/lcd-test/response_time.php#response_time_gif
The lines, especially thin ones, present a multitude of greylevels to the monitor and they are not distributed evenly, thus adding actual physical shifts to the ones perceived anyway. Use the test obove as an indicator how much your LCD falls victim to this effect.

Vote Up Vote Down

@Sue6373160

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":



(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 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.

Vote Up Vote Down

@Vandalay110

The Moiré pattern is part of the cause, but another factor (since it's more noticeable when you scroll) is the refresh rate of the screen, and the fact that not all lines update at once. It usually updates line by line horizontally, and this distortion combined with the Moiré makes the pulsating effect.

Vote Up Vote Down

@Holmes874

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:

Vote Up Vote Down