从技术角度解析艺术家 Vamoss 的作品“粒子”

（如看不到图片下的动图，请点击上面的文件链接）

之前自学过一阵，也做了些习作，但像这样的作品对我个人而言，还是挺难的。所以今天就聊聊，这个只有几十行代码，仅有4K大小的作品，做起来都需要你掌握什么基础知识。

一、你得是一位掌握了 JavaScript 编程的艺术家
这是最基础的部分，难度并不算高。作者需要知道：

• 如何定义变量、函数和对象。
• 如何使用循环、条件判断。
• 如何使用数组保存几千个粒子。
• 如何让画面每秒更新几十次。
• 如何响应鼠标操作。
  例如：
  blob.x += blob.direction * x * stepsize;
  blob.y += blob.direction * y * stepsize;
  这两行代码的意思是：根据计算出来的方向和速度，不断改变一个粒子的位置，假如一秒钟执行60次，粒子就会在屏幕上连续运动。这部分属于比较常规的编程知识，有一定 JavaScript 基础的人，经过学习和练习就能掌握。

二、真正有意思的是数学，例如这些代码：
case 0: return Math.sin(x);
case 1: return Math.sin(x5)y0.3;
case 2: return Math.cos(xy);
case 3: return Math.sin(x)*Math.cos(y);
case 4: return Math.cos(x)yy;
这是作品的核心，作者实际上设计了12组不同的数学运动规则。例如：
function getSlopeX(x,y){
return Math.cos(y);
}

function getSlopeY(x,y){
return Math.sin(x);
}

这两个函数决定了粒子在某个位置应该朝哪个方向运动。把它们写成数学形式，就是：

\frac{dx}{dt}=\cos(y)

\frac{dy}{dt}=\sin(x)

这是一组微分方程所描述的动力系统，不过，程序并没有使用复杂的微分方程求解器，而是采用了简单的逐步数值积分方法，每计算一次，粒子就移动一点，经过成千上万次计算，便形成屏幕上看到的那些曲线。为什么这些曲线那么漂亮？因为数学函数本身就能产生非常丰富的运动结构。
例如：

• 正弦函数可以产生周期性的变化。
• 余弦函数可以形成不同的弯曲轨迹。
• 三角函数组合可以产生旋转和环绕运动。
• 非线性函数可以形成复杂的轨道和分岔。
  而且，这些轨迹并不是作者事先画好的，它们是在程序运行过程中自然形成的，这就是生成艺术特别迷人的地方。

三、作者还需要理解一点物理学
这里说的不是复杂的量子物理，而是经典力学中关于运动的基本概念，比如速度、方向、位置和时间。
var stepsize = deltaTime * 0.002;
deltaTime
则是两帧画面之间经过的时间，作者用它来调整粒子的运动步长，这样做可以减小不同计算机帧率对运动速度的影响。
而下面这个变量：
direction : random(0.1, 1) *
(random() > 0.5 ? 1 : -1)
则让粒子随机选择运动方向和速度系数，有的粒子顺着向量场运动，有的逆着运动，于是同一组数学规则就能产生不同的轨迹。这其实与研究流体运动时使用的数学思想有相似之处。但要注意：这个程序不是流体模拟，而是一个二维向量场粒子系统。两者有联系，却不是一回事。

四、艺术家的视觉设计能力
总这个作品分析，作者选择了五种颜色：
深紫红 #581845 酒红 #900C3F 洋红 #C70039 橙红 #FF5733 金黄 #FFC30F
背景则是：#1a0633

它让暗色轨迹融入背景，而橙色、黄色轨迹成为视觉焦点。另外，作者还使用了一个非常巧妙的方法：
fill(26, 6, 51, 10);
rect(0, 0, width, height);
每一帧都在画面上覆盖一层透明度很低的深紫色。所以旧轨迹不会立刻消失，而是慢慢变暗，从而形成一种类似长时间曝光摄影的视觉效果。这部分就不只是编程了，而是艺术家的视觉判断。

五、最难的是把数学变成艺术
我觉得这是整段程序最值得欣赏的地方。假如我们把作者的12组数学公式全部写在纸上，它们其实没什么特别，甚至会让人感觉到枯燥，但这个作品可以让用户通过鼠标决定粒子从哪里出现，让粒子沿着数学向量场运动，之后让运动留下轨迹，而不是只显示粒子的位置，最后，、每隔三秒切换一组数学方程。这就产生了一种很有趣的关系：作者设计规则，观众参与创作，数学决定结果。观众可以控制起点，却不能完全预测最终形成的图案。

这正是生成艺术（Generative Art）的典型特征。

六、最后，来说说写出这样的程序到底有多难？

能力 需要的水平

JavaScript 中级

p5.js 图形编程 初级至中级

三角函数 高中水平

微分方程与动力系统 有基础概念即可，深入理解更有帮助

数值计算 基础

色彩与视觉设计 需要一定审美能力

生成艺术创作 需要探索和实验能力

如果是一位熟悉 JavaScript 和 p5.js 的程序员，模仿这个作品并不困难。但如果要求他从零构思出这种视觉效果，并设计出一组组有趣的运动规律，难度就明显增加了。程序能不能运行是一回事，运行出来的东西好不好看是另一回事。

比如这段：

case 7:
return Math.sin(y*0.1)*3;

旁边有作者留下的注释：
//orbit
意思是轨道。

而另一组公式旁边写着：
//two orbits
两个轨道。

这说明作者并不是单纯地随机拼凑数学公式，至少对于这些特定规则，他知道自己想得到什么样的运动结构，这很可能经历过反复实验、观察和调整。

七、最后说说我的判断

如果把这段作品拆成三个层次：

第一层：让粒子动起来。

这是编程技术，比较容易学习。

第二层：让粒子按照复杂而有趣的规律运动。

这是数学与编程结合，需要更多知识。

第三层：让运动本身具有美感，并且允许观众参与创作。

这是艺术设计能力。

我认为第三层最难。

而且还有一点很有意思：

这段作品的代码并不复杂，甚至算不上特别精巧，但它产生的视觉效果远远超过了代码本身的复杂程度。

这恰恰是优秀生成艺术作品的一种特征。