算法可视化工具

项目动机

这学期正在上数据结构课。老师在黑板上画图、在 PPT 里放动画，但自己写代码时总觉得和视觉画面隔了一层。冒泡排序到底是怎么”冒”的？归并排序的递归树长什么样？

纸上画图太慢，直接看代码又不够直观。于是想做一个工具：输入一组数据，选中一个算法，看着它一步步变化。

计划功能

• 排序可视化 — 冒泡、选择、插入、归并、快速排序
• 搜索可视化 — 二分查找
• 图论入门 — BFS、DFS、Dijkstra
• 速度控制 — 可调速度，支持单步执行
• 随机/自定义数据 — 一键生成或手动输入

技术方案

用 React 管理 UI 和控制面板，Canvas API 渲染动画。每个算法实现为独立的纯函数，UI 层只负责调用和渲染。

这个项目目前还在构思和设计阶段。准备先从核心排序算法的动画逻辑开始实现。Canvas 的帧渲染会是第一个技术难点——需要精确控制每一步的延迟和颜色变化。

后续计划

完成后计划部署为独立子页面（如 rain-lab.com/lab/algo-visualizer），作为数据结构课程的配套学习工具。