主要内容
波
如果你对自己说,“很好,目前一切顺利,但我真正想要的是在屏幕上绘制一个波浪,”那么,时机已到。事实是,我们已经接近90%的成功了。当我们根据正弦函数一个上下震荡的周期时,需要做的事情是观察波浪图形中x轴上的单个点。借助一点勇气以及一个for循环,我们可以将一大堆这样的摆动圆圈彼此关联的摆在一起。
这种波浪形图案可以用于生物的身体或附属物的设计,也可以用来模拟柔软的表面 (如水)。
在这里, 我们将遇到同样的振幅 (图案高度) 与周期问题。然而, 由于我们关注的是全波, 可以把周期作为全波周期的宽度 (以像素为单位) 来讨论, 而不是指时间。而就像简单振荡一样, 我们可以选择根据精确周期或简单地遵循角速度模型来计算波的模式。
让我们来看看更简单的情况,角速度。我们知道我们需要从角度、角速度和振幅开始:
var angle = 0;
var angleVel = 0.2;
var amplitude = 100;
然后我们将遍历所有的
x
值,我们要在其中绘制一个波点。假设每24个像素一点。在这个循环中,我们要做三件事:- 根据角度的振幅和正弦计算
y
位置。 - 在 (
x
,y
) 位置画一个圆圈。 - 根据角速度增加角度。
for (var x = 0; x <= width; x += 24) {
// 根据振幅和角的正弦计算y
var y = amplitude * sin(angle);
// 在 x, y 位置绘制一个圆
ellipse(x, y+height/2, 48, 48);
// 根据角速度增加角度
angle += angleVel;
}
让我们看看
angleVel
在不同值时的结果:请注意, 虽然我们没有精确地计算波的周期, 但角速度越大, 周期就越短。同样值得注意的是, 随着周期的缩短, 随着各个点之间距离的增加, 要使波本身变得越来越困难。我们的一个选择是使用
beginShape()
和 endShape()
将点与线连接。上面的示例是静态的。波浪永远不会改变,永远不会波动,这是我们一直在努力的目标。这个为波浪做动画的额外步骤有点棘手。你的第一本能可能会说:“嘿,没问题,我们只要让角度成为一个全局变量,通过
draw()
,让它从一个周期到另一个周期。”虽然这是一个很好的想法,但行不通。如果你观察静态绘制的波,右边缘与左边不匹配;它以
draw()
的一个周期结束,无法在下一个周期开始。所以,我们需要做的是创建一个变量,找到波应该开始时角度的值。这个角度 (我们称之为 启动角度 startAngle
) 根据其自身的角速度递增。就是这样,它与启动角度结合。尝试更改不同数字, 看看振荡波发生了什么变化。
“自然模拟”系列课程是由 Daniel Shiffman 的 "编程的本质" 衍生而来,基于 知识共享 著名-非商用性 3.0 本地化许可协议。