基于 Next.js 的曼德勃罗集 Web 可视化应用

曼德勃罗集可视化应用

一个基于 Next.js 构建的沉浸式曼德勃罗集（Mandelbrot Set）探索工具，提供丰富的交互功能和精美的视觉效果。

源代码：https://gitee.com/yanjianzhong007/mandelbrotset
在线演示：https://z2p9jz49tp.coze.site/

git clone https://gitee.com/yanjianzhong007/mandelbrotset.git

功能特性

核心功能

• 全屏显示：沉浸式全屏浏览体验
• 高性能渲染：基于 Canvas 的像素级渲染，支持流畅的实时交互
• 拉框选择：
  • Shift + 拖拽：放大选定区域
  • Ctrl + 拖拽：缩小选定区域
• 一键全图：快速返回完整视图
• 缩放滑块：快速定位缩放级别（2x - 1000x）

预设位置（上帝的指纹）

内置 10 个经典的分形区域：

1. 完整视图
2. 象鼻 (Elephant Valley)
3. 海马谷 (Seahorse Valley)
4. 双螺旋 (Double Spiral)
5. 轻盈之羽 (Light Feather)
6. 螺旋星系 (Spiral Galaxy)
7. 迷你曼德勃罗 (Mini Mandelbrot)
8. 海马群岛 (Seahorse Islands)
9. 闪电峡谷 (Lightning Canyon)
10. 螺旋花 (Spiral Flower)

颜色主题

7 种精心设计的颜色方案：

• 彩虹
• 火焰
• 海洋
• 灰度
• 霓虹
• 日落
• 森林

交互工具

• 撤销功能：支持多步撤销，快捷键 Ctrl+Z
• 书签管理：保存、分类、命名并快速跳转到感兴趣的视图
• 移动端支持：单指拖拽平移，双指缩放

界面特性

• 悬浮控制面板：可折叠，支持深色/浅色主题切换
• 渲染进度指示器：实时显示渲染状态
• 水印显示：多行填充水印，跟随图案移动，字体小巧淡雅

技术栈

• 框架: Next.js 16.0.10 (App Router)
• 语言: TypeScript 5
• UI: React 19 + Tailwind CSS 4
• 渲染: HTML5 Canvas
• 组件库: shadcn/ui

快速开始

环境要求

• Node.js 18+
• npm

操作指南

基本操作

• 拖拽：按住鼠标左键拖动视图
• 放大：按住 Shift 键并拖拽选择区域
• 缩小：按住 Ctrl 键并拖拽选择区域
• 缩放滑块：在控制面板中拖动滑块快速缩放
• 撤销：按 Ctrl+Z 或点击撤销按钮

预设位置

在控制面板的'上帝的指纹'下拉菜单中选择预设位置，快速跳转到经典分形区域。

颜色主题

在控制面板的'颜色主题'下拉菜单中选择不同的配色方案，探索不同的视觉风格。

书签管理

1. 点击控制面板中的书签图标（黄色书签按钮）
2. 点击'添加书签'保存当前视图
3. 为书签命名并选择分类
4. 点击书签条目快速跳转

移动端操作

• 单指拖拽：平移视图
• 双指捏合：缩放视图

主题切换

点击控制面板右上角的太阳/月亮图标切换深色/浅色主题。

项目结构

mandelbrot-set/
├── src/
│   ├── app/
│   │   └── page.tsx # 主页面组件
│   ├── components/
│   │   ├── ControlPanel.tsx # 控制面板
│   │   ├── MandelbrotCanvas.tsx # Canvas 渲染组件
│   │   ├── BookmarksPanel.tsx # 书签管理面板
│   │   ├── ProgressBar.tsx # 进度指示器
│   │   └── ui/ # shadcn/ui 组件
│   └── lib/
│       └── mandelbrot.ts # 核心算法和工具函数
├── public/ # 静态资源
└── package.json

核心算法

本项目使用经典的曼德勃罗集迭代算法：

z_{n+1} = z_n^2 + c

其中 c 是复平面上的点，z 从 0 开始迭代。如果 |z| 始终保持在 2 以内，则点 c 属于曼德勃罗集。

性能优化

• 使用 Canvas 直接操作像素，避免 DOM 操作
• 画质模式切换：预览模式降低分辨率提升性能
• 分块渲染：大画布分块处理，避免界面卡顿
• Web Worker 支持：后台计算，保持界面响应

浏览器支持

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• 支持桌面和移动端

开发说明

代码规范

• 使用 TypeScript 进行类型检查
• 遵循 ESLint 规则
• 使用 Prettier 格式化代码

构建检查

pnpm build

许可证

MIT

致谢

本应用受到曼德勃罗集的数学美学的启发，旨在为用户提供探索分形世界的沉浸式体验。