Rust图像处理第16节-曼德博集合 Mandelbrot：用一行公式画出无限细节

花褪残红青杏小
0 阅读3分钟

曼德博集合 Mandelbrot：四个步骤学会算法

🦀 Rust + WASM 实战系列 第 16 篇 阅读时间：约 6 分钟 | 实战可运行

📌 写在前面

前三部分做的所有算法都是**"对每个像素 → 用某种公式算出颜色"**——几何变换是改坐标，卷积是算加权和，亮度是改 RGB 值。

从这一篇开始，进入全新的领域——分形：

对每个像素 → 在复平面迭代 → 根据迭代次数着色

公式超简单：

zn+1=zn2+c,z0=0z_{n+1} = z_n^2 + c, \quad z_0 = 0

但它生成的图案是无限的、自相似的、无限复杂的——这就是 Mandelbrot 集合。

这一篇不讲历史，不讲分形几何理论——只讲怎么算。跟着算法一步步走，看一个像素怎么变成颜色。

🚀 TL;DR

整个算法 4 步：

① 像素 → 复数 c              （算一个数字 c）
② 公式 z = z² + c            （z 反复变）
③ 什么是"逃逸"                （z 大到一定程度就停）
④ 颜色怎么定                  （按 iter 涂颜色）

核心代码就 7 行：

while iter < 200 && (zr*zr + zi*zi) < 4.0 {
    let new_zr = zr*zr - zi*zi + c_re;
    let new_zi = 2.0*zr*zi + c_im;
    zr = new_zr; zi = new_zi;
    iter += 1;
}

600×600 画布 + 200 步 ≈ 7200 万次浮点运算——WASM 比 JS 快 5~10 倍。

📖 目录

  1. 像素 → 复数
  2. 公式 z = z² + c 怎么算
  3. 什么是"逃逸"
  4. 颜色怎么定
  5. 跟着一个像素走一遍算法
  6. 关键代码
  7. 前端效果展示
  8. 踩坑提醒

一、像素 → 复数

画布和复平面

画布是 600×600600 \times 600 个离散的像素网格，每个像素是整数 (px,py)(\text{px}, \text{py})。

复平面是连续的二维实数平面，每个点是 (a,b)(a, b) 实数。

我们要给每个像素 (px,py)(\text{px}, \text{py}) 对应到一个复数 c=a+bic = a + bi。

映射公式

cre=centerx+px−w/2zoomcim=centery+py−h/2zoom\begin{aligned} c_{\text{re}} &= \text{center}_x + \frac{\text{px} - w/2}{\text{zoom}} \\ c_{\text{im}} &= \text{center}_y + \frac{\text{py} - h/2}{\text{zoom}} \end{aligned}
参数含义
centerx\text{center}_x, centery\text{center}_y画布中心对应复平面哪个点
zoom\text{zoom}缩放倍率（多少像素 = 1 个复平面单位）

例子（取 center=(−0.5,0)\text{center} = (-0.5, 0)，zoom=200\text{zoom} = 200）：

像素位置crec_{\text{re}}cimc_{\text{im}}复数cc
(300,300)(300, 300) 画布中心−0.5-0.500−0.5+0i-0.5 + 0i
(0,0)(0, 0) 左上角−2-2−1.5-1.5−2−1.5i-2 - 1.5i
(599,599)(599, 599) 右下角≈1\approx 1≈1.5\approx 1.51+1.5i1 + 1.5i

默认 center 为什么是 (-0.5, 0)？

曼德博集合整体偏左——主体在 c ∈ [-2, 0.25]。把画布中心定在 (-0.5, 0)，集合刚好被框在画布中间。

如果用 center=(0, 0)，集合会跑到画布左边，右边一大片空白。

代码

let inv_zoom = 1.0 / zoom;
for py in 0..600 {
    for px in 0..600 {
        let c_re = center_x + (px as f64 - 300.0) * inv_zoom;
        let c_im = center_y + (py as f64 - 300.0) * inv_zoom;
        // ... 后面用这个 c ...
    }
}

二、公式 z = z² + c 怎么算

z 是复数

复数 z=zr+zi⋅iz = \text{zr} + \text{zi} \cdot i，两部分：

zr=实部（普通的数）zi=虚部（带 i 的部分，i2=−1）\begin{aligned} \text{zr} &= \text{实部（普通的数）}\\ \text{zi} &= \text{虚部（带 } i \text{ 的部分，} i^2 = -1 \text{）} \end{aligned}

比如 z=3+4iz = 3 + 4i 意思是 zr=3\text{zr} = 3，zi=4\text{zi} = 4。

复数乘法公式

复数乘法有一个固定公式：

