万物皆数
交互式数学可视化实验室
"万物皆数" —— 毕达哥拉斯
这是一个纯前端的数学可视化实验室，包含 7 个经典探索模块与 31 个交互式教学动画。每个模块都用 Canvas 实时绘制，你可以拖动滑块、点击按钮、滚轮缩放，亲手操纵数学对象；教学动画按数与运算、方程函数、几何图形、曲线向量、概率统计分栏陈列，点击卡片即可进入全屏交互。无需安装任何东西，浏览器打开即可使用。
38 个可交互的数学可视化内容：7 个经典探索模块覆盖分形、几何、数论、算法，31 个教学动画覆盖初中阶段数与运算、方程函数、几何图形、曲线向量、概率统计五大主题。
经典模块拖动右侧滑块调参数、点击按钮触发动画、滚轮缩放图形；教学动画区按主题分栏横向滑动，点击任意卡片打开 Modal 即可进入全屏交互演示。所有操作即时反馈，所见即所得。
按数字键 1~7 快速跳转到 7 个经典模块，按 8 直接跳转到交互式教学动画区，省去滚动寻找的时间。
分形几何 · 递归
从一条线段出发，递归分裂出树枝。调整迭代深度看树如何从一根线变成整片森林。
试试把迭代深度拉到最大，再开关风吹效果。
→ 进入平面几何 · 定理证明
a² + b² = c² 的三种证明。切换赵爽弦图、面积割补、相似比例，拖动勾股长度看面积如何变化。
切换三种证明方式，理解同一个定理的不同视角。
→ 进入数论 · 极限思想
刘徽用正多边形逼近圆周来计算 π。增加边数，看 π 的近似值如何越来越精确。
点击播放动画，观看边数从 6 一路翻倍到 1000 的过程。
→ 进入复变函数 · 分形
复平面上 z = z² + c 的迭代结果。滚轮放大任意区域，无论放多大都能看到崭新的分形结构。
在边缘彩色区域滚动缩放，那里细节最丰富。
→ 进入数列 · 黄金比例
斐波那契数列 1,1,2,3,5,8... 拼成正方形后画出黄金螺旋。看相邻项之比如何逼近 φ ≈ 1.618。
点击"演化"按钮，观看螺旋逐圈生长的过程。
→ 进入计算机科学 · 算法
冒泡、快排、归并、堆排序的实时可视化。红色比较、金色交换、绿色已排序，直观看到效率差异。
同一数据量下分别跑冒泡和快排，对比比较次数。
→ 进入工程 · 性能优化
6张技术卡片说明本项目的关键技术决策：Canvas像素级操作、视口感知渲染调度、异步排序动画引擎等。适合想了解实现细节的读者。
面试或技术分享时可以重点看这一节。
→ 进入分形的精髓在于自相似：局部与整体形状相同。一棵树从一个简单规则——"每根枝条长出两根更短的枝条"——递归生长，最终形成繁茂的树冠。拖动滑块，观察迭代深度、分支角度、收缩比率如何改变树的形态。
分形维数
≈ 1.59
枝条总数
2046
直角三角形两直角边的平方和等于斜边的平方：a² + b² = c²。《周髀算经》记载"勾三股四弦五"，三国赵爽用弦图给出严密证明，比毕达哥拉斯早数百年。切换三种证明方法，拖动滑块改变勾股长度，观察面积关系。
弦 (勾²+股²=弦²)
5.00
勾² + 股²
25.00
弦²
25.00
圆周率 π 怎么算？公元3世纪，刘徽提出割圆术：用圆内接和外包正多边形逼近圆周。边数越多，多边形周长越接近圆周长。这就是极限思想的雏形，比牛顿莱布尼茨创立微积分早一千四百年。拖动滑块调整边数，点击按钮观看割圆动画。
π ≈ (内切+外接)/2
3.1415926...
误差
0.0000%
刘徽算至192边形
π ≈ 3.141024
曼德博集合由一个极简规则定义：对复数 c，反复迭代 z = z² + c，若结果始终有界则 c 属于集合。这个简单规则却能生成无比复杂的分形图案，而且无论放大多少倍，都能看到崭新的自相似结构。滚轮缩放、拖动平移，探索数学的无限细节。
分形维数
2.00 (边界)
"云不只是球形，海岸线不只是弯曲的。" —— 曼德博
斐波那契数列：1, 1, 2, 3, 5, 8, 13, 21... 每项等于前两项之和。相邻两项之比会越来越接近黄金比例 φ ≈ 1.618。用这些数作为正方形边长依次拼接，再在每个正方形内画四分之一圆弧，就构成黄金螺旋。点击"演化"观看数列逐项展开的过程。
当前项
1
相邻比 F(n)/F(n-1)
—
φ (黄金比例)
1.61803398...
排序是计算机科学最基础的算法之一。同一个问题，不同算法的效率天差地别：冒泡排序 O(n²)、快速排序 O(n log n)。这里用柱状图实时可视化四种经典排序的执行过程——红色表示正在比较，金色表示正在交换，绿色表示已排序。切换算法、调整数据量和速度，直观感受算法效率差异。
比较次数
0
交换次数
0
时间复杂度
O(n²)
伪代码
零框架、零依赖。6 个经典可视化模块、51 个交互式教学动画、1 套登录注册系统——全部用原生 JavaScript + Canvas 2D 手写。每一像素、每一次交互、每一帧动画，皆有法度可循。
曼德博集合使用 ImageData 直接操作像素缓冲区，实现 z²+c 迭代的逐点渲染。支持 10¹⁴ 倍缩放，拖动时降采样至 35% 保流畅，松手后 requestAnimationFrame 高质量重绘。
多个 requestAnimationFrame 循环常驻，但每个 draw() 首帧检测 canvas 是否在视口内（150px 阈值）。不可见时跳过全部绘制，CPU 占用降至接近零。
四种排序算法用 async/await + Promise 实现逐步动画。每次比较/交换后 yield 渲染一帧，可随时中断。冒泡、快排、归并、堆排序共享同一可视化管线。
setTransform 替代 scale 避免 resize 时变换矩阵叠加。分形树、勾股、割圆等模块在窗口尺寸变化时正确重置坐标系，不会出现错位。
分形树用递归实现 L-System 文法，支持 3~13 层迭代。风吹效果用 sin 波叠加相位偏移模拟，分形维数通过 log(2)/log(1/r) 实时计算。
斐波那契螺旋用边界跟踪法计算方块位置（leftX/rightX/topY/bottomX），每个方块内绘制 1/4 圆弧，方向序列 右→下→左→上 形成顺时针螺旋。
51 个数学动画按「数与运算 / 方程与函数 / 几何与图形 / 曲线·向量·三角 / 概率与统计」五大主题分栏横向浏览，支持核心素养标签过滤、Modal 内按需挂载 Canvas 演示、收藏与键盘快捷键。注册表驱动，新增动画只需声明一个对象。
纯前端登录 / 注册，用户与会话存于 localStorage，密码单向哈希存储。支持弹层切换、表单校验、会话保持与退出登录，视觉与站点黑金国风风格统一。
对标 xsyy.top 的全栈生成机制：前端提问 → POST /api/tasks 后端调用 DeepSeek 生成结构化动画 spec → 以 taskId 存储 → 前端 GET /api/teachings/:id/preview 拉取，再由 anim-engine.js 用安全的受限解释器渲染成 Canvas 动画。密钥完全在服务端，不执行 AI 返回的代码。