图灵图案（Turing Patterns）：反应扩散系统在 Canvas 中的生成艺术-开发者社区

图灵图案（Turing Patterns）：反应扩散系统在 Canvas 中的生成艺术

1952 年，计算机科学之父艾伦·图灵（Alan Turing）在其生前发表的最后一篇划时代生物数学论文《形态发生学的化学基础（The Chemical Basis of Morphogenesis）》中，提出了一个震撼整个科学界的理论模型：

大自然中所有生物表面千变万化的神秘纹理——例如斑马身上黑白相间的条纹、猎豹皮肤上的斑点、热带深海鱼鳞片上的迷宫旋涡、以及热带雨林植物叶片的脉络，其底层竟然完全由两个极其简单的化学物质在空间中的“相互反应”与“浓度扩散”微分方程所决定！

这就是著名的图灵反应-扩散系统（Reaction-Diffusion System / Gray-Scott 模型）。

在生成艺术领域，图灵图案是模拟大自然自组织有机形态（Self-organizing Morphologies）最纯粹、最深邃的数学皇冠。

本文将深入推导 Gray-Scott 反应扩散偏微分方程，并在 HTML5 Canvas 中手写一个实时模拟细胞分裂、斑马纹与豹纹有机生长的生成艺术画卷。

Gray-Scott 反应-扩散偏微分方程数学推导

设在二维平面网格上存在两种互相作用的虚拟化学物质：

物质 $U$（底物 / 促进剂）：在空间中自由扩散，并以恒定补给速率 $F$（Feed Rate）持续被注入系统；
物质 $V$（催化抑制剂）：由两个 $U$ 分子与一个 $V$ 分子碰撞反应生成（自催化反应：$2U + V \to 3V$），同时以自然死亡速率 $K$（Kill Rate）从系统中消亡。

其空间浓度分布 $u(x, y, t)$ 与 $v(x, y, t)$ 随时间的演进遵循如下偏微分方程组：

$$\begin{cases}
\frac{\partial u}{\partial t} = D_u \cdot \nabla^2 u - u v^2 + F \cdot (1 - u) \
\frac{\partial v}{\partial t} = D_v \cdot \nabla^2 v + u v^2 - (F + K) \cdot v
\end{cases}$$

其中：

$D_u$ 与 $D_v$ 为两种物质在介质中的扩散速率（Diffusion Rates）（通常 $D_u > D_v$，底物扩散速度约为抑制剂的 2 倍）；
$u v^2$ 为自催化反应消耗项；
$\nabla^2$ 为二维空间拉普拉斯算子（Laplacian Operator），代表该点与其周围邻域平均浓度的空间扩散梯度差！

离散网格中的五点拉普拉斯卷积核

在计算机离散网格中，拉普拉斯算子 $\nabla^2$ 可以通过标准的 $3 \times 3$ 卷积模板快速求值：

$$\nabla^2 A(x, y) \approx 0.2 \cdot (A_{top} + A_{bottom} + A_{left} + A_{right}) + 0.05 \cdot (A_{tl} + A_{tr} + A_{bl} + A_{br}) - 1.0 \cdot A_{center}$$

┌───────┬───────┬───────┐ │ 0.05 │ 0.20 │ 0.05 │ ├───────┼───────┼───────┤ │ 0.20 │ -1.0 │ 0.20 │ ├───────┼───────┼───────┤ │ 0.05 │ 0.20 │ 0.05 │ └───────┴───────┴───────┘

形态参数相空间对照表（Patterns Phase Space）

通过微调 $F$（Feed）与 $K$（Kill）参数，画面会在生物形态之间发生奇迹般的相变：

斑马条纹 / 迷宫回路（Stripes / Mazes）：$F = 0.034, ; K = 0.065$
猎豹斑点 / 细胞分裂（Solitary Spots）：$F = 0.014, ; K = 0.054$
自复制螺旋孤子（Self-replicating Spirals）：$F = 0.018, ; K = 0.051$
混乱波（Chaos Waves）：$F = 0.026, ; K = 0.055$

