为什么径向渐变在叠加时会出现这样的效果？

Question

我有一个 p5.js 草图，它在浏览器 canvas 上绘制径向渐变 window。它们按应有的方式显示，除非两个或多个重叠，当它看起来像这样时：.

这是绘制径向渐变调用的class：

function Grey()
{
    this.radius = int( random( 10, 200 ) );
    this.x = random( 0 + this.radius, width - this.radius );
    this.y = random( 0 + this.radius, height - this.radius );

    this.display = function()
    {
        push();
        for ( var i = 1; i <= this.radius; i++ )
        {
            var c = int( map( i, 1, this.radius, 0, 255 ) );
            stroke( c );

            ellipse( this.x, this.y, i, i );
        }

        pop();
    };
}

edit：我已经尝试了所有可用的混合模式，都没有比默认的更好BLEND。

编辑 2：code in p5.js editor

Answer 1

重叠的椭圆正在创建 moiré patterns。

Moiré patterns are large-scale interference patterns that can be produced when an opaque ruled pattern with transparent gaps is overlaid on another similar pattern.

在这种情况下，我们有间隔很近的圆形线。

The essence of the moiré effect is the (mainly visual) perception of a distinctly different third pattern which is caused by inexact superimposition of two similar patterns.

这解释了为什么在这个问题的代码中，模式只出现在椭圆组重叠的地方。当发生重叠时，我们得到一个与任何一个单独的模式相似但不完全相同的复合模式。

减少或几乎消除波纹图案行为的一种简单方法是增加描边粗细。

在我的实验中，我可以清楚地看到出现的模式

strokeWeight(1);

并且差点消失：

strokeWeight(2);

为什么径向渐变在叠加时会出现这样的效果？

Why do radial gradients appear like this when overlaid?

p5.js