反应扩散实验室Gray-Scott · WebGL 实时

两个数字,长出自然界的花纹

下面这块画布正在跑一条 1952 年提出的方程。没有贴图,没有素材, 每一帧的每个像素都是算出来的。拖动 feed / kill 两个滑块, 花纹的种类会整个变掉——珊瑚、迷宫、斑马、细胞分裂。

在画布上按住拖动 · 花纹会从你手指下长出来
珊瑚生长F 0.0545 · k 0.0620–– fps

两个核心参数

0.0545

往系统里补多少原料。调大 → 花纹更肥、长得更满。

0.0620

把生成物清走的速度。调大 → 花纹变细、断开、最后整片消失。

16×
0.040
配色

参数地图

横轴 kill,纵轴 feed。那条蓝线是 k = √F/2 − F九种花纹全部挤在这条线上下不到 0.01 的一条缝里。 往下偏一点就糊成均匀一片,往上偏一点就几秒内归于空白。点地图任意位置直接跳过去。

实测能长出花纹的活带糊成一片 / 归于空白当前参数

九种花纹,同一个公式

下面每一组数字都是在这个站上逐个跑出来、截图确认过的—— 网上流传的参数表里有几组在本站这套系数下直接归于空白,已经换掉。 点一下会重新播种,给它 3–10 秒长开。

它凭什么能长出花纹

01

两种东西在抢地盘

一种叫 A,一种叫 B。B 会吃掉 A 把自己变多(A + 2B → 3B), 同时系统不停补充 A、不停清走 B。就这么两句话。

02

扩散速度不一样

A 扩散得快,B 扩散得慢(本站取 2:1)。「局部自我放大 + 远处被抑制」——图灵 1952 年指出,这两条凑齐, 均匀的一锅汤就会自己失稳,长出稳定的空间花纹。

03

只剩两个旋钮

补料速度 feed 和清除速度 kill。整个花纹世界的种类全压在这两个数上, 而且真正有戏的取值挤在一条宽度不到 0.01 的缝里—— 这就是参数地图上那条蓝线两侧的窄带。

04

为什么像真的

豹斑、斑马纹、河豚体表、珊瑚骨骼、贝壳花纹—— 生物学家在这些图案里反复验出同一套「激活—抑制」机制。 所以它不是像自然,是走了跟自然同一条路。

∂A/∂t = DA∇²AAB² + F(1−A)
∂B/∂t = DB∇²B + AB² − (F+k)B

本站取 DA=1.0,DB=0.5,Δt=1.0,9 点拉普拉斯算子,画布四边环绕相接(所以存下来的图能无缝平铺当壁纸)。

这站是从哪来的

原项目

keijiro / RDSystem

日本图形程序员 Keijiro Takahashi(keijiro)用 Unity 的 CustomRenderTexture 写的反应扩散系统。GitHub 上 324 star、28 fork,2017 年建仓,2025 年 8 月仍在更新。 它以 Unlicense(公共领域)释出——法律上不要求署名, 但这站的每一行都是站在它的思路上做的,所以署名照给。

原项目要装 Unity 编辑器才能看到花纹演化;本站把同一个模型搬进浏览器, 用 WebGL2 双缓冲浮点纹理重写,点开就在动。

github.com/keijiro/RDSystem ↗
学术出处

Gray-Scott 模型

  • A. M. Turing (1952)The Chemical Basis of Morphogenesis,Phil. Trans. R. Soc. B 237(641):图灵斑图的源头论文。
  • P. Gray & S. K. Scott (1983–1984),连续搅拌反应器中自催化反应的振荡与多稳态,Chem. Eng. Sci.:本模型的化学原型。
  • J. E. Pearson (1993)Complex Patterns in a Simple System,Science 261(5118): 189–192:第一次把 F–k 参数平面上的花纹分类画出来,本站参数地图的依据。

模型本身是公开的成熟算法,无版权归属;本站代码 MIT。