Processing——练习记录,转动的线段

为了编写”小贱钟“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

通过以上的代码，我获得的效果比一开始的版本提升了打的幅度。通过调整不同的参数，可以得到不同的的效果，后续还将把联系的效果陆续发布出来。