AlgoVisual Pro 算法与数据结构全景可视化实验室

AlgoVisual Pro · 算法与数据结构全景动态可视化实验室

项目简介

AlgoVisual Pro 是一款基于纯前端技术栈（HTML5 + Tailwind CSS + SVG DOM + Web Audio API）构建的算法与数据结构全景动态可视化实验室。

提供 6 类经典排序算法（快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序）、图寻路与迷宫生成算法（A* 启发式搜索、Dijkstra、BFS/DFS、递归分割迷宫）以及二叉搜索树拓扑演化的全景步进仿真，支持行级伪代码高亮追踪与 Web Audio 过程式声学反馈。

---

核心功能亮点

1. 经典排序算法全景演化

• 快速排序 (Quick Sort)、归并排序 (Merge Sort)、堆排序 (Heap Sort)、冒泡排序、插入排序与选择排序。

• 比较 (Compare)、交换 (Swap)、基准值 (Pivot) 与有序 (Sorted) 状态精细色彩编码。

• 状态机动作帧录制，支持单步向前/向后与无级速度调节。

2. 图寻路与迷宫生成引擎

• A* 启发式搜索（Manhattan 距离评估最优路径）。

• 20x35 交互式网格，支持自由绘制/清除障碍墙与递归分割迷宫自动生成。

3. 二叉搜索树 (BST) 拓扑演化

• 动态节点插入与基于 SVG 的树节点几何递归排版。

• 节点查找与拓扑结构连线自动重绘。

4. 行级伪代码追踪与声学合成

• 伪代码对应执行行高亮显示，清晰展示算法逻辑流。

• Web Audio 动态振荡器根据操作数值与类型合成沉浸式音效。

---

系统架构

• 排序算法状态机：动作帧录制与多状态微秒级渲染。

• 图论与寻路迷宫：A* 启发式搜索与递归分割迷宫。

• 树结构 SVG 拓扑：BST 插入与几何连线排版。

• 伪代码追踪与声学：行级映射与 Web Audio 音频反馈。

---

开源仓库与使用说明

• 代码仓库：https://gitcode.com/wdxb/algovisual-pro

• 使用方法：双击直接在浏览器中打开 index.html 即可开始算法可视化实验！
• 开发者作品展览馆 https://gallery.developer.huaweicloud.com/gallery/002a119c46c00000