21
$\begingroup$

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?

$\endgroup$
1
  • $\begingroup$ Comments are not for extended discussion; this conversation has been moved to chat. $\endgroup$ – tpg2114 Jan 20 at 0:54
40
$\begingroup$

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

$\endgroup$
10
  • $\begingroup$ I have made some edits since I was given the first 2 reputations. My first 2 reviewers may want to re-review my edits. $\endgroup$ – B. Young Jan 14 at 21:16
  • 4
    $\begingroup$ 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? $\endgroup$ – Delfino Jan 15 at 2:11
  • 1
    $\begingroup$ @Delfino Yes, that's normal. $\endgroup$ – phyrfox Jan 15 at 4:19
  • 10
    $\begingroup$ @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. $\endgroup$ – Ralf Kleberhoff Jan 15 at 8:36
  • 2
    $\begingroup$ 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. $\endgroup$ – Ruslan Jan 15 at 9:34
16
$\begingroup$

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

$\endgroup$
1
  • 8
    $\begingroup$ 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. $\endgroup$ – Noughtnaut Jan 15 at 16:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.