曼德博集：无限放大的分形之美

曼德博集：无限放大的分形之美

一段需求，码道自动写出 664 行、约 21 KB 的单文件分形浏览器——Canvas 渲染 + Web Worker 后台分块计算、鼠标拖拽/滚轮缩放、迭代次数可调、8 个经典坐标视图一键跳转，双击 HTML 就能看到绚丽的曼德博集

分类: ai-development
标签: CodeArts, AI编程, Mandelbrot, 分形, Canvas, Web Worker
难度: 初级
读者: 前端开发者、编程学习者、技术写作者

---

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个曼德博集（Mandelbrot）分形可视化网页应用，单个 HTML 文件即可运行……」约 4 分钟后，一个 664 行、约 21 KB 的完整分形浏览器就自动生成了：Canvas 渲染 Mandelbrot 集合，Web Worker 后台分块计算不阻塞界面；鼠标拖拽平移、滚轮以光标为中心缩放、双击放大、右键缩小；最大迭代次数 100-1000 可调，不同精度呈现不同色彩风格；内置整体视图、海马谷、螺旋点、三叉戟、闪电谷、象鼻谷、迷你曼德博、触须细节 8 个经典坐标视图，一键跳转；渲染时进度条实时显示百分比，token 机制让新渲染自动取消旧渲染；深色主题侧边控制面板还带实时坐标/缩放徽章和保存 PNG。双击 HTML 就能漫游无限精细的分形世界。

---

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装
sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"

# 2. 配置环境变量
export PATH=~/.codeartsdoer/installers:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK

# 3. 启动 TUI
codearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

---

3. 码道能力一览

这次开发中，码道展示了以下能力：

• 自然语言编程：我说「曼德博集分形可视化网页应用」，码道直接理解成渲染算法 + 并行计算方案 + 交互导航 + 着色美化一整套方案
• 自主技术选型：用 Web Worker 后台分块计算避免阻塞 UI，用平滑迭代着色（连续逃逸时间）让色彩过渡自然，快速跳过主心脏与周期 2 圆盘加速渲染
• 工程细节到位：token 机制支持取消过期渲染、拖拽/滚轮节流重绘、坐标与缩放实时显示、双击放大/右键缩小
• 自检与收尾：生成后主动用语法检查验证文件完整性，再汇报功能清单

---

4. 任务描述

我想要一个曼德博集（Mandelbrot）分形可视化网页应用，具体要求：

• 单个 HTML 文件即可运行，不需要任何构建步骤
• 用 Canvas 渲染 Mandelbrot 集合，鼠标拖拽平移、滚轮缩放
• 提供最大迭代次数调节（100-1000），不同迭代次数着色效果不同
• 预设几个经典坐标视图（整体视图、海马谷、螺旋点等），一键跳转
• 重新渲染时显示进度
• 深色主题界面美观，包含操作提示
• 双击 HTML 文件即可在浏览器中运行

---

5. 开发过程及真实截图

我在码道 TUI 中贴入需求后，码道开始拆解需求并生成代码：

码道在 Thinking 中规划实现方案（Web Worker 分块渲染、着色算法、交互设计）：

约 4 分钟后，码道汇报完成：语法检查通过、文件已创建、输出功能清单：

双击生成的 mandelbrot.html 在浏览器中运行，点击「海马谷」预设视图，放大 70 倍后海马谷区域密集的螺旋漩涡彩色细节惊艳呈现：

---

6. 代码解析

码道生成的代码是一个自包含的单页应用，核心逻辑非常清晰：

分块渲染：Web Worker 把画布按 24 行一包切块并行计算，每块算完立即回传主线程绘制，界面不卡顿：

worker.postMessage({ type: "render", token, width: w, height: h,
  centerX, centerY, scale, maxIter });
// Worker 内按行分块计算后：
self.postMessage({ type: "data", token, startY, endY, width, rows, buffer: buf }, [buf]);

迭代计算：对每个像素执行 Mandelbrot 迭代 z = z² + c，并用主心脏/周期 2 圆盘快速判定直接跳过集合内部点，大幅提速：

while (iter < maxIter) {
  zy = 2 * zx * zy + cy;
  zx = zx2 - zy2 + cx;
  zx2 = zx * zx; zy2 = zy * zy;
  zMag2 = zx2 + zy2;
  if (zMag2 > 256) break;
  iter++;
}

平滑着色：用连续逃逸时间做平滑插值，再映射到 HSL 色相，迭代次数越高色相变化越细腻：

const log_zn = Math.log(zMag2) * 0.5;
const nu = Math.log(log_zn / LN2) / LN2;
const smooth = iter + 1 - nu;
const hue = hueBase + smooth * hueScale;
hslToRgb(hue, sat, light, rgb);

取消机制：每次渲染递增 token，主线程和 Worker 都校验 token，过期的数据块直接丢弃，快速拖拽缩放时不会出现旧画面覆盖新画面：

if (m.token !== renderToken) return; // 过期数据

交互导航：预设视图按钮、迭代滑块、拖拽/滚轮/双击/右键手势统一走 render()，配合节流定时器避免频繁重算。

在浏览器中实际验证时发现一个细节问题：Worker 回传的分块数据消息最初缺少 token 字段，主线程的过期校验会把所有数据块都判为过期，导致画面全黑。补上 token 字段后渲染恢复正常——这也提醒我们，分块异步渲染的「消息身份校验」要保证消息双方字段一致。

---

7. 真实运行效果

双击 mandelbrot.html 即可开始漫游：左侧是深色控制面板，右侧是分形画布。默认整体视图下，经典的黑色心形曼德博集与彩色外圈立刻呈现，右上角实时显示中心坐标（Re/Im）与缩放倍数；拖动鼠标平移视野，滚动滚轮以光标为中心连续放大，双击放大、右键缩小；拖动「最大迭代次数」滑块（100-1000）后松手即重新渲染，进度条显示百分比，迭代越高细节越丰富；点「海马谷」等预设按钮一键跳转到著名坐标区域，海马谷的螺旋漩涡、触须细节的精细分支在 70 倍缩放下依然清晰；「重置视图」一键回到整体；「保存图片」把当前画布导出为 PNG。整个页面深色主题、字体与控件排版舒适，操作提示齐全，手机触屏同样可用。

---

8. 能力总结

• 一次生成完整可用：从需求到可双击运行的单文件分形浏览器，全程约 4 分钟，无需手工补代码
• 技术含量扎实：Web Worker 分块并行渲染、平滑迭代着色、主心脏快速判定、token 取消机制，方案专业完整
• 交互细节到位：拖拽/滚轮/双击/右键四手势导航、8 个经典视图一键跳转、进度条、坐标实时显示、PNG 导出，体验闭环完整
• 工程习惯良好：渲染/计算/交互函数拆分清晰、Worker 消息协议字段一致、节流防抖到位，代码结构清晰可读

---

9. 总结

用码道开发曼德博集分形可视化这类网页应用，最大的感受是「需求即产品」：把功能要点说清楚，码道就能给出包含完整技术方案与视觉风格的成品。对想了解分形算法、Web Worker 并行计算，或者刚学前端想看看「Canvas + Worker 是怎么配合渲染大图的」的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同类型的网页应用，继续记录真实的开发过程。