【创意编程】《暗潮》：processing随机游走及噪声之美

【创意编程】暗潮：processing随机游走及噪声之美

在读《代码本色》的时候看到泊林噪声，一下子觉得这个东西可能是个非常有意思的东西。书后说perlin噪声能够产生很多自然界的纹理、模拟流场运动，就想起很久之前在公众号上看到的一个用随机游走的粒子来描绘水流的案例。
于是写了这样的一个东西：
效果是这样的。博客传不上来5M以上的gif，只能尽量压缩时间帧率和采样率。
最初粒子是随机均匀分布在画布上的，经由噪声的作用变换轨迹。

这里我给所有的粒子添加了一个二维噪声，取粒子当前的位置为构造噪声的参数，故粒子在相同位置时噪声值是相同的。这样必然会造成的结果是它们将呈现某种固定的趋势，且随时间增加它们很有可能会合并。

结果的确出现了这样的趋势：

（这里因为截图的时候是分开截的，所以不是同一次运行的结果，轨迹有偏差，但是我影响我们观察粒子合并的趋势。）

我们首先创建一个粒子系统。

ArrayList<Particle> particles;
particles = new ArrayList<Particle>();
for (int i = 0; i < 6000; i++){Particle p = new Particle();particles.add(p);}

这样我们就创建了一个具有6000个粒子的系统。我们需要重复利用这些粒子，让他们永远出现在屏幕中，避免程序运行之后粒子的数量越来越少。我们就需要时刻判断粒子是否超出边界。需要对每个粒子用到边界检测：

  public void boundaryDetect(){if (position.x <= 0)position.x = width - 1;if (position.x >= width)position.x = 0;if (position.y <= 0)position.y = height - 1;if (position.y >= height)position.y = 0;}

这将作为粒子类的类方法，在每一帧的draw()函数中更新完粒子位置之后都需要被调用。
————

添加噪声

泊林噪声有一维和二维甚至更多维，根据需要用到的维度可以任意选择。我们在这里采用了三维噪声，因为我们在考虑时间对噪声值影响的同时还需要考虑位置对噪声的影响。我们将它写在update()方法中，每一次draw()都对每一个屏幕中的粒子调用该方法。
在噪声代码

angle = noise(position.x * 0.006, position.y * 0.004, incr) * PI ;

中，由于我们需要取噪声的角度，所以最好的方式就是在获取一个噪声值之后给它乘上PI，用于弧度计算。这里的参数对模拟效果的影响稍后说明。

  public void update(){incr += 0.001;angle = noise(position.x * 0.006, position.y * 0.004, incr) * PI ;position.x += 2 * cos(angle);position.y += 2 * sin(angle);
}

在这里，代码

    position.x += 2 * cos(angle);position.y += 2 * sin(angle);

用于使粒子的位置移动相应的偏移量。之所以在这里引入三角函数，是因为我们希望这群粒子始终都平稳地变化，而不是有抖动效果的剧变。我们可以让他的运动范围限制在一定的范围内且不超过某个固定值。那么能够实现这样的约束的，三角函数是最简便易懂的方法。sin值和cos值都不会超过[-1,1]的范围内，也就是说粒子在一帧内的运动永远不会越过以其位置为中心的单位为1的圆。
这正是我们想要的效果。

————

渐变颜色

我们规定，一个粒子的颜色是由它产生时的位置决定的，这样有利于营造出整个画面的渐变感以及色彩的层次感。一个粒子在画布中将呈现什么颜色由它出生时的位置决定也不再能够更改，而我们将画布的宽映射到（0,255），就可以根据位置来线性的改变颜色中的G值，使粒子系统呈现渐变的紫色色彩。

  Particle(){position = new PVector(random(width), random(height));float adj = map(position.x, 0, width, 0, 255);col = color(255, adj, 255);}

至此，关键代码已经解释完成，完代码如下：

主要控制类：

ArrayList<Particle> particles;void setup(){size(1600, 900);background(0);noStroke();particles = new ArrayList<Particle>();for (int i = 0; i < 6000; i++){Particle p = new Particle();particles.add(p);}
}void draw(){frameRate(40);fill(0, 10);rect(0, 0, width, height);loadPixels();for (Particle p : particles){p.update();p.boundaryDetect();p.display();}updatePixels();
}

粒子类：

class Particle{//eccential elementsPVector position;color col;//otherfloat incr;float angle;Particle(){position = new PVector(random(width), random(height));float adj = map(position.x, 0, width, 0, 255);col = color(255, adj, 255);}public void update(){incr += 0.001;angle = noise(position.x * 0.006, position.y * 0.004, incr) * PI ;position.x += 2 * cos(angle);position.y += 2 * sin(angle);
}public void boundaryDetect(){if (position.x <= 0)position.x = width - 1;if (position.x >= width)position.x = 0;if (position.y <= 0)position.y = height - 1;if (position.y >= height)position.y = 0;}public void display(){pixels[(int)position.x + (int)position.y * width] = col;}
}

下面我们来看一下有关上面所描述的关键噪声代码的参数的选择是怎样进行的：
如果将噪声中的PI改为TWO_PI则效果将是：

变为3*Pi的效果：

似乎有一点点像纹理了。