随机bezier blob?

时间:2014-04-02 16:30:57

标签: actionscript-3 flash actionscript bezier

我有一些ActionScript3代码用于创建类似液体的"飞沫",当它们首次生成时,它们看起来像一个弯曲的正方形(就像'关闭,因为我可以让他们成为一个圆圈)。我在这里尝试过很多次失败,但我的目标是让这些水滴看起来更有机和自由形态,就像你在开始滴水之前仔细观察挡风玻璃上的雨滴一样。

以下是我所拥有的:

var size:int       = (100 - asset.width) / 4,
    droplet:Shape  = new Shape();

droplet.graphics.beginFill(0xCC0000);
droplet.graphics.moveTo(size / 2, 0);
droplet.graphics.curveTo(size, 0, size, size / 2);
droplet.graphics.curveTo(size, size, size / 2, size);
droplet.graphics.curveTo(0, size, 0, size / 2);
droplet.graphics.curveTo(0, 0, size / 2, 0);

// Apply some bevel filters and such...

产生如下形状的液滴:

Droplet example

当我尝试在大小或整数中添加一些随机性或在上面的代码中添加更多曲线时,我最终得到锯齿点和一些线重叠/反转。

我真的希望有一个擅长数学或更好的逻辑的人可以看到一些明显的东西,我需要做的是让我的圆角正方形实现与此类似的形状随机性:

Water droplet example

1 个答案:

答案 0 :(得分:0)

首先,使用0.55228 * size而不是半尺寸(与贝塞尔曲线相关,有时称为kappa),您可以使用贝塞尔曲线获得实际的圆形圆圈。它只适用于你使用四个段,而另一个提示的位置:你拥有的点数越多,你的形状就越“爬行”,所以你可能真的想要更多的段,在这种情况下它会变成更容易在圆上简单地生成多个点(使用良好的旧正弦和余弦函数以及规则间隔的角度相当直接),然后通过这些点得出多段Catmul-Rom曲线。 Catmul-Rom曲线和Bezier曲线实际上是相同曲率的不同表示,因此您可以非常简单地从一个曲线转换为另一个曲线,在http://pomax.github.io/bezierinfo/#catmullconv进行解释(如果您没有,则该部分的最后一项给出了翻译关心数学)。然后你可以随心所欲地引入随机旅行(当它们距离底部点太远以使得粘雨看起来时,使得上部点稍微更粘并且“猛拉”它们)