为什么径向渐变在重叠时会出现这样的情况?

问题描述 投票:0回答:1

我有一个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

p5.js
1个回答
2
投票

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

莫尔图案是大尺寸干涉图案,当具有透明间隙的不透明刻划图案覆盖在另一个相似图案上时,可以产生这种干涉图案。

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

莫尔效应的本质是(主要是视觉)感知明显不同的第三模式,这是由两个相似模式的不精确叠加引起的。

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

减轻或几乎消除莫尔模式行为的一种简单方法是增加中风重量。

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

strokeWeight(1);

几乎消失了:

strokeWeight(2);
© www.soinside.com 2019 - 2024. All rights reserved.