曼德博集合：鼠标拖到哪，无限放大的分形边界就跟到哪

无限放大一张图，居然永远有新东西：曼德博集合的边界像没有尽头的海岸线，越往里越密。

这个 App 做什么

• 高清渲染分形：画布按像素计算逃逸次数，拖动平移、滚轮缩放都实时更新。
• 缩放中心跟随鼠标：滚轮指向哪里，画面就以哪里为中心前进一档。
• 三个实用按钮：复位、平滑配色、提高迭代次数、保存坐标都放在暗色科技风界面里。
• 缩放倍率实时显示：HUD 同时标出中心坐标与倍率，知道看到的是哪一层。
• 标注迭代点含义：底部把迭代和逃逸边界讲清楚，不用先背公式。

为什么值得看

• 曼德博集合没有藏起来的建模逻辑，只有复平面上的 z² + c 反复迭代，却在边界藏着复刻不完的自相似细节。
• 缩放到一定程度，图形一直在变，这种“每一层都像又不一样”的体验很适合做互动文章开篇。
• 无限缩放本身就是一个能让读者自然收藏并回来再看的主题。

进入 AI 开发者空间

本文用码道 WebUI 版演示，不装任何本地软件，浏览器就能用。先打开：

https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz

进入后选择「体验版」，首次使用会跳到华为云登录页，扫码登录一次，之后浏览器会话会复用；再按提示点击「同意」，让临时凭据自动配置并创建沙箱。

进入 AI 开发者空间主界面后，等左侧菜单加载出来，找到 CodeArts 并点击右侧的浏览器图标，打开码道 WebUI 对话窗口。

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

准备环境：进入 CodeArts

进入 CodeArts：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

浏览器打开 CodeArts 后，按提示开通体验版，再回到上一步的 AI 开发者空间进入码道 WebUI。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

请在 /workspace/mandelbrot 目录下做一个单文件网页应用 index.html：曼德博集合可无限缩放浏览器。画布高清渲染分形，鼠标拖动平移、滚轮缩放并实时显示缩放倍率，提供复位、平滑配色、提高迭代次数、保存坐标三个按钮，界面暗色科技感，标注迭代点含义。完成后检测空闲端口，用 python3 -m http.server <空闲端口> --directory /workspace/mandelbrot 启动并告诉我访问地址。

这轮码道具体做了什么

• 在 /workspace/mandelbrot 下生成单文件 index.html，把像素逃逸计算放进 Worker，避免大计算量拖住页面。
• 自动检测空闲端口并启动静态服务，验证 HTTP 200 后给出预览地址。
• 把缩放范围设计成可变的 span，配合哈希记录坐标，分享链接也能回到同一片视野。

代码亮点

1. zoomAt：把鼠标位置当作缩放锚点

function zoomAt(mx, my, f) {
  var span = state.span * f;
  var pxOld = state.span / cssH;
  var pxNew = span / cssH;
  var fx = state.cx + (mx - cssW / 2) * pxOld;
  var fy = state.cy + (my - cssH / 2) * pxOld;
  state.span = span;
  state.cx = fx - (mx - cssW / 2) * pxNew;
  state.cy = fy - (my - cssH / 2) * pxNew;
  requestRender();
}

缩放因子先乘到覆盖范围上，再用旧比例把鼠标位置还原成复平面坐标，最后套回新比例。这样放大后鼠标盯住的地方不会漂移，边界会围绕光标重新铺满画布。

验证与踩坑

• 初始画面很快完成铺色，滚轮放大后重新渲染，边界细节逐级浮出。
• 提高迭代次数一按，边缘的噪点变细，代价是单帧计算量同步增加。

• 保存坐标会复制带参数字段的 URL，回到指定视野时图形基本一致。

本地复现

这是单文件 index.html，没有第三方依赖。保存到本地后双击用浏览器打开，或起一个本地静态服务：

python3 -m http.server 8080 --directory codearts-mandelbrot-zoom

浏览器访问 http://127.0.0.1:8080 即可。

生成页面和截图已同步到公开 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本期目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-mandelbrot-zoom

使用码道体会

• 分形渲染最难的是知道渲染单位和屏幕像素之间怎么换算。码道 WebUI 把 span 定为复平面区间半宽度，缩放时只改这一个量，坐标映射清楚很多。
• 把像素计算放进 Worker 后，缩放时按钮不会卡死，适合后面继续加高分辨率出图或缓存常用视野。

总结

曼德博集合的深层乐趣来自无限缩放，几个按钮把缩放中心、迭代上限和坐标都显式化了。下一步可以考虑迭代色带、高分辨率导出或缓存常用视野。