双重抑制剂图灵图案：Canvas 模拟多层反应扩散生物生成艺术
在经典的图灵反应-扩散（Reaction-Diffusion / Gray-Scott）模型中，由于系统只包含一个底物 $U$ 与一个单一抑制剂 $V$，生成的图案形态通常局限于单一尺度的二值化斑马条纹或单一斑点。
然而，当我们仔细观察大自然中极其复杂的生物表面——例如热带深海珊瑚礁表面色彩斑斓的嵌套网格、或者变色龙皮肤上“大斑点套着细小微观纹理”的复合多尺度结构时，单一抑制剂系统就无法解释这种高阶奇迹了。
在现代数理生物学与高级生成艺术中，三元多组分反应-扩散系统（Three-Component Reaction-Diffusion System / 双重抑制剂模型）引入了两个具有不同扩散速率、不同特征波长与相互竞争抑制的催化剂 $V_1$ 与 $V_2$。
两个抑制剂在同一片化学介质中相互交织、互相撕扯，在空间中自发涌现出多尺度嵌套生长、双色调色谱交错、宛如活体深海珊瑚骨架般极富视觉冲击力的现代先锋生成艺术画卷。
本文将深入推导双抑制剂反应扩散方程，并在 HTML5 Canvas 中手写一个三元多层生物生成艺术引擎。
三元双抑制剂反应-扩散系统的偏微分方程
设在二维空间介质中，存在三种相互作用的化学物质浓度场：
- $U(x, y, t)$：全局基础底物（促进剂）；
- $V_1(x, y, t)$：短波长高频抑制剂（微观斑点生成元），具有较小的扩散速率 $D_{v1}$，负责刻画精细的局部微纹理；
- $V_2(x, y, t)$：长波长低频抑制剂（宏观条纹生成元），具有较大的扩散速率 $D_{v2}$，负责塑造大画幅的宏观条带骨架。
其非线性偏微分方程组为：
$$\begin{cases}
\frac{\partial U}{\partial t} = D_u \nabla^2 U - U V_1^2 - \beta U V_2^2 + F(1 - U) \
\frac{\partial V_1}{\partial t} = D_{v1} \nabla^2 V_1 + U V_1^2 - (F + K_1) V_1 - \gamma V_1 V_2 \
\frac{\partial V_2}{\partial t} = D_{v2} \nabla^2 V_2 + \beta U V_2^2 - (F + K_2) V_2 + \gamma V_1 V_2
\end{cases}$$
其中：
- $\beta$ 为第二抑制剂对底物的竞争反应系数；
- $\gamma$ 为两组抑制剂之间的耦合交叉抑制强度；
- $K_1$ 与 $K_2$ 分别控制微观小斑点与宏观大条带的自然消亡半衰期。
[底物 U (持续注养 F)] ──┬──(自催化反应 1)──> [抑制剂 V1 (低扩散/高频微观斑点)] │ │ │ (交叉抑制 gamma) │ ▼ └──(自催化反应 2)──> [抑制剂 V2 (高扩散/宏观大条纹骨架)]离散网格三元数组与拉普拉斯卷积计算
// dual-inhibitor-turing-engine.ts export class DualInhibitorTuringEngine { private width: number; private height: number; private uGrid: Float32Array; private v1Grid: Float32Array; private v2Grid: Float32Array; private nextU: Float32Array; private nextV1: Float32Array; private nextV2: Float32Array; // 物理常数 private du = 1.0; private dv1 = 0.35; // V1 扩散慢 -> 形成微观密集颗粒 private dv2 = 0.85; // V2 扩散快 -> 形成宏观大框架条带 private feed = 0.038; private k1 = 0.062; private k2 = 0.056; private gamma = 0.04; constructor(width: number, height: number) { this.width = width; this.height = height; const size = width * height; this.uGrid = new Float32Array(size).fill(1.0); this.v1Grid = new Float32Array(size).fill(0.0); this.v2Grid = new Float32Array(size).fill(0.0); this.nextU = new Float32Array(size); this.nextV1 = new Float32Array(size); this.nextV2 = new Float32Array(size); this.seedComplexEcosystem(); } // 播撒多重扰动晶种 private seedComplexEcosystem() { const cx = Math.floor(this.width / 2); const cy = Math.floor(this.height / 2); // 左侧播撒 V1，右侧播撒 V2 for (let dy = -16; dy <= 16; dy++) { for (let dx = -16; dx <= 16; dx++) { if (dx * dx + dy * dy <= 256) { this.v1Grid[(cy + dy) * this.width + (cx + dx - 30)] = 0.8; this.v2Grid[(cy + dy) * this.width + (cx + dx + 30)] = 0.8; } } } } // 核心数值迭代计算 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 v1 = this.v1Grid[idx]; const v2 = this.v2Grid[idx]; // 1. 五点拉普拉斯空间扩散项 const lapU = 0.2 * (this.uGrid[idx-1] + this.uGrid[idx+1] + this.uGrid[idx-w] + this.uGrid[idx+w]) - u; const lapV1 = 0.2 * (this.v1Grid[idx-1] + this.v1Grid[idx+1] + this.v1Grid[idx-w] + this.v1Grid[idx+w]) - v1; const lapV2 = 0.2 * (this.v2Grid[idx-1] + this.v2Grid[idx+1] + this.v2Grid[idx-w] + this.v2Grid[idx+w]) - v2; // 2. 反应项 const uv1Sq = u * v1 * v1; const uv2Sq = u * v2 * v2; const crossInhibit = this.gamma * v1 * v2; // 3. 微分更新 this.nextU[idx] = u + (this.du * lapU - uv1Sq - uv2Sq + this.feed * (1.0 - u)); this.nextV1[idx] = v1 + (this.dv1 * lapV1 + uv1Sq - (this.feed + this.k1) * v1 - crossInhibit); this.nextV2[idx] = v2 + (this.dv2 * lapV2 + uv2Sq - (this.feed + this.k2) * v2 + crossInhibit); } } // 交换双缓冲 this.uGrid.set(this.nextU); this.v1Grid.set(this.nextV1); this.v2Grid.set(this.nextV2); } public getBuffers() { return { v1: this.v1Grid, v2: this.v2Grid }; } }Canvas 先锋双色调（Duotone）荧光映射
将微观抑制剂 $V_1$ 映射为荧光电光紫（Electric Indigo），宏观抑制剂 $V_2$ 映射为深海珊瑚金（Coral Gold），交界处自发融合成梦幻的翡翠碧绿：
// dual-turing-renderer.ts export class DualTuringArtStage { private canvas: HTMLCanvasElement; private ctx: CanvasRenderingContext2D; private engine: DualInhibitorTuringEngine; constructor(canvas: HTMLCanvasElement) { this.canvas = canvas; this.ctx = canvas.getContext('2d')!; this.engine = new DualInhibitorTuringEngine(canvas.width, canvas.height); } public renderLoop = () => { // 每一帧迭代 6 步加速化学动力学生长 for (let i = 0; i < 6; i++) { this.engine.step(); } const w = this.canvas.width; const h = this.canvas.height; const { v1, v2 } = this.engine.getBuffers(); const imgData = this.ctx.createImageData(w, h); const data = imgData.data; for (let i = 0; i < v1.length; i++) { const val1 = v1[i]; // 微观粒子强度 const val2 = v2[i]; // 宏观骨架强度 const idx = i * 4; // 双通道色彩空间合成 const r = Math.min(255, Math.floor(val2 * 255 * 1.2 + 9)); const g = Math.min(255, Math.floor(val1 * 180 + val2 * 100 + 13)); const b = Math.min(255, Math.floor(val1 * 255 * 1.4 + 22)); data[idx] = r; data[idx + 1] = g; data[idx + 2] = b; data[idx + 3] = 255; } this.ctx.putImageData(imgData, 0, 0); requestAnimationFrame(this.renderLoop); }; }总结
双重抑制剂图灵系统是形态发生学生物数学在计算机生成艺术中的巅峰跃迁。通过引入两个具有特征尺度差与交叉竞争抑制的化学反应流，我们在 Canvas 画布上亲手孵化出了一座充满多尺度有机律动、双色交错共生的数字深海珊瑚生态，为先锋生成艺术赋予了浩瀚深邃的生命形态之美。