// gray-scott-engine.ts export class GrayScottSimulation { private width: number; private height: number; private uGrid: Float32Array; private vGrid: Float32Array; private nextU: Float32Array; private nextV: Float32Array; // 反应扩散物理参数 (斑马迷宫模式) public feed: number = 0.037; public kill: number = 0.060; private du: number = 1.0; private dv: number = 0.5; constructor(width: number, height: number) { this.width = width; this.height = height; const size = width * height; this.uGrid = new Float32Array(size).fill(1.0); // 初始全充满 U this.vGrid = new Float32Array(size).fill(0.0); this.nextU = new Float32Array(size); this.nextV = new Float32Array(size); this.seedInitialDroplets(); } // 在中心播撒随机 V 抑制剂晶种 private seedInitialDroplets() { const cx = Math.floor(this.width / 2); const cy = Math.floor(this.height / 2); const r = 12; for (let dy = -r; dy <= r; dy++) { for (let dx = -r; dx <= r; dx++) { if (dx * dx + dy * dy <= r * r) { const idx = (cy + dy) * this.width + (cx + dx); this.vGrid[idx] = 1.0; } } } } // 核心数值积分一步 (dt = 1.0) public step() { const w = this.width; const h = this.height; for (let y = 1; y < h - 1; y++) { for (let x = 1; x < w - 1; x++) { const idx = y * w + x; const u = this.uGrid[idx]; const v = this.vGrid[idx]; // 1. 求解 U 和 V 的拉普拉斯空间扩散项 const lapU = 0.2 * (this.uGrid[idx - 1] + this.uGrid[idx + 1] + this.uGrid[idx - w] + this.uGrid[idx + w]) + 0.05 * (this.uGrid[idx - w - 1] + this.uGrid[idx - w + 1] + this.uGrid[idx + w - 1] + this.uGrid[idx + w + 1]) - 1.0 * u; const lapV = 0.2 * (this.vGrid[idx - 1] + this.vGrid[idx + 1] + this.vGrid[idx - w] + this.vGrid[idx + w]) + 0.05 * (this.vGrid[idx - w - 1] + this.vGrid[idx - w + 1] + this.vGrid[idx + w - 1] + this.vGrid[idx + w + 1]) - 1.0 * v; // 2. 反应项: uv^2 const uvv = u * v * v; // 3. Gray-Scott 微分迭代方程更新 this.nextU[idx] = u + (this.du * lapU - uvv + this.feed * (1.0 - u)); this.nextV[idx] = v + (this.dv * lapV + uvv - (this.feed + this.kill) * v); } } // 交换缓冲区 this.uGrid.set(this.nextU); this.vGrid.set(this.nextV); } public getVConcentration(): Float32Array { return this.vGrid; } }

Canvas 先锋艺术色彩映射

将物质 $V$ 的微观浓度映射为深邃的生化荧光色谱（深海靛黑 ➔ 荧光孔雀蓝 ➔ 亮珊瑚橙）：

// turing-canvas-renderer.ts export class TuringPatternRenderer { private canvas: HTMLCanvasElement; private ctx: CanvasRenderingContext2D; private sim: GrayScottSimulation; constructor(canvas: HTMLCanvasElement) { this.canvas = canvas; this.ctx = canvas.getContext('2d')!; this.sim = new GrayScottSimulation(canvas.width, canvas.height); } public renderLoop = () => { // 每一帧迭代 8 步以加速化学反应生长 for (let i = 0; i < 8; i++) { this.sim.step(); } const w = this.canvas.width; const h = this.canvas.height; const vData = this.sim.getVConcentration(); const imgData = this.ctx.createImageData(w, h); const data = imgData.data; for (let i = 0; i < vData.length; i++) { const v = vData[i]; const idx = i * 4; // 艺术色谱映射 if (v > 0.1) { data[idx] = Math.min(255, Math.floor(v * 240 + 20)); // R (珊瑚暖金) data[idx + 1] = Math.min(255, Math.floor(v * 120 + 80)); // G data[idx + 2] = Math.min(255, Math.floor(255 - v * 200));// B data[idx + 3] = 255; } else { data[idx] = 9; // 深海黑底 data[idx + 1] = 13; data[idx + 2] = 22; data[idx + 3] = 255; } } this.ctx.putImageData(imgData, 0, 0); requestAnimationFrame(this.renderLoop); }; }