提到微分艺术很多创意编程圈的朋友第一反应是“又是数学那套”。但我做了几年生成艺术之后必须说句公道话微分不是拿来背的公式它是一套描述“事物如何变化”的语言而艺术恰好是变化的美学。下面这些内容不是教材而是我从零开始用微分方程、梯度场和曲率工具做视觉项目时沉淀下来的核心机制和实战经验我会讲清楚这些数学概念怎么落地成能跑的代码也会分享几个已经实际做过的应用场景从粒子流动画到交互笔迹都能覆盖。无论你是刚接触生成艺术的新手还是想给自己的创作工具箱里加一件“有数学味道”的武器都能从里面找到能直接用的东西。1. 微分艺术的底层逻辑为什么变化率能成为创作语法1.1 导数不是公式是一台“局部高速摄像机”先聊最基础的导数。很多人听到 f(x) 就想到求导法则但在创作语境里导数更像是一台对准某个瞬间的高速摄像机它只告诉你此时此刻朝着哪个方向变化、变化得有多快。想象你开车路过一个弯道速度表上的读数和方向盘的角度就是这条路径的“一阶信息”。如果你把这些读数画出来你就会得到一条能反映运动趋势的线——这本身就是一种视觉。在视觉艺术里我们面对的任何一条连续曲线其实都可以在每一个采样点上取切线和法向量。切线告诉你曲线正往哪里伸展法向量告诉你它正在往哪个方向“推开”空间。很多所谓的“流体感”“生长感”效果本质上就是对这些局部向量的可视化。你不需要在草稿纸上算极限只需要对每个点用一个微小偏移量做差分就能得到足够漂亮的近似这个操作就是最常见的数值微分。数值微分的核心其实很简单对离散坐标点 (x_i, y_i)下一个位置的切线方向可以用 (x_{i1} - x_{i-1}, y_{i1} - y_{i-1}) 近似。这也是所有线条风格化处理的第一步。做出来之后你会发现原本普通的手绘轨迹一旦用切线方向重新定向、用速度重新分配透明度整张图立刻有了“动势”。微分艺术这个称呼并不是故弄玄虚它就是在说用变化率作为结构画面的基本语法。1.2 从“画结果”到“定规则”微分方程的创作思维搞清楚导数之后再往前走半步就是微分方程。导数描述的是“此刻的变化”微分方程描述的则是“此刻的变化如何受到此刻状态的影响”。你给出一个规则——比如速度正比于当前位置与某个吸引子之间的距离——然后让一小群点在这个规则下不断迭代最终它们会走出意想不到的轨迹。这个过程有一个非常重要的思维转变你不再直接决定最终长什么样你只决定每一步怎么变剩下的交给时间。用通俗的话说普通作图是“照着一张照片画”微分方程作图则是“在一盆水里滴一滴墨看着它如何扩散”。艺术圈喜欢讲涌现、自组织其实大部分涌现现象的底层都是微分方程在跑。著名的Lorenz吸引子、双摆、流体粒子系统它们呈现出的复杂形态并不是谁事先“画”出来的而是一组简单规则的长期推演结果。这个思维转换对创作者来说非常重要。我见过很多人一上来就想控制每个像素把自己累得半死结果画面依然僵硬。而换成分微方程的思路之后你只需要设计规则、调整参数剩下就是让计算过程自己去“长”出形态。过程中会出现大量你没想到的中间状态这些状态往往比最终成品更有意思。可以说“发挥不可预测性”是微分艺术最核心的创作优势。2. 核心机制拆解三个可以立刻上手的“微分引擎”2.1 一阶系统与欧拉法用速度场生成流动轨迹第一套可以直接用的机制是“一阶系统”。假设每个粒子的位置是向量 p我们定义一个速度场 v(p)粒子的运动规律就是 dp/dt v(p)。在数值实现里我们不需要真的去解这个方程只需用欧拉法逐步推进p_new p_old v(p_old) * dt。dt 是步长控制每次移动的距离。这个循环每跑一步粒子就在速度场上留下一个脚印所有这些脚印连在一起就是一条流线。一个经典且好看的例子是二维旋转场v_x -yv_y x。它会让所有粒子绕原点转圈形成一圈圈的同心轨迹。如果稍微加一点点非线性扰动比如把 v_x 改成 -y 0.1 * x * (1 - x^2 - y^2)轨迹就不再是完美圆而会慢慢收敛到某个极限环上画出来像一圈一圈的手写线条。下面是简化版本import numpy as np import matplotlib.pyplot as plt def velocity(pos): x, y pos vx -y 0.1 * x * (1 - x*x - y*y) vy x 0.1 * y * (1 - x*x - y*y) return np.array([vx, vy]) def euler_step(pos, dt): return pos velocity(pos) * dt pos np.array([1.2, 0.8]) dt 0.01 trail [] for _ in range(30000): trail.append(pos.copy()) pos euler_step(pos, dt) trail np.array(trail) plt.plot(trail[:, 0], trail[:, 1], linewidth0.3, alpha0.8) plt.axis(off) plt.savefig(limit_cycle_trail.png, dpi300, bbox_inchestight)这段代码跑完会得到一条逐渐绕圈、最终贴合极限环的细线。换成不同的速度场比如在两三个吸引子之间做插值或者加入正弦扰动线条形态会从圆弧变成波浪、涡旋甚至花瓣状。实际创作中我一般会让几百个粒子从不同起点同时出发用透明度叠加出来的画面会丰富很多。2.2 梯度场让粒子顺着“最陡方向”走第二套机制是梯度场。梯度是导数在多维空间的延伸它指向函数值上升最快的方向。用在图像上非常简单把图片转成灰度每个像素的灰度可以看成是一个高度场那么梯度方向就是“从暗往亮爬”的方向。如果让粒子顺着梯度方向走它们会向高亮区域聚集如果逆着梯度方向走它们会滑向暗区。这相当于给粒子装了一个“趋光性”。具体做法分三步先对图像做高斯模糊让细节平滑一些再用 Sobel 算子计算 x 方向和 y 方向的梯度最后把梯度归一化成单位向量作为每个位置的速度方向。下面的代码就是完整的梯度流场生成from scipy.ndimage import gaussian_filter, sobel import numpy as np image plt.imread(input.jpg).mean(axis2).astype(float) image gaussian_filter(image, sigma1.5) grad_x sobel(image, axis1) grad_y sobel(image, axis0) grad_mag np.hypot(grad_x, grad_y) grad_mag[grad_mag 0] 1e-6 unit_x grad_x / grad_mag unit_y grad_y / grad_mag得到 unit_x 和 unit_y 后就可以写一个和前面一样的欧拉循环只是速度场变成查表插值。为了让轨迹好看通常会让粒子逆着亮度梯度走也就是往暗的地方流这样能勾勒出物体的边缘和阴影过渡。我在做“照片转流体画”时还会叠加一点点随机抖动否则粒子容易全卡在同一个局部亮区画面会显得死板。要注意的是梯度会受图像噪点影响。边角处一根头发丝都可能产生一堆局部极值导致粒子轨迹像乱麻。所以模糊参数不能省。sigma 在 1.0 到 2.0 之间比较稳妥太大会丢失轮廓太小则会吵得没法看。2.3 曲率把“弯曲程度”变成视觉张力最后一个机制是曲率。如果说一阶导数告诉我们的是一条线在往哪走那么二阶导数或者曲率告诉我们的就是这条线“弯得有多急”。直线上每个点曲率都接近零圆弧的曲率是半径的倒数弯得越厉害曲率值越大。在创作里曲率是一个非常好的视觉张力指标拐弯剧烈的地方可以赋予更高的透明度或更粗的线宽形成一种类似书法运笔的轻重缓急。对离散点组成的轨迹我们可以在代码里用差分近似计算曲率。设相邻点向量为 dx x_{i1} - x_idy y_{i1} - y_i二阶差分为 ddx x_{i1} - 2 * x_i x_{i-1}ddy y_{i1} - 2 * y_i y_{i-1}曲率 k 的近似公式是k (dx * ddy - dy * ddx) / ((dx^2 dy^2 1e-6)^(3/2))分母加一个小量是为了防止两点重合时除零。算完曲率之后你可以把它映射到颜色、线宽或者抖动强度。我用这个方法做过一组基于车流轨迹的插画把 GPS 轨迹点拿过来计算每个点的曲率再用色相从蓝到红表现曲率从小到大结果原本普通的路网图瞬间有了“速度与转折”的层次感。三维曲面里的曲率概念更丰富高斯曲率可以为正、负或零。纸卷成筒高斯曲率为零球面为正马鞍面为负。做参数化建筑或 3D 打印雕塑时高斯曲率决定了“能不能展平”以及“形变张力的方向”。不过这已经偏向几何处理了如果你只是做平面视觉二维曲率就够用了。3. 多维应用实践三个从想法到作品的记录3.1 照片转流体粒子画让像素“流向”光影第一个完整应用是社区里比较受欢迎的项目从一张普通街景照片生成流体粒子画。思路就是把照片的亮度场当作“地形”粒子在地形上沿梯度方向流动最后把整段流动轨迹叠加成一张画。流程大概是读取照片转灰度并模糊计算梯度场随机撒一万个粒子每个粒子迭代几百步每一步把粒子的位置记录在画布上同时用粒子当前所在位置的亮度来给笔触上色。关键参数可以这样定图片缩放到 1200px 宽sigma1.8粒子数 8000每个粒子最多走 400 步步长 0.5px每个轨迹点画一个半径 0.3 的半透明点。为了让最终线条不是一团黑我让粒子沿梯度反方向也就是从亮处往暗处流这样亮区域的轮廓会被反复描深形成一种类似蚀刻版画的效果。实际跑下来效果最好的反而是那种明暗对比强烈的照片比如逆光人像、黑白建筑、雨夜街景。颜色太乱的照片一定要先转灰度再处理否则颜色通道彼此干扰轨迹会失去方向感。最后我把输出图在高分辨率下重新渲染叠加一个轻微的噪点纹理就有了类似丝网印刷的颗粒质感。这一步并不难但很出效果。3.2 动态字体让字形轮廓“自主呼吸”第二个应用是动态字体。起因是我在做一张海报想让标题文字不要静态地立在那里而是像有生命一样微微地起伏。传统做法是给每个字做位移动画但那样太机械。我的方案是把文字的 SVG 路径采样成点对每个采样点计算法向量和曲率然后让点沿法向量按曲率大小上下振动曲率高的地方振幅大形成“描边越弯越颤抖”的有机感。具体实现上我用 Python 读取 SVG 路径的锚点先把字形的贝塞尔曲线用足够密的采样点拉直。然后在每一帧更新每个点 p 的位置p normal * A * sin(omega * t phase_i)。这里的 A 与曲率成正比phase_i 根据 x 坐标加一点递进这样振动会像波浪一样从一端传到另一端。最后把所有采样点按顺序连成多边形并填充就得到了“会呼吸”的字。需要注意采样点的密度必须够否则转折越尖锐的地方越容易出现形状开裂。我做测试时用 0.5px 左右的采样间隔一个“永”字大概采出七八千个点实时性也完全跟得上。这套原理还可以扩展到Logo动效、数据可视化标题等领域核心只有一句话把路径的曲率和法向量变成驱动形态变化的控制信号。3.3 实时交互装置把笔触的速度场画出来第三个应用是一个现场互动装置。观众拿电容笔在触摸屏上随意涂鸦屏幕不是直接显示笔迹而是把笔迹的位置、速度、加速度变成一组动态粒子在画布上慢慢扩散。这个项目最吸引人的地方在于它把“动作的变化率”本身变成了可以被看见的东西你画得快粒子就拖着长长的尾巴朝切线方向喷出去你在原地使劲戳粒子会在原地形成一圈一圈的冲击波。技术上用的是 p5.js每一帧读取当前手指位置和上一帧位置做差得到瞬时速度再对速度做低通滤波得到加速度。然后维护一个粒子缓存数组每当有新输入位置就以当前位置为出生点把速度方向作为粒子的初始方向把速度大小映射成粒子的能量。之后每个粒子按照一个阻尼微分方程更新dx/dt vdv/dt -k * v noise这里的 k 是阻尼系数控制粒子停下来的速度noise 是随机扰动让轨迹不显得太机械。调好 k 之后观众明显能感觉到自己画的每一笔都有“惯性”和“手感”。很多观众站在屏幕前玩十分钟不愿意走就因为在微观层面这类装置能让他们看到动作的每一次细微停顿和转折这种反馈是静态画面给不了的。在这个项目里性能依然是个问题。p5.js 直接逐粒子循环绘图在五千粒子以上就会开始卡顿我后来把粒子数据全部放进数组里用 for 循环更新再用点绘制而不是矩形勉强在 60fps 下跑满八千粒子。4. 实操避坑与工具选型我替你们踩过的雷4.1 步长、迭代次数与随机种子的三角关系很多人第一次跑微分方程轨迹都会遇到同一个问题轨迹要么快速飞到画面外要么缩成一个点完全不动。这大概率是步长 dt 没选对。欧拉法本质上是“用直线近似曲线”dt 越大误差越大当速度场在某处特别陡时粒子可能直接跳到一个完全离谱的位置下一帧再跳更远很快就爆掉。我的习惯是先设 dt0.01迭代两三千步看轨迹是否稳定如果出现明显的锯齿或者飞出边界就把 dt 缩小到 0.001同时把迭代次数按比例提高。另外初始点的位置和随机种子也极其关键。同一套速度场从不同起点出发的轨迹可能完全不同。想要画面丰富可以让几百个粒子用不同的种子同时跑最后叠加如果只想生成一条主线条最好手动试几个起点选那根能穿出漂亮弧线的。我经常在代码里直接写死随机种子这样才能保证调整其他参数时构图不会因为随机数变化而完全变样。4.2 梯度噪点与平滑度的取舍计算图像梯度最简单的方式是直接相邻像素差分但这样做出来的场会很碎。图像里的任何噪点都会被放大粒子流进一个噪点区域后就会绕来绕去画面看起来像起雾。所以必须先做空间平滑再算梯度。不过平滑过头又会把真正的边缘抹掉整个流场变成一大片温和的坡地粒子都慢吞吞地挪没有力度。我的经验是先观察原图细节量细节多的照片用 sigma1.2干净的人像或建筑用 sigma2.0。如果在输出轨迹时发现“噪声感”重可以不去改原图模糊参数而是限制粒子每次步长的最大值比如把步长截断到 0.8px 以下这能有效抑制粒子在小尺度噪点里的来回抖动。还有一个小技巧是在梯度场中混合一小部分旋度场也就是把梯度方向旋转 90 度乘以一个很小的权重这样轨迹会带一点螺旋的气质视觉上更柔和也不会完全失去轮廓。4.3 工具选型离线批量与实时展示的拆分工具这件事没有标准答案但一定要分清场景。如果你要生成高分辨率静态图或者批量渲染动画帧我强烈建议用 Python。numpy 的数组操作可以把成千上万个粒子的更新放在一个向量化计算里完成速度比逐粒子循环快几十倍。scipy.ndimage 也内置了高斯滤波、sobel 等图像微分操作省掉很多手工实现的麻烦。如果你要做现场交互Python 的实时性能就不够顺手了。Processing 和 p5.js 的优势是绘图循环和事件模型天然适合交互调试起来很直观。TouchDesigner 则更适合接传感器、投影映射和音频联动适合做展览级现场装置。我自己通常的做法是离线阶段用 Python 把速度场和轨迹算好导出坐标点现场展示时再把坐标点导入 TouchDesigner 做渲染。这样两边都用各自擅长的部分既不会写一堆复杂的 C也不会被网页性能卡住。5. 从机制到方法论把微分当创作材料5.1 先感知“变化”再过渡到“方程”写了这么多最终想分享的是方法论层面的体会。微分艺术听起来高深但核心并不复杂它是在教我们用“局部变化”去组织全局。你可以先不碰方程只拿一条曲线、一列坐标点用差分算出每一点的速度方向和曲率然后把这些量映射到颜色、线宽或透明度上你做出来的东西就已经是一种微分艺术。等你对这种“变化可视化”有了手感再慢慢加入微分方程让多个变量相互作用作品就会从“一条线的风格”变成“一个系统的演化”。这个进阶路径比一上来就抱着一本常微分方程啃要友好得多。艺术创作不是做试卷不需要你解出解析解能用欧拉法踏踏实实迭代几千步就够了。这也是我觉得微分艺术很适合创意工作者的原因它给了你一个干净、可调、可失控的创作框架。5.2 适合入门的三个最小实践如果想自己动手试我建议从下面三个最小实践里选一个拿一张黑白照片用 Sobel 算梯度撒五百个粒子逆着梯度走输出一条长曝光轨迹图。拿一支笔在纸上画一条不规则的线把这条线采样成点计算曲率在弯曲最剧烈的地方把线加粗或者转色。写一个简单的二维阻尼粒子系统用鼠标点击产生一批粒子观察它们在阻尼和随机噪声下的扩散形态。这三个练习都不需要复杂的数学背景半小时就能跑通。跑通之后你自然会理解导数、梯度、曲率在画面里到底长什么样。以后再看到网上那些流动粒子、有机字体、实时交互涂鸦你就知道它们大概率都是这些微分机制的不同排列组合。如果在做的过程中遇到轨迹爆炸、画面杂乱、性能卡顿的问题回头翻翻上面“实操避坑”那一节的内容基本上都能找到原因。我自己也是从不停改步长、调 seed、换工具链的循环里走过来的这些东西并不难缺的只是动手去试的那一小步。
微分艺术实战：用导数、梯度场和曲率驱动生成视觉创意
提到微分艺术很多创意编程圈的朋友第一反应是“又是数学那套”。但我做了几年生成艺术之后必须说句公道话微分不是拿来背的公式它是一套描述“事物如何变化”的语言而艺术恰好是变化的美学。下面这些内容不是教材而是我从零开始用微分方程、梯度场和曲率工具做视觉项目时沉淀下来的核心机制和实战经验我会讲清楚这些数学概念怎么落地成能跑的代码也会分享几个已经实际做过的应用场景从粒子流动画到交互笔迹都能覆盖。无论你是刚接触生成艺术的新手还是想给自己的创作工具箱里加一件“有数学味道”的武器都能从里面找到能直接用的东西。1. 微分艺术的底层逻辑为什么变化率能成为创作语法1.1 导数不是公式是一台“局部高速摄像机”先聊最基础的导数。很多人听到 f(x) 就想到求导法则但在创作语境里导数更像是一台对准某个瞬间的高速摄像机它只告诉你此时此刻朝着哪个方向变化、变化得有多快。想象你开车路过一个弯道速度表上的读数和方向盘的角度就是这条路径的“一阶信息”。如果你把这些读数画出来你就会得到一条能反映运动趋势的线——这本身就是一种视觉。在视觉艺术里我们面对的任何一条连续曲线其实都可以在每一个采样点上取切线和法向量。切线告诉你曲线正往哪里伸展法向量告诉你它正在往哪个方向“推开”空间。很多所谓的“流体感”“生长感”效果本质上就是对这些局部向量的可视化。你不需要在草稿纸上算极限只需要对每个点用一个微小偏移量做差分就能得到足够漂亮的近似这个操作就是最常见的数值微分。数值微分的核心其实很简单对离散坐标点 (x_i, y_i)下一个位置的切线方向可以用 (x_{i1} - x_{i-1}, y_{i1} - y_{i-1}) 近似。这也是所有线条风格化处理的第一步。做出来之后你会发现原本普通的手绘轨迹一旦用切线方向重新定向、用速度重新分配透明度整张图立刻有了“动势”。微分艺术这个称呼并不是故弄玄虚它就是在说用变化率作为结构画面的基本语法。1.2 从“画结果”到“定规则”微分方程的创作思维搞清楚导数之后再往前走半步就是微分方程。导数描述的是“此刻的变化”微分方程描述的则是“此刻的变化如何受到此刻状态的影响”。你给出一个规则——比如速度正比于当前位置与某个吸引子之间的距离——然后让一小群点在这个规则下不断迭代最终它们会走出意想不到的轨迹。这个过程有一个非常重要的思维转变你不再直接决定最终长什么样你只决定每一步怎么变剩下的交给时间。用通俗的话说普通作图是“照着一张照片画”微分方程作图则是“在一盆水里滴一滴墨看着它如何扩散”。艺术圈喜欢讲涌现、自组织其实大部分涌现现象的底层都是微分方程在跑。著名的Lorenz吸引子、双摆、流体粒子系统它们呈现出的复杂形态并不是谁事先“画”出来的而是一组简单规则的长期推演结果。这个思维转换对创作者来说非常重要。我见过很多人一上来就想控制每个像素把自己累得半死结果画面依然僵硬。而换成分微方程的思路之后你只需要设计规则、调整参数剩下就是让计算过程自己去“长”出形态。过程中会出现大量你没想到的中间状态这些状态往往比最终成品更有意思。可以说“发挥不可预测性”是微分艺术最核心的创作优势。2. 核心机制拆解三个可以立刻上手的“微分引擎”2.1 一阶系统与欧拉法用速度场生成流动轨迹第一套可以直接用的机制是“一阶系统”。假设每个粒子的位置是向量 p我们定义一个速度场 v(p)粒子的运动规律就是 dp/dt v(p)。在数值实现里我们不需要真的去解这个方程只需用欧拉法逐步推进p_new p_old v(p_old) * dt。dt 是步长控制每次移动的距离。这个循环每跑一步粒子就在速度场上留下一个脚印所有这些脚印连在一起就是一条流线。一个经典且好看的例子是二维旋转场v_x -yv_y x。它会让所有粒子绕原点转圈形成一圈圈的同心轨迹。如果稍微加一点点非线性扰动比如把 v_x 改成 -y 0.1 * x * (1 - x^2 - y^2)轨迹就不再是完美圆而会慢慢收敛到某个极限环上画出来像一圈一圈的手写线条。下面是简化版本import numpy as np import matplotlib.pyplot as plt def velocity(pos): x, y pos vx -y 0.1 * x * (1 - x*x - y*y) vy x 0.1 * y * (1 - x*x - y*y) return np.array([vx, vy]) def euler_step(pos, dt): return pos velocity(pos) * dt pos np.array([1.2, 0.8]) dt 0.01 trail [] for _ in range(30000): trail.append(pos.copy()) pos euler_step(pos, dt) trail np.array(trail) plt.plot(trail[:, 0], trail[:, 1], linewidth0.3, alpha0.8) plt.axis(off) plt.savefig(limit_cycle_trail.png, dpi300, bbox_inchestight)这段代码跑完会得到一条逐渐绕圈、最终贴合极限环的细线。换成不同的速度场比如在两三个吸引子之间做插值或者加入正弦扰动线条形态会从圆弧变成波浪、涡旋甚至花瓣状。实际创作中我一般会让几百个粒子从不同起点同时出发用透明度叠加出来的画面会丰富很多。2.2 梯度场让粒子顺着“最陡方向”走第二套机制是梯度场。梯度是导数在多维空间的延伸它指向函数值上升最快的方向。用在图像上非常简单把图片转成灰度每个像素的灰度可以看成是一个高度场那么梯度方向就是“从暗往亮爬”的方向。如果让粒子顺着梯度方向走它们会向高亮区域聚集如果逆着梯度方向走它们会滑向暗区。这相当于给粒子装了一个“趋光性”。具体做法分三步先对图像做高斯模糊让细节平滑一些再用 Sobel 算子计算 x 方向和 y 方向的梯度最后把梯度归一化成单位向量作为每个位置的速度方向。下面的代码就是完整的梯度流场生成from scipy.ndimage import gaussian_filter, sobel import numpy as np image plt.imread(input.jpg).mean(axis2).astype(float) image gaussian_filter(image, sigma1.5) grad_x sobel(image, axis1) grad_y sobel(image, axis0) grad_mag np.hypot(grad_x, grad_y) grad_mag[grad_mag 0] 1e-6 unit_x grad_x / grad_mag unit_y grad_y / grad_mag得到 unit_x 和 unit_y 后就可以写一个和前面一样的欧拉循环只是速度场变成查表插值。为了让轨迹好看通常会让粒子逆着亮度梯度走也就是往暗的地方流这样能勾勒出物体的边缘和阴影过渡。我在做“照片转流体画”时还会叠加一点点随机抖动否则粒子容易全卡在同一个局部亮区画面会显得死板。要注意的是梯度会受图像噪点影响。边角处一根头发丝都可能产生一堆局部极值导致粒子轨迹像乱麻。所以模糊参数不能省。sigma 在 1.0 到 2.0 之间比较稳妥太大会丢失轮廓太小则会吵得没法看。2.3 曲率把“弯曲程度”变成视觉张力最后一个机制是曲率。如果说一阶导数告诉我们的是一条线在往哪走那么二阶导数或者曲率告诉我们的就是这条线“弯得有多急”。直线上每个点曲率都接近零圆弧的曲率是半径的倒数弯得越厉害曲率值越大。在创作里曲率是一个非常好的视觉张力指标拐弯剧烈的地方可以赋予更高的透明度或更粗的线宽形成一种类似书法运笔的轻重缓急。对离散点组成的轨迹我们可以在代码里用差分近似计算曲率。设相邻点向量为 dx x_{i1} - x_idy y_{i1} - y_i二阶差分为 ddx x_{i1} - 2 * x_i x_{i-1}ddy y_{i1} - 2 * y_i y_{i-1}曲率 k 的近似公式是k (dx * ddy - dy * ddx) / ((dx^2 dy^2 1e-6)^(3/2))分母加一个小量是为了防止两点重合时除零。算完曲率之后你可以把它映射到颜色、线宽或者抖动强度。我用这个方法做过一组基于车流轨迹的插画把 GPS 轨迹点拿过来计算每个点的曲率再用色相从蓝到红表现曲率从小到大结果原本普通的路网图瞬间有了“速度与转折”的层次感。三维曲面里的曲率概念更丰富高斯曲率可以为正、负或零。纸卷成筒高斯曲率为零球面为正马鞍面为负。做参数化建筑或 3D 打印雕塑时高斯曲率决定了“能不能展平”以及“形变张力的方向”。不过这已经偏向几何处理了如果你只是做平面视觉二维曲率就够用了。3. 多维应用实践三个从想法到作品的记录3.1 照片转流体粒子画让像素“流向”光影第一个完整应用是社区里比较受欢迎的项目从一张普通街景照片生成流体粒子画。思路就是把照片的亮度场当作“地形”粒子在地形上沿梯度方向流动最后把整段流动轨迹叠加成一张画。流程大概是读取照片转灰度并模糊计算梯度场随机撒一万个粒子每个粒子迭代几百步每一步把粒子的位置记录在画布上同时用粒子当前所在位置的亮度来给笔触上色。关键参数可以这样定图片缩放到 1200px 宽sigma1.8粒子数 8000每个粒子最多走 400 步步长 0.5px每个轨迹点画一个半径 0.3 的半透明点。为了让最终线条不是一团黑我让粒子沿梯度反方向也就是从亮处往暗处流这样亮区域的轮廓会被反复描深形成一种类似蚀刻版画的效果。实际跑下来效果最好的反而是那种明暗对比强烈的照片比如逆光人像、黑白建筑、雨夜街景。颜色太乱的照片一定要先转灰度再处理否则颜色通道彼此干扰轨迹会失去方向感。最后我把输出图在高分辨率下重新渲染叠加一个轻微的噪点纹理就有了类似丝网印刷的颗粒质感。这一步并不难但很出效果。3.2 动态字体让字形轮廓“自主呼吸”第二个应用是动态字体。起因是我在做一张海报想让标题文字不要静态地立在那里而是像有生命一样微微地起伏。传统做法是给每个字做位移动画但那样太机械。我的方案是把文字的 SVG 路径采样成点对每个采样点计算法向量和曲率然后让点沿法向量按曲率大小上下振动曲率高的地方振幅大形成“描边越弯越颤抖”的有机感。具体实现上我用 Python 读取 SVG 路径的锚点先把字形的贝塞尔曲线用足够密的采样点拉直。然后在每一帧更新每个点 p 的位置p normal * A * sin(omega * t phase_i)。这里的 A 与曲率成正比phase_i 根据 x 坐标加一点递进这样振动会像波浪一样从一端传到另一端。最后把所有采样点按顺序连成多边形并填充就得到了“会呼吸”的字。需要注意采样点的密度必须够否则转折越尖锐的地方越容易出现形状开裂。我做测试时用 0.5px 左右的采样间隔一个“永”字大概采出七八千个点实时性也完全跟得上。这套原理还可以扩展到Logo动效、数据可视化标题等领域核心只有一句话把路径的曲率和法向量变成驱动形态变化的控制信号。3.3 实时交互装置把笔触的速度场画出来第三个应用是一个现场互动装置。观众拿电容笔在触摸屏上随意涂鸦屏幕不是直接显示笔迹而是把笔迹的位置、速度、加速度变成一组动态粒子在画布上慢慢扩散。这个项目最吸引人的地方在于它把“动作的变化率”本身变成了可以被看见的东西你画得快粒子就拖着长长的尾巴朝切线方向喷出去你在原地使劲戳粒子会在原地形成一圈一圈的冲击波。技术上用的是 p5.js每一帧读取当前手指位置和上一帧位置做差得到瞬时速度再对速度做低通滤波得到加速度。然后维护一个粒子缓存数组每当有新输入位置就以当前位置为出生点把速度方向作为粒子的初始方向把速度大小映射成粒子的能量。之后每个粒子按照一个阻尼微分方程更新dx/dt vdv/dt -k * v noise这里的 k 是阻尼系数控制粒子停下来的速度noise 是随机扰动让轨迹不显得太机械。调好 k 之后观众明显能感觉到自己画的每一笔都有“惯性”和“手感”。很多观众站在屏幕前玩十分钟不愿意走就因为在微观层面这类装置能让他们看到动作的每一次细微停顿和转折这种反馈是静态画面给不了的。在这个项目里性能依然是个问题。p5.js 直接逐粒子循环绘图在五千粒子以上就会开始卡顿我后来把粒子数据全部放进数组里用 for 循环更新再用点绘制而不是矩形勉强在 60fps 下跑满八千粒子。4. 实操避坑与工具选型我替你们踩过的雷4.1 步长、迭代次数与随机种子的三角关系很多人第一次跑微分方程轨迹都会遇到同一个问题轨迹要么快速飞到画面外要么缩成一个点完全不动。这大概率是步长 dt 没选对。欧拉法本质上是“用直线近似曲线”dt 越大误差越大当速度场在某处特别陡时粒子可能直接跳到一个完全离谱的位置下一帧再跳更远很快就爆掉。我的习惯是先设 dt0.01迭代两三千步看轨迹是否稳定如果出现明显的锯齿或者飞出边界就把 dt 缩小到 0.001同时把迭代次数按比例提高。另外初始点的位置和随机种子也极其关键。同一套速度场从不同起点出发的轨迹可能完全不同。想要画面丰富可以让几百个粒子用不同的种子同时跑最后叠加如果只想生成一条主线条最好手动试几个起点选那根能穿出漂亮弧线的。我经常在代码里直接写死随机种子这样才能保证调整其他参数时构图不会因为随机数变化而完全变样。4.2 梯度噪点与平滑度的取舍计算图像梯度最简单的方式是直接相邻像素差分但这样做出来的场会很碎。图像里的任何噪点都会被放大粒子流进一个噪点区域后就会绕来绕去画面看起来像起雾。所以必须先做空间平滑再算梯度。不过平滑过头又会把真正的边缘抹掉整个流场变成一大片温和的坡地粒子都慢吞吞地挪没有力度。我的经验是先观察原图细节量细节多的照片用 sigma1.2干净的人像或建筑用 sigma2.0。如果在输出轨迹时发现“噪声感”重可以不去改原图模糊参数而是限制粒子每次步长的最大值比如把步长截断到 0.8px 以下这能有效抑制粒子在小尺度噪点里的来回抖动。还有一个小技巧是在梯度场中混合一小部分旋度场也就是把梯度方向旋转 90 度乘以一个很小的权重这样轨迹会带一点螺旋的气质视觉上更柔和也不会完全失去轮廓。4.3 工具选型离线批量与实时展示的拆分工具这件事没有标准答案但一定要分清场景。如果你要生成高分辨率静态图或者批量渲染动画帧我强烈建议用 Python。numpy 的数组操作可以把成千上万个粒子的更新放在一个向量化计算里完成速度比逐粒子循环快几十倍。scipy.ndimage 也内置了高斯滤波、sobel 等图像微分操作省掉很多手工实现的麻烦。如果你要做现场交互Python 的实时性能就不够顺手了。Processing 和 p5.js 的优势是绘图循环和事件模型天然适合交互调试起来很直观。TouchDesigner 则更适合接传感器、投影映射和音频联动适合做展览级现场装置。我自己通常的做法是离线阶段用 Python 把速度场和轨迹算好导出坐标点现场展示时再把坐标点导入 TouchDesigner 做渲染。这样两边都用各自擅长的部分既不会写一堆复杂的 C也不会被网页性能卡住。5. 从机制到方法论把微分当创作材料5.1 先感知“变化”再过渡到“方程”写了这么多最终想分享的是方法论层面的体会。微分艺术听起来高深但核心并不复杂它是在教我们用“局部变化”去组织全局。你可以先不碰方程只拿一条曲线、一列坐标点用差分算出每一点的速度方向和曲率然后把这些量映射到颜色、线宽或透明度上你做出来的东西就已经是一种微分艺术。等你对这种“变化可视化”有了手感再慢慢加入微分方程让多个变量相互作用作品就会从“一条线的风格”变成“一个系统的演化”。这个进阶路径比一上来就抱着一本常微分方程啃要友好得多。艺术创作不是做试卷不需要你解出解析解能用欧拉法踏踏实实迭代几千步就够了。这也是我觉得微分艺术很适合创意工作者的原因它给了你一个干净、可调、可失控的创作框架。5.2 适合入门的三个最小实践如果想自己动手试我建议从下面三个最小实践里选一个拿一张黑白照片用 Sobel 算梯度撒五百个粒子逆着梯度走输出一条长曝光轨迹图。拿一支笔在纸上画一条不规则的线把这条线采样成点计算曲率在弯曲最剧烈的地方把线加粗或者转色。写一个简单的二维阻尼粒子系统用鼠标点击产生一批粒子观察它们在阻尼和随机噪声下的扩散形态。这三个练习都不需要复杂的数学背景半小时就能跑通。跑通之后你自然会理解导数、梯度、曲率在画面里到底长什么样。以后再看到网上那些流动粒子、有机字体、实时交互涂鸦你就知道它们大概率都是这些微分机制的不同排列组合。如果在做的过程中遇到轨迹爆炸、画面杂乱、性能卡顿的问题回头翻翻上面“实操避坑”那一节的内容基本上都能找到原因。我自己也是从不停改步长、调 seed、换工具链的循环里走过来的这些东西并不难缺的只是动手去试的那一小步。
