AlgoFlow Pro 经典算法与数据结构动态可视化实验室

AlgoFlow Pro · 经典算法与数据结构动态可视化实验室

项目简介

AlgoFlow Pro 是一款专为计算机科学学生、软件工程师及算法爱好者打造的现代化纯前端算法可视化与动态调试交互实验室。

系统集成了 6 大经典排序算法（快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序）、Dijkstra 与 BFS 图论迷宫寻路算法、Web Audio 原生数值谐波声学反馈 与 Big-O 时空复杂度实时分析看板，通过色彩变换与动态柱状图直观呈现算法内部运行机理。

---

核心功能亮点

1. 6 大经典排序算法动态演示

• 支持快速排序（Quick Sort）、归并排序（Merge Sort）、堆排序（Heap Sort）、冒泡排序（Bubble Sort）、插入排序（Insertion Sort）、选择排序（Selection Sort）。

• 支持随机、接近有序、完全逆序、少量唯一值等 4 种典型数据分布。

• 动态比较（黄色）、交换写入（红色）、已就绪有序（绿色）多态色彩实时染色。

2. Web Audio 动态谐波频率反馈

• 零依赖外部音频文件，根据正在操作的数组元素数值实时映射生成 150Hz 750Hz 正弦波，带来沉浸式“听算法”体验。

3. 图最短路径与迷宫寻路 (Dijkstra / BFS)

• 14×25 交互式网格，支持鼠标点击与拖拽自由绘制障碍物墙体。

• 实时演示波前扩散（Wavefront Expansion）与全局最短路径回溯。

4. 实时计数器与 Big-O 复杂度看板

• 毫秒级统计比较次数（Comparisons）、交换/写入次数（Swaps/Writes）、访问节点数与路径长度。

• 实时展示对应算法的理论时间复杂度与空间复杂度。

---

系统架构设计

架构模块说明

• 数据驱动层：构建多分布样本数据源与二维网格拓扑。

• 算法执行状态机：基于异步 Promise 实现微秒级动画帧延时控制与暂停/恢复调度。

• 声学合成引擎：Web Audio 振荡器链路实时合成平滑声波。

• 表现与指标层：Tailwind CSS 暗黑玻璃拟态看板与自适应响应式布局。

---

开源仓库与在线体验

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

• 使用方法：直接在浏览器中打开 index.html 即可开始体验！
• 项目地址：开发者作品展览馆 https://gallery.developer.huaweicloud.com/gallery/00-7bfb4013f7000