为了编写”小贱钟“PlotClock的模拟程序，使用了Processing。学习到了Processing的另一种领域的用法，用于进行艺术创作。可以创作各种静态的”画作”，或是动态的交互艺术。感觉像是严谨精确的数学计算，与跳跃、奔放的艺术融合在了一起，产生了非常奇妙的效果。
image.png
使用Processing，只需要简单的一些代码就可以产生很神奇的效果。今天做了一个简单的例子用于熟悉相关的函数。
基础方法介绍
noise函数
noise函数主要用于产生平滑的随机数。用给一个比较好理解的类比，调用noise函数对应着一条生成好的波浪线，波浪线的值，在0-1之间。
noise
noise函数接受的参数就是X轴的坐标，然后返回Y坐标对应的值。两次传给noise的坐标值差距越小，返回的y值的差距就越小，换句话来说也就是越平滑。
例如，noise(0.001)，noise(0.002)的结果就比noise(0.1)，noise(0.2)的结果更平滑。具体需要多大的平滑程度我们可根据需要的记过来进行调整。
创作步骤
让直线的位置随机变化
我们看一下具体的代码
//定义x方向和y方向的噪声参数
float _xnoise, _ynoise;
void setup(){
size(500, 500);
//每次启动随机生成一个0到10之间的造成参数初始值
_xnoise = random(10);
_ynoise = random(10);
}
void draw(){
//每次绘制，x方向和有方向噪声参数增加指定的步长
_xnoise +=0.01;
_ynoise +=0.02;
//利用噪声参数生成线段两端的坐标，width、height是绘图窗口的宽和高
float x1 = noise(_xnoise)*100;
float y1 = noise(_ynoise)*100;
float x2 = width/2+noise(_xnoise)*200;
float y2 = height/2+noise(_ynoise)*200;
//绘制直线
line(x1, y1, x2, y2);
}
运行代码可以看到一下的效果：
line_noise.gif
可以看到，直线在绘板之内随机的移动。
改变颜色
上一步得到了移动的直线但是黑黑的一坨，不是很美观，我们可以简单的为颜色增加一些变化。使用如下的代码：
//使用X周的噪声参数成成一个颜色噪声
_strokeCol = map(noise(_xnoise),0,1,80,254);
//设置颜色的值，透明度设置为百分之四十，方便体现重叠的效果
stroke(_strokeCol,40);
增加之后得到如下的效果：
line_noise_color.gif
让直线转动
我们让直线转动起来增加更多的效果。为了让线段围绕线段的中点旋转起来，我们需要修改绘制直线的方法。之前是直接由噪声的到坐标。现在我们需要修改为以下的方法：
- 由噪声方法计算出线段的中点
- 根据线段与X轴的夹角以及线段的长度计算出端点的坐标
以上的过程简要的方法如下：
//根据窗口的尺寸，计算使用噪声计算中点的坐标
float centerX = width/2-50+noise(_xnoise)*100;
float centerY = height/2-50+noise(_ynoise)*100;
代码中获取了窗口宽高的一半之后，又减了50。这是因为在获取了噪声值之后为了让变化明显，面对噪声值放大了100倍。噪声返回值是0到1之间的数值，放大100倍之后，就是0到100之间的值。加上宽度或高度的一半之后，中心点就向右下方便宜了。为了让中心还是落在绘制区域的中心区域，所以减了噪声最大值100的一半。这就是为什么要减50的原因。
使用如下的代码，可以根据线段的宽度计算出端点的坐标：
//每次转动的弧度增加0.003；这个值是我自己尝试的，改变这个值可以获得不同的转动速度
_angle +=0.003;
//_radius 为线段长度的一半。
//为了保持线段的长度是变化的，为长度增加一个噪声
_radius = 60 + noise(_xnoise)*200;
//使用三角函数根据角度计算端点的坐标
float x1 = centerX + (_radius * cos(_angle));
float y1 = centerY + (_radius * sin(_angle));
float x2 = centerX + (_radius * cos(_angle+PI));
float y2 = centerY + (_radius * sin(_angle+PI));
line_noise_round.gif
通过以上的代码，我获得的效果比一开始的版本提升了打的幅度。通过调整不同的参数，可以得到不同的的效果，后续还将把联系的效果陆续发布出来。
网友评论