返回赛题列表
Mandelbrot 实时分形浏览器
挑战构建一个 Canvas Mandelbrot 分形浏览器，支持拖拽平移、滚轮缩放和实时着色——从零约束的直觉生成到 Julia 集联动+Web Worker 异步渲染的工程深度挑战。
规则说明▼
phase1：零约束，只说"做一个 Mandelbrot 分形浏览器"，看模型对分形可视化的自主理解——会不会加缩放？着色方案是什么？有没有性能意识？
phase2：给出完整的功能规格，包括多种着色算法、Julia 集联动、Web Worker 异步计算等，考察模型处理计算密集型渲染管线的工程能力
Prompt▼
phase1：▼
制作一个单文件 HTML 的 Mandelbrot 分形浏览器。
phase2：▼
请直接输出一个完整可运行的**单文件 HTML**（内联 CSS + 原生 JS，不要使用 JSX 或任何需要编译的语法）。
制作一个 Mandelbrot 分形浏览器，要求如下：
````
### 核心渲染
1. 使用 Canvas 逐像素渲染 Mandelbrot 集合
2. 提供**迭代次数滑块**（范围 50–2000），拖动后实时重新渲染
3. 提供至少 **4 种着色算法**供用户切换：
- 逃逸时间线性映射（经典彩虹）
- 平滑着色（Normalized Iteration Count）
- 直方图着色（Histogram Coloring）
- 自定义调色板（如 Ultra Fractal 风格的渐变色带）
4. 每种着色算法效果必须视觉差异明显，不能只是色相偏移
### 交互导航
5. **鼠标拖拽平移**：按住左键拖拽移动视野
6. **滚轮缩放**：以鼠标指针位置为中心缩放，支持至少 10^13 倍缩放深度
7. **双击缩放**：双击以该点为中心放大 2x
8. 缩放和平移过程中的过渡应尽可能流畅，避免白屏闪烁
### 信息 HUD
9. 页面上实时显示当前视野信息：
- 中心坐标（实部 + 虚部）
- 缩放级别
- 当前迭代次数
- 渲染耗时（ms）
10. 鼠标位置对应的复平面坐标实时显示
### Julia 集联动
11. 页面右侧或底部提供一个较小的 **Julia 集预览画布**
12. 当鼠标在 Mandelbrot 画布上移动时，以鼠标位置对应的复数 c 为参数，**实时渲染**该 c 值的 Julia 集
13. Julia 集预览应与主画布使用相同的着色算法
14. 支持**点击锁定**：点击 Mandelbrot 上某点后，Julia 集固定显示该 c 值，不再跟随鼠标；再次点击解锁
### 性能优化
15. 使用 **Web Worker** 将分形计算移出主线程，保持 UI 交互流畅
16. 实现**分块渐进渲染**：先快速显示低分辨率预览，再逐步细化到全分辨率
17. 缩放/平移操作时，如果前一次渲染尚未完成，应**取消旧任务**并启动新渲染
### 界面布局
18. 左侧主区域为 Mandelbrot 画布（自适应填满可用空间）
19. 右侧为控制面板 + Julia 集预览，宽度约 300px
20. 控制面板包含：着色算法选择、迭代次数滑块、坐标信息、渲染耗时
21. 整体深色主题，科学可视化工具的专业感
22. 响应式：窄屏下控制面板和 Julia 集预览移到底部
````