21

Not sure if this is where I should be posting something like this, but here goes.

I wrote a small program today that maps 512 evenly-spaced points on the edge of a circle, and then, iterating over each point, draws a line from the center to that point on the edge.

Also this image is drawn on a canvas that is 500x500 pixels in size.

The result is the image below, and where my question arises

enter image description here

What's curious about this image to me is that there are these little diamonds that are appearing at various points in the circle.

Is there an explanation as to why these shapes are being produced?

lee
  • 825
Delfino
  • 321

2 Answers2

40

That is a Radial Moire pattern. The Wikipedia article on Moire patterns doesn't currently mention the radial version, but it is below for reference: https://en.wikipedia.org/wiki/Moir%C3%A9_pattern

As of this writing, the website: http://thomasshahan.com/Radial/ Provides an example: Radial Moire pattern

That is a snip from a portion of it. Its not as good as yours, I suspect because it is widening the lines the further they are from center. You weren't sure where to post it, I recognize it from general Moire patterns that are encountered in computer science/graphics.

Anti-aliasing should help reduce it: https://en.wikipedia.org/wiki/Anti-aliasing Which usually requires multiple pixels per line width with various shading.

An example of such code is at: https://www.codeproject.com/Articles/13360/Antialiasing-Wu-Algorithm

Simple image from that site: enter image description here

Notice that the Anti-aliased lines appear thickened. Another image from that last site zooms in on some lines: enter image description here

B. Young
  • 520
  • I have made some edits since I was given the first 2 reputations. My first 2 reviewers may want to re-review my edits. – B. Young Jan 14 '21 at 21:16
  • 4
    Not sure if I should make another question for this, but I observe from the pattern that whenever I scroll up or down it appears there's briefly these circular field-like images that extend from the center. Is that part of this Moire effect? – Delfino Jan 15 '21 at 02:11
  • 1
    @Delfino Yes, that's normal. – phyrfox Jan 15 '21 at 04:19
  • 10
    @Delfino That scrolling artifact is caused by a different effect (so worth a new question). Summary: it's caused by the screen LCD pixels having different response times when going bright vs. going dark. So, that one is definitely physics. – Ralf Kleberhoff Jan 15 '21 at 08:36
  • 2
    I think the thickening is due to the lack of gamma correction. It would increase brightness of the a-bit-lighter-than-black pixels, which would then contribute less to the perceived line width. – Ruslan Jan 15 '21 at 09:34
  • See also: https://en.wikipedia.org/wiki/Vernier_scale – Kaithar Jan 15 '21 at 20:48
  • @Ruslan Perhaps, but the Web standard sRGB colour space uses gamma correction, and PNG has an sRGB chunk. (Note that the sRGB transfer function is linear for data values close to zero). However, we don't know what the OP's tool chain is doing, and incorrect gamma handling is possible. Correct shading calculations should be performed in a linear space, not on data that already have gamma applied. And of course, there are limitations imposed by using 8 bit data & finite pixel size. – PM 2Ring Jan 16 '21 at 11:25
  • @PM2Ring My comment was based on the often-seen descriptions of e.g. the Wu algorithm, that implicitly assume linear color space, and if one is following them naively, e.g. by directly writing into the framebuffer, this will result in gamma-incorrect render. As for the exact image at hand, I've actually checked it now: on one of the lines the gradient goes as the following sRGB values (obtained by GIMP's screen color picker): 5,37,84,129,174,220. A simple point plot reveals that it's linear, and thus gamma-incorrect. – Ruslan Jan 16 '21 at 12:43
  • @Ruslan Nice detective work! Yes, those numbers look pretty linear. I expect modern graphics library code to handle things like gamma correctly; OTOH, it doesn't surprise me much when it doesn't. ;) I can't blame the average coder for not being aware of such issues, especially if they're still fairly new to graphics coding. Just reading the Wikipedia pages on CIE colour spaces is enough to make your brain melt. ;) However, graphics library coders have no excuse for such ignorance. But anyway, a Physics SE comment thread probably isn't the place for such discussions... – PM 2Ring Jan 16 '21 at 16:27
  • This answer relies primarily on giving links rather than putting the answer here. – Acccumulation Jan 17 '21 at 07:14
16

The pattern formed is called Moire pattern which appears when two or more repetitive structures (such as screens, grids or gratings) are superposed or viewed against each other. This is an interference pattern produced between superposed layers with periodically modulated transmittance and close geometrical characteristics (period and orientation). The mathematical representation of such interference is the point-by-point multiplication of the reflectance/transmittance functions of the superposed (overlaped) gratings.

A simple example is obtained by taking two identical ruled transparent sheets of plastic, superposing them, and rotating one about its center as the other is held fixed as shown in the following figure:

1

The visual appearance of the Moire patterns depends on the characteristics of gratings and on the location of the observer. The visual displays can either be static or dynamic. The dynamic displays are CRT TV, LCD, and OLED, whereas static displays are a printed picture or photograph. In visual displays, the Moire effect may create undesirable visual effects.

Moire patterns can also be created by plotting series of curves on a computer screen. Here, the interference is provided by the discretization of the finite-sized pixels. A few more examples are as follows:

2

Richard
  • 1,985
  • 9
    To add to your "plotting series of curves on a computer screen", further explaining that it is due to "the discretization of the finite-sized pixels" -- that is to say, one wouldn't get such patterns if displayed on a vector display. This is also the reason why a similar pattern is used on printer test pages: to show how much detail (and how uniformly) it can print without causing interference patterns. – noughtnaut Jan 15 '21 at 16:25