(a+bi)×(a+bi)=(a2−b2)+2abi(a + bi) \times (a + bi) = (a^2 - b^2) + 2abi
  • 实部：a2−b2a^2 - b^2
  • 虚部：2ab2ab

套用到 z2z^2

设 z=zr+zi⋅iz = \text{zr} + \text{zi} \cdot i，代入上面的公式（a=zra = \text{zr}，b=zib = \text{zi}）：

Re(z2)=zr2−zi2Im(z2)=2⋅zr⋅zi\begin{aligned} \text{Re}(z^2) &= \text{zr}^2 - \text{zi}^2 \\ \text{Im}(z^2) &= 2 \cdot \text{zr} \cdot \text{zi} \end{aligned}

再加 cc

Re(z2+c)=(zr2−zi2)+creIm(z2+c)=(2⋅zr⋅zi)+cim\begin{aligned} \text{Re}(z^2 + c) &= (\text{zr}^2 - \text{zi}^2) + c_{\text{re}} \\ \text{Im}(z^2 + c) &= (2 \cdot \text{zr} \cdot \text{zi}) + c_{\text{im}} \end{aligned}

代码

let new_zr = zr * zr - zi * zi + c_re;   // 实部公式
let new_zi = 2.0 * zr * zi + c_im;       // 虚部公式
zr = new_zr;
zi = new_zi;

这两行就是 z=z2+cz = z^2 + c 的代码版——把一行公式拆成"实部"和"虚部"两部分。

用 c=0.5c = 0.5（纯实数）验证

步骤zzz2z^2z2+cz^2 + c
000000.50.5
10.50.50.250.250.750.75
20.750.750.56250.56251.06251.0625

虚部一直是 0——因为 cc 是纯实数，从 0 出发永远不会有虚部。

三、什么是"逃逸"

概念

迭代过程中，z 越算越大 → "逃逸"（爆炸到无穷）。

我们关心的是"z 在变大的过程中超过多少就算跑飞了"。

为什么阈值是 2？

关键观察：复数乘法会让模长平方。

∣z2∣=∣z∣⋅∣z∣=∣z∣2|z^2| = |z| \cdot |z| = |z|^2

也就是说，∣z∣=3|z| = 3 时，下一步 ∣z2∣=9|z^2| = 9。

如果某一步 ∣z∣>2|z| > 2，那 ∣z2∣>4|z^2| > 4，下一步 ∣z4∣>16|z^4| > 16，再下一步 >256> 256……

指数级爆炸，再也回不来。

所以 ∣z∣>2|z| > 2 一定跑飞——定 2 就够了。

为什么代码里写 < 4.0？

∣z∣>2|z| > 2 等价于 ∣z∣2>4|z|^2 > 4，等价于 zr2+zi2>4\text{zr}^2 + \text{zi}^2 > 4。

但 zr2+zi2\sqrt{\text{zr}^2 + \text{zi}^2} 比 zr2+zi2\text{zr}^2 + \text{zi}^2 慢几倍——所以我们省掉 sqrt，直接判断平方和：

zr2+zi2<4  ⟺  ∣z∣<2  ⟺  还没逃逸\text{zr}^2 + \text{zi}^2 < 4 \iff |z| < 2 \iff \text{还没逃逸}

四、颜色怎么定

每个像素迭代完后得到一个 iter（0~200 之间）。根据 iter 决定涂什么颜色。

为了直观，我们用 5 色分类（不是渐变，方便表格对照）：

迭代次数 iter颜色含义
1 ~ 4红色跑飞快（1~4 步就逃）
5 ~ 9橙色较快
10 ~ 29黄色中等
30 ~ 99绿色较慢
100 ~ 199蓝色很慢（接近集合边缘）
200黑色200 步都没逃出（在集合内）

记忆口诀：

iter 越小 → 跑得越快 → 颜色越亮（红橙）
iter 越大 → 跑得越慢 → 颜色越深（蓝）
iter = 200 → 不跑 → 黑色

颜色 vs 集合边界的关系：

              远离边界           接近边界        在边界内
iter:           1                  100             200
颜色:           红 ──────────→ 蓝 ──────────→ 黑

五、跟着一个像素走一遍算法

选 画布中心 (300, 300)，对应 c = -0.5 + 0i：

z = 0 + 0i

逐行迭代 + 颜色判定

步骤zrzizr² + zi²还在算？如果停 → 颜色
0000✓-
1-0.500.25✓1 步 →红
2-0.2500.0625✓2 步 →红
3-0.437500.191✓3 步 →红
4-0.30900.095✓4 步 →红
5-0.40500.164✓5 步 →橙
............✓一直在 [-1, 1] 之间晃
50-0.35800.128✓50 步 →绿
............✓...
199-0.36700.135✓199 步 →蓝
200-0.36700.135✗ 达到上限黑色（在集合内）

