33 个数学场景，装在一个双击就开的网页里
八间"数学实验室"，所有参数都是滑块，PNG / 视频 / GIF 都能导出。
项目地址：github.com/wyfirstname/manim-ui
有件事你大概经历过。
看 3Blue1Brown 的视频，某个瞬间特别震撼------朱利亚集合随着参数 c 一点点挪过复平面，图形从一团黑里慢慢渗出花纹，然后"啪"地碎成尘埃。或者中心极限定理那一段，直方图从一坨方的、歪的，慢慢长出两个肩膀，最后变成一条光滑的钟形曲线。
看完你会点头："哦，原来是这个意思。"
然后过两天，有人问你"朱利亚集合到底是什么"，你还是只能回答："就是......很漂亮的那个。"
因为"过程"在视频里是被冻住的。 你看到的是结论那一帧，看不到参数往哪边拖会发生什么。
所以我把 manim 的渲染引擎搬进了浏览器，把每个场景的参数都做成可以拖的滑块。这个东西叫 manim-ui。
界面固定三栏：左边选模块和预设，中间是画布，右边拖参数。上图是"分形实验室"。
一、先说清楚它是什么
一句话------manim 的渲染引擎，加一个普通网页的外壳。
- 3Blue1Brown 那套 GPU 着色器（22 个 WGSL 文件）原样搬过来，一个字节都没改
- 除了一个 Python 起的本地静态服务器，不装任何东西；不联网、不上传数据
- 双击
启动.bat就能用，浏览器打开就是一台"数学仪器"
八个模块、33 个场景，下面一个一个说。
二、八间"数学实验室"
1. 分形实验室（6 个场景）
曼德博、朱利亚 ×3、曼德博放大、牛顿迭代。
曼德博集合最不讲道理的地方在于：它其实只是一个铺满画布的矩形，每个像素自己在着色器里迭代几百次------所以放大到多少倍都不糊。滚轮是以光标为锚点的：你对准边界上某个细节一路放大，它不会跑掉；放大到一定深度，你会发现同一片海湾又出现了一遍。
朱利亚集合正好相反：它的形状由一个参数 c 决定。右栏「实部 / 虚部」两个滑块一拖，整幅图实时变形------从连成一片，到碎成尘埃，中间只隔一点点的距离。
2. 函数绘图器（5 个场景）
三角函数、二次函数、黎曼和、曲线下面积，外加一个自定义函数。
自定义函数那个输入框可以直接写 a*sin(b*x+c)，里面出现的 a、b、c 会自动变成三个滑块挂在右边；改字母、加平方、写根号，回车就重画。
黎曼和那个场景，我建议想弄懂"积分到底是什么"的人都去拖一下"矩形数"------一排歪歪扭扭的矩形逐渐变密、变窄，曲线和 x 轴之间那条缝被一点点填平。
顺带说一句：这里的填充是真正按路径的"绕数"画的，任意自相交的曲线都填得对，不是拿三角形去拼近似。
3. 向量场流线（4 个场景）
涡旋、单吸引子、偶极子、双涡。
箭头表示方向，流线是"沿着场一路积出来"的轨迹，颜色由速率决定------越快的区域越偏黄。点一下播放，流线会从各自的种子点"长"出来，一条条铺满画面，很像水黾划过水面留下的痕。
4. 三维几何（4 个场景）
球面、环面、莫比乌斯带、正二十面体。鼠标拖拽是转动物体，滚轮是推近拉远。
材质那组滑块值得玩一下：反光、高光、阴影三档一起调，同一个球可以从塑料感一路调到金属感。
莫比乌斯带建议单独看看------把俯角拉到接近俯视，你会第一次看清它只有一条边、一个面。
5. 随机过程（3 个场景）
大数定律、中心极限定理、随机游走。
随机游走是我最推荐的开场：灰圈的半径是 √n · 步长。每个个体每一步走一个固定长度、方向随机，画一会儿你就会发现，个体基本都贴着那个圈跑------"扩散距离是 √n 而不是 n"，这就是它最直观的样子。
大数定律：抛硬币的经验均值一步步收敛到 p，绿带是 ±σ/√n 的收敛区间，它窄下去的速度就是"样本越多越准"的数学表达。
中心极限定理：n 个均匀随机变量相加、标准化，直方图一格格长成钟形，绿线是标准正态密度。拖动 n，看它从"完全不像"变成"贴得严丝合缝"。
这个模块的随机数是带种子的：同一颗种子永远给出同一张图。所以你拖线宽、改视野，图形不会重新抽样乱跳；点播放时曲线是一帧帧连续长出来的，不是每帧重新抽一遍------大数定律那条曲线从左边生长出来，就是这个机制。
6. 傅里叶级数（3 个场景）
方波、锯齿波、三角波。
这一节想讲清楚的只有一句话：级数收敛得快不快，不取决于波形"复杂不复杂"，而取决于它光不光滑。
方波有跳变，系数只能按 1/k 衰减------N 加得再大，跳变处那几个小尖（吉布斯现象）也压不平：
三角波是连续折线，系数按 1/k² 衰减，N = 2 就已经很像了：
把"项数"滑块从 1 拖到 40，看谐波一项一项加进来、波形一层一层贴近目标，比盯着公式看十遍直观得多。
7. 线性变换（4 个场景）
旋转、剪切、缩放、奇异矩阵。一个 2×2 矩阵到底对平面做了什么？把网格和单位正方形一起搬一遍，答案就摆在眼前。
色块的面积就是 |det M|；行列式为负时色块会换成红色------平面被翻了个面。
"奇异矩阵"那个场景尤其值得点开：det = 0，整个平面被拍扁成一条直线。这就是"没有逆矩阵"的几何含义。
8. 概率分布（4 个场景）
正态、二项、泊松、指数。核心叙事只有一句：曲线下的面积 = 概率。
淡蓝是整条曲线下的面积（恒为 1），黄色是你框出来的区间 a, b 那一块------这一块就是 P(a < X < b)。区间两个滑块一拖，顶部的概率标尺跟着变长变短，数值直接摆在那里，不用查表。
二项、泊松还能叠加一条正态近似曲线，n 一大就贴合------正好把前面"中心极限定理"那个模块接上了。
点播放，区间上限从分布最左边扫到最右边，阴影从零长满整条曲线：这就是累积分布函数长出来的过程。
三、看中了想存下来？三种导出
每个场景都能一键导出：
- PNG ------ 离屏重新渲染一遍再逐像素读回，不是截屏，拿到的是干净原图
- 录制视频（WebM） ------ 点一下开始录，所见即所得，边玩边录
- 导出 GIF ------ 整段循环动画离线编成 GIF，60 帧，丢进聊天窗口也能动
录制中按钮会变红并显示秒数，再点一下就把 WebM 存下来了。
做课件、写文章、发朋友圈，基本够用。
四、中英一键切换
右上角一个 中 / EN 按钮，整个界面都会跟着换------所有参数名、提示语、报错信息全换，不是只换个标题。
五、怎么用
环境要求只有两条：
- Edge 113+ 或 Chrome 113+（需要 WebGPU）
- Python 3.8+ ，且不用装任何第三方包------Python 只负责发文件
最省事的是绿色版：解压，双击 启动.bat，浏览器打开 http://127.0.0.1:7788/ 就行。
想从源码跑：
git clone https://github.com/wyfirstname/manim-ui.git
cd manim-ui
python server/serve.py⚠️ 千万别直接双击
web/index.html。 WebGPU 要求安全上下文（HTTPS 或 localhost），在file://下浏览器会直接把navigator.gpu藏掉，页面会报"这台机器不支持 WebGPU"------这是误导性提示，不是你的显卡有问题。
六、最后
整个项目我自己最得意的一点，其实很"程序员"：上游的着色器真的一行都没改。
但对你来说，值得记住的可能是另一件事------
数学里很多东西，"看懂公式"和"看见它怎么变"是两回事。这个工具就是把后者做成了可以上手拖的样子。
八个模块、33 个场景、PNG / WebM / GIF 三种导出，都做好了。接下来想把"预设场景"做成能保存、能分享的参数快照；有想加的场景，欢迎提 Issue 点菜。
github.com/wyfirstname/manim-ui
代码 MIT，着色器来自 3b1b/manim（同样是 MIT）。用着顺手的话，点个 Star。