叠加时，为什么径向渐变会像这样出现？

Question

我有一个p5.js草图，可在浏览器窗口的画布上绘制径向渐变。它们看起来应该是应有的样子，除非两个或多个重叠，看起来像这样：。

这是用来绘制径向渐变的类：

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();
    };
}

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

编辑2 ：code in p5.js editor

Answer 1

重叠的椭圆将创建moiré patterns。

  

摩尔纹图案是大规模的干涉图案，当具有透明间隙的不透明直纹图案覆盖在另一个相似图案上时会产生。

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

  

莫尔效应的本质是（主要是视觉上）对明显不同的第三种图案的感知，这是由于两个相似图案的不精确叠加造成的。

这说明了为什么在此问题的代码中图案仅出现在椭圆集重叠的位置。当发生重叠时，我们会得到一个与每个单独模式相似但不完全相同的复合模式。

减轻或几乎消除莫尔条纹行为的一种简单方法是增加笔划重量。

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

strokeWeight(1);

几乎消失了：

strokeWeight(2);