图灵图案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); }; }总结图灵图案是数学与大自然生命形态之间最不可思议的共鸣。仅仅通过两个浓度的拉普拉斯扩散与自催化消亡方程我们在 Canvas 画布上目睹了无序混沌中自发涌现出的绚丽斑马纹与迷宫旋涡为现代数字先锋艺术注入了源自生命形态发生学的永恒哲思与震撼魅力。
