手写算法动画上位机：从排序到线性代数可视化

算法可视化桌面应用，支持 30+ 算法逐步动画演示，涵盖查找、排序、信号处理、控制、机器学习与线性代数。

一、项目背景

学习算法时，静态图解往往难以体现「每一步发生了什么」。这个项目把算法的执行过程录制成步骤流，再逐帧回放成动画，配合伪代码与操作说明，直观展示每一步的数据变化。

整个程序没有使用任何第三方 UI 库，窗口、控件、画布全部用 GDI+ 手绘。

二、功能概览

左侧导航采用「大类下拉 + 子分类列表」两层结构。

经典算法

分类	算法
查找算法	顺序、二分、插值、斐波那契、跳跃、指数、分块、哈希
排序算法	冒泡、选择、插入、归并、快速、堆
信号算法	信号生成、滑动平均、二阶滤波、卡尔曼滤波、FFT、DFT
控制算法	蛇形清扫、PID 阶跃响应
机器学习	K-Means、K 近邻、线性回归、梯度下降

线性代数

分类	算法
矩阵计算	加法、减法、数乘、相乘、转置、求逆
方程组计算	高斯消元、LU 分解
其他	幂迭代法、PCA 主成分

三、界面与交互

无边框圆角窗口：自绘标题栏，支持拖动、双击最大化、边缘缩放
动画回放：播放 / 暂停 / 单步 / 后退 / 进度拖动 / 0.5x~2x 调速
九种画布渲染器：柱状图、波形图、频谱图、栅格地图、轨迹图、PID 曲线、散点图、矩阵表格、2D 向量
坐标轴数值：所有画布均带横纵坐标刻度
参数配置：数据量 10~5000，矩阵行列 2~6
数据交换：CSV 导入（信号 / 数组 / 坐标 / 点集）与全局导出
主题：浅灰底 + 白色圆角卡片，支持自定义窗口背景图

四、技术实现要点

1. 统一的算法接口与步骤录制

csharp 复制代码

public interface IAlgorithm
{
    string Category { get; }
    string Name { get; }
    RendererKind Renderer { get; }
    SceneKind Scene { get; }
    IReadOnlyList<string> PseudoCode { get; }
    void Run(AlgorithmContext ctx, StepRecorder recorder);
}

算法只负责「产出步骤」，不关心渲染：

csharp 复制代码

recorder.Record(new AnimStep
{
    Op = AnimOp.Swap,
    Indices = new[] { j, j + 1 },
    Extra = (int[])work.Clone(),
    Description = $"交换 A[{j}] 与 A[{j + 1}]"
});

渲染器从 AnimStep.Extra 取当前快照绘制，因此前进、后退、拖动进度条都能正确还原画面。

2. 按需快照，避免内存爆炸

排序算法是 O(n²) 步数，5000 个元素会产生千万级步骤。如果每步都克隆数组，内存直接爆掉。

解决方案是延迟构造：

csharp 复制代码

recorder.Record(() => new AnimStep
{
    Extra = (int[])work.Clone()   // 只有该步被采纳时才克隆
});

配合「按 50MB 快照预算自动计算采样间隔」，无论数据量多大，内存都有明确上限。

3. 异步生成 + 可取消

切换分类时，场景构建和步骤录制放到后台线程，界面不阻塞；同时用 CancellationToken 在录制点中断旧任务，避免后台继续占用 CPU。

4. 大数据量的像素聚合绘制

当柱状图数量超过画布像素宽度时，按像素列合并绘制，每列取该列内最高值。绘制开销固定为画布宽度量级，5000 个元素也能流畅播放。

5. 自绘圆角控件体系

RoundedPanel / RoundedButton / RoundedDropDown / WindowButton
统一的 Theme 配色与圆角路径工具
窗口无边框 + Region 圆角 + 系统投影

五、构建方式

powershell 复制代码

# 开发运行
dotnet run --project src/AlgorithmicArt

# 发布（框架依赖）
dotnet publish src/AlgorithmicArt/AlgorithmicArt.csproj -c Release -r win-x64 `
  --self-contained false -p:PublishSingleFile=true -o publish

# 发布（自包含单文件，免运行时）
dotnet publish src/AlgorithmicArt/AlgorithmicArt.csproj -c Release -r win-x64 `
  --self-contained true -p:PublishSingleFile=true `
  -p:EnableCompressionInSingleFile=true -o publish-standalone

六、工程结构

复制代码

src/AlgorithmicArt/
├── Core/
│   ├── Algorithm/        算法接口、步骤录制、场景构建、算法实现
│   ├── Replay/           回放引擎与状态机
│   └── Dispatch/         数据分发
├── Communication/        串口与协议解析
├── Render/               九类动画渲染器
├── Data/                 配置存储、CSV 导入、日志
└── UI/
    ├── MainForm.cs       主窗体（自绘标题栏 + 双层导航 + 状态栏）
    ├── Pages/            算法动画页
    └── Controls/         圆角控件与自定义画布

七、源码与下载

GitHub 源码：https://github.com/soda-code/Algorithmic-Art
Release 下载：https://github.com/soda-code/Algorithmic-Art/releases

技术栈：.NET 8 / WinForms / GDI+ 双缓冲 / System.IO.Ports

八、后续计划

补充行列式计算、克拉默法则、Gram-Schmidt 正交化
增加树形与图算法渲染器
支持动画导出为 GIF / 视频

如果这个项目对你有帮助，欢迎在 GitHub 点个 Star。