结论：c = -0.5 永不逃 → 涂黑色。

再选另一个像素 c = 0.5（画布中心偏右）：

步骤zrzizr² + zi²还在算？如果停 → 颜色
0000✓-
10.500.25✓1 步 →红
20.7500.5625✓2 步 →红
31.062501.129✓3 步 →红
41.62902.654✓4 步 →红
53.15409.95 > 4✗逃了！红色（5 步就逃，最亮的红）

结论：c = 0.5 5 步就跑飞 → 涂红色。

算法总结

对每个像素 (px, py):
    1. 像素 → 复数 $c$              ← 第 ① 节
2. $z = 0$
3. 重复：
   - if $\text{zr}^2 + \text{zi}^2 > 4$：停止  ← 第 ③ 节
   - $z = z^2 + c$                       ← 第 ② 节
4. 用 $\text{iter}$ 涂颜色              ← 第 ④ 节

六、关键代码

#[wasm_bindgen]
pub fn mandelbrot(
    width: u32, height: u32,
    center_x: f64, center_y: f64, zoom: f64,
    max_iter: u32, palette: u32,
) -> Vec<u8> {
    let w = width as usize;
    let h = height as usize;
    let mut pixels = vec![0u8; w * h * 4];
    let inv_zoom = 1.0 / zoom;

    for py in 0..h {
        for px in 0..w {
            // ① 像素 → 复数 c
            let c_re = center_x + (px as f64 - w as f64 / 2.0) * inv_zoom;
            let c_im = center_y + (py as f64 - h as f64 / 2.0) * inv_zoom;

            // ②③ 迭代 + 逃逸判断
            let mut zr = 0.0;
            let mut zi = 0.0;
            let mut iter = 0;
            while iter < max_iter && (zr * zr + zi * zi) < 4.0 {
                let new_zr = zr * zr - zi * zi + c_re;
                let new_zi = 2.0 * zr * zi + c_im;
                zr = new_zr;
                zi = new_zi;
                iter += 1;
            }

            // ④ 涂色（按 iter 分桶）
            let (r, g, b) = color_from_iter(iter, max_iter, palette);
            let idx = (py * w + px) * 4;
            pixels[idx]     = r;
            pixels[idx + 1] = g;
            pixels[idx + 2] = b;
            pixels[idx + 3] = 255;
        }
    }

    pixels
}

核心循环 7 行。

涂色函数（按上面 ④ 节的分桶）

fn color_from_iter(iter: u32, max_iter: u32, palette: u32) -> (u8, u8, u8) {
    if iter >= max_iter {
        return (0, 0, 0);   // 黑：200 步都没逃
    }
    let t = iter as f64 / max_iter as f64;  // 0~1
    match palette {
        0 => fire(t),       // 经典红橙黄
        1 => ocean(t),      // 蓝色系
        2 => forest(t),     // 绿色系
        _ => grayscale(t),  // 灰度
    }
}

fn fire(t: f64) -> (u8, u8, u8) {
    let r = (255.0 * (1.0 - (1.0 - t).powi(2))) as u8;
    let g = (255.0 * t.powi(2)) as u8;
    let b = (255.0 * (t * 4.0).min(1.0) * t.powi(3) * 4.0) as u8;
    (r, g, b)
}

七、前端效果展示

1ba4f721-e77a-4d27-ad04-9cecab75d237.png

八、必须用 WASM

1. 性能坑：JS 跑不动，必须用 WASM

总工作量：

600×600=360,000 像素600 \times 600 = 360{,}000 \text{ 像素}

每个像素平均迭代 ∼50\sim 50 次，总浮点运算 ≈7200\approx 7200 万次。

实测：

实现耗时体感
纯 JS800~1500 ms卡顿
WASM (Rust)100~200 ms流畅

加速 5~10 倍。Mandelbrot 是 CPU 密集型算法，JS 原生跑不动——必须用 WASM。

一句话总结

Mandelbrot 算法五步：

① 像素 → 复数 c ② 公式 z = z² + c（代码拆成实部/虚部两行） ③ 逃逸判断：|z|² > 4（即 |z| > 2） ④ 颜色：iter 小 → 红，iter 大 → 蓝，iter=200 → 黑 ⑤ 跟着 c = -0.5（涂黑）和 c = 0.5（涂红）走一遍

整个代码核心 7 行，WASM 比 JS 快 5~10 倍。

📦 项目地址：pixel-math-wasm 🦀 Rust + WebAssembly 实战系列

🏷️ 标签：#Rust #WebAssembly #分形 #Mandelbrot #复数 #迭代 #算法

avatar
文章
阅读
粉丝