曼德勃罗集web可视化应用

曼德勃罗集可视化应用

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

源代码：https://gitee.com/yanjianzhong007/mandelbrotset

在线演示：https://z2p9jz49tp.coze.site/

bash 复制代码

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

功能特性

核心功能

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

预设位置（上帝的指纹）

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

完整视图
象鼻 (Elephant Valley)
海马谷 (Seahorse Valley)
双螺旋 (Double Spiral)
轻盈之羽 (Light Feather)
螺旋星系 (Spiral Galaxy)
迷你曼德勃罗 (Mini Mandelbrot)
海马群岛 (Seahorse Islands)
闪电峡谷 (Lightning Canyon)
螺旋花 (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 或点击撤销按钮

预设位置

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

颜色主题

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

书签管理

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

移动端操作

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

主题切换

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

项目结构

复制代码

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 格式化代码

构建检查

bash 复制代码

pnpm build

许可证

MIT

致谢

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