我在学 C++,同时喜欢把原理做成能直接点开就玩的网页。 下面三个实验室都是零依赖、带测试、有在线演示的小项目 —— 点进去就能跑。
1. Fluid Lab — 浏览器实时流体模拟
纯 JavaScript 实现 Navier–Stokes 求解器:半拉格朗日对流 + SOR 压力投影 + 涡度增强。 拖动鼠标就能搅动一缸会流动的彩色墨水,每一帧都是真的在解方程。
前向/后向差分配对的投影格式保证离散意义下无散;涡度强度按 1/N 归一化,在 96²/128²/192² 三档网格上手感一致。
2. CHIP-8 Lab — 虚拟机 + 汇编器 + 调试器
从零写的 CHIP-8 虚拟机,附带自制汇编器、反汇编器、单步调试器和三支手写汇编 ROM。 右侧面板可以实时看寄存器、栈、内存和反汇编。
测试覆盖全部 35 条指令的编解码往返,以及 ROM 的像素级回归 —— 它抓出过三处真 bug(边界条件写反、寄存器被 Fx65 覆盖)。
3. Autograd Lab — 手写自动微分 + 训练可视化
200 行实现的反向模式自动微分引擎(批量节点、广播、拓扑排序反向传播), 用它训练多层感知机,并把决策边界和损失曲线实时画出来。
每个算子都用中心差分做了数值梯度校验;异或、双螺旋等数据集可一键切换,还能现场对比 SGD / 动量 / Adam。
- 零依赖:三个项目的前端与测试都不需要 npm install,
node tests/xxx.js就能跑 - 可验证:能测的都测了 —— 数值梯度校验、ROM 像素回归、离散散度、端到端精度
- 能演示:每个仓库都有 GitHub Pages 在线演示,点开即用
- 可复现:所有随机性都来自可注入的种子,同种子必定得到同结果
| 项目 | 关键词 | 测试 | 在线演示 |
|---|---|---|---|
| fluid-lab | Navier–Stokes · 涡度增强 · Canvas | 10 | 打开 |
| chip8-lab | 虚拟机 · 汇编器 · 调试器 | 37 | 打开 |
| autograd-lab | 自动微分 · 反向传播 · 可视化 | 41 | 打开 |
还有日常练习仓库 learn-claude-code。