生成艺术与创意编程 可视化实验室

用交互式 SVG 呈现 L-System、分形、Perlin Noise、粒子系统、反应扩散等生成艺术核心技术。八个模块,纯原生实现。

zero-deps HTML / CSS / JS + SVG requestAnimationFrame prefers-reduced-motion
MODULE 01

L-System 递归生长

Lindenmayer 系统用字符串重写规则递归生成植物形态。F=前进,+/-=转向,[/]=压栈/出栈。调整迭代深度与角度观察分形生长。

l-system.svg
主茎 分支 叶 栈轨迹

Fractal Plant

规则 F → FF+[+F-F-F]-[-F+F+F],角度 22.5°。每次迭代把每个 F 替换为规则串,指数级增长分支数。

迭代深度
4
字符数
—
分支数
—
线段数
—
MODULE 02

Mandelbrot 与 Julia 集

复平面迭代 z → z² + c,逃逸时间决定颜色。Mandelbrot 固定 c 扫描 z₀;Julia 固定 z₀=0 扫描 c。点击图像缩放探索自相似细节。

fractal.svg
集合内 快速逃逸 边界 慢逃逸

Mandelbrot 集

对每个点 c,从 z₀=0 迭代 z=z²+c,若 |z| 始终有界则 c 属于 Mandelbrot 集。边界处逃逸时间变化剧烈,形成无穷自相似分形。

视图
全貌
缩放
1×
最大迭代
64
分辨率
—
MODULE 03

Perlin Noise 柏林噪声

梯度噪声插值生成平滑连续的伪随机场,是地形、云雾、纹理的基础。1D 作地形剖面,2D 作高度图,3D 作体素切片。FBM 叠加多倍频。

perlin-noise.svg
低值 中值 高值 等高线

2D Perlin Noise

每个格点赋予随机梯度,用平滑插值(fade=6t⁵-15t⁴+10t³)混合,得到 C¹ 连续噪声。FBM 把多倍频叠加,振幅减半频率加倍,模拟自然纹理。

维度
2D
倍频
4
尺度
0.04
种子
—
MODULE 04

Reaction-Diffusion 图灵斑图

Gray-Scott 模型:两种反应物 U/V 扩散并反应,参数 F(feed)与 k(kill)决定斑点、条纹、孔洞等图灵斑图。播放观察自发对称破缺。

reaction-diffusion.svg
U 高(基底) 过渡 V 高(反应物) 活跃边界

Gray-Scott 方程

∂U/∂t = Du·∇²U − U·V² + F·(1−U) ∂V/∂t = Dv·∇²V + U·V² − (F+k)·V

Du=1.0, Dv=0.5(相对)。U 像底物,V 像催化剂。F/k 落入特定区间时,V 自组织成稳定斑点或条纹——即图灵斑图。

步数
0
F (feed)
0.055
k (kill)
0.062
状态
暂停
MODULE 05

粒子系统与流场

粒子在向量场中运动:Perlin 流场平滑漂流、引力中心吸引/排斥、湍流随机扰动。轨迹叠加形成丝绸般流动线条。

particles.svg
流场 引力 湍流 粒子轨迹

Perlin 流场

每个粒子根据所在位置的噪声值取方向角,沿场前进。流场平滑无突变,粒子轨迹自然弯曲,类似烟雾或气流。

模式
流场
粒子数
400
帧率
—
状态
运行
MODULE 06

着色器艺术模拟

模拟 GLSL Fragment Shader 的逐像素计算:等离子体、射线行进球体、万花筒。颜色映射把标量场转为色带。播放观察时间演化。

shader-art.svg
viridis plasma ice heat

Plasma 等离子体

经典 plasma:v = sin(x)+sin(y)+sin(x+y+t)+sin(dist·t),对结果做颜色映射。GLSL 中每像素并行,这里用网格采样近似。

效果
Plasma
色带
plasma
采样
—
时间 t
0.0
MODULE 07

元胞自动机

Rule 30 一维规则产生混沌;Conway 生命游戏二维涌现;Wireworld 模拟电子电路。播放观察简单规则如何涌现复杂行为。

cellular-automata.svg
活/导线 电子头 电子尾 死/空

Rule 30

Rule 30:新细胞 = 左中右三邻域经规则表映射。Wolfram 证明其中心列伪随机,Mathematica 用作随机数源。是典型的 Class III 混沌。

规则
Rule 30
代数
0
活细胞
—
状态
暂停
MODULE 08

Voronoi 与 Delaunay

Voronoi 把平面按最近邻分区;Delaunay 三角剖分最大化最小角,二者互为对偶。点击添加点,重新生成观察结构演化。

geometry-art.svg
Voronoi 单元 Delaunay 边 种子点 外接圆

Voronoi + Delaunay

Delaunay 三角剖分:任一三角形外接圆不含其它点。其对偶图即 Voronoi 图。Bowyer-Watson 算法逐点插入,遇包含新点的外接圆三角形则删除其边、重新连接。

显示
两者
种子点
—
三角形
—
Voronoi 边
—