上一轮首页升级把 Lorenz attractor 变成了 keplace.top 的首屏视觉符号。这一轮继续往前走了一步：不再只展示一个经典 Lorenz 双翼，而是把首页背景抽象成一个 Attractor engine。
现在每次刷新首页，页面会从 catalog 里随机选择一个 attractor，实时积分出三维轨迹，再把它投影到 Canvas 背景中。底部的小字会展示当前 attractor 的名称、公式和参数；半透明静态 trace、光晕和主动画也会同步使用同一组数据。
这不是单纯“多加几个图案”。更重要的变化是：首页视觉从一次性特效变成了一个可维护的数据驱动系统。
从单个 Lorenz 到 Attractor Catalog
最初版本把 Lorenz 方程和渲染逻辑写在同一个首页脚本里。这样做很直接，但继续扩展会遇到一个工程问题：每新增一个 attractor，就要在动画代码里继续塞公式、参数、初始值、采样步长、颜色和投影参数。
这次拆分后，结构变成：
- `assets/js/attractor-catalog.js` 负责 attractor 数据。
- 首页脚本只负责积分、归一化、投影、绘制和 caption。
- 每个 attractor 自带 `formulas`、`params`、`initial`、`dt`、`steps`、`scale`、`palette` 等字段。
- 视觉主题色从 attractor 的 `palette` 自动注入 CSS 变量。
- 移动端投影中心单独调整，让 attractor 成为居中背景，而不是缩在右下角。
这个拆分的价值在于后续扩展。未来继续加入新的系统时，只要 catalog 数据通过数值稳定检查，就能进入首页随机池，不需要反复改核心动画代码。
为什么 Attractor 很适合做首页隐喻
Attractor 通常指动力系统长期演化后趋向的状态集合。它不一定是一个点，也不一定是一条闭合曲线。对 strange attractor 来说，轨迹可能永远不严格重复，却长期被限制在一个有结构的区域里。
这和个人知识系统很像：每天的输入、工具、研究和写作不可能按一条直线前进，但它们会被长期兴趣、问题意识和工程习惯拉回到某些核心区域。看起来有分叉、有回旋、有局部混乱，但整体并不是随机游荡。
首页现在展示的 attractor，大多属于三维自治微分方程：
\begin{aligned}
\dot{x} &= f(x, y, z), \\
\dot{y} &= g(x, y, z), \\
\dot{z} &= h(x, y, z).
\end{aligned}浏览器每次刷新时做的事情，本质上就是从某个初始点出发，沿着这个速度场一步步积分：
\mathbf{x}_{n+1}
= \mathbf{x}_{n}
+ \Delta t \cdot F(\mathbf{x}_{n})
\quad
\text{where}
\quad
\mathbf{x} = (x, y, z).实际实现里用的是 RK4，而不是最简单的 Euler step。原因很现实：RK4 对步长更宽容，轨迹更稳定，视觉上也更少出现数值爆炸或抖动。
Lorenz：双翼、天气和确定性混沌
Lorenz 系统来自 Edward Lorenz 1963 年关于非周期确定性流的研究。它最常见的形式是：
\begin{aligned}
\dot{x} &= \sigma (y - x), \\
\dot{y} &= x(\rho - z) - y, \\
\dot{z} &= xy - \beta z.
\end{aligned}经典参数通常写作：
\sigma = 10,\quad
\rho = 28,\quad
\beta = \frac{8}{3}.它最迷人的地方不是形状像蝴蝶，而是它同时满足两件看似矛盾的事：方程完全确定，长期行为却对初始条件极端敏感。
也就是说，系统不是随机数发生器；同样的初始条件会得到同样的轨迹。但只要初始状态有极小误差，足够长时间后，两条轨迹就可能分开到完全不同的位置。这个性质让 Lorenz attractor 成为“可预测系统中的不可长期预测性”的经典图像。
首页上一版用 Lorenz，是因为它足够有符号感；这一版继续保留它，是因为它仍然是整个 attractor 族谱中最适合做入口的母题。
Rössler：单螺旋比双翼更像连续写作
Rössler attractor 的形态和 Lorenz 不一样。Lorenz 像两个翼之间来回切换，Rössler 更像一张卷起来的带子：先绕着一个平面旋转，然后被拉离，再重新卷回去。
它常见形式是：
\begin{aligned}
\dot{x} &= -y - z, \\
\dot{y} &= x + ay, \\
\dot{z} &= b + z(x - c).
\end{aligned}首页 catalog 里使用的参数是：
a = 0.2,\quad b = 0.2,\quad c = 5.7.从视觉语言看，Rössler 很适合表达“持续写作”或“长期滚动的研究线程”：轨迹不像 Lorenz 那样频繁左右跳跃，而是围绕一个主旋转结构不断积累。
这也是为什么移动端截图里如果随机到 Rössler，会看到一个更像旋涡的背景，而不是双翼。
Chua：真正可以用电路做出来的双卷轴
Chua circuit 很特别，因为它不是只存在于论文或仿真里的数学玩具。它来自一个包含非线性元件的电子电路，能产生著名的 double-scroll attractor。
一个常见归一化写法是：
\begin{aligned}
\dot{x} &= \alpha \bigl(y - x - h(x)\bigr), \\
\dot{y} &= x - y + z, \\
\dot{z} &= -\beta y.
\end{aligned}其中非线性项通常写成分段线性函数：
h(x)
= m_1x
+ \frac{1}{2}(m_0 - m_1)
\left(|x + 1| - |x - 1|\right).首页 catalog 里使用：
\alpha = 15.6,\quad
\beta = 28,\quad
m_0 = -1.143,\quad
m_1 = -0.714.Chua 的有趣之处在于，它让“混沌”从抽象数学落到了硬件层面：电容、电感、电阻和非线性元件组合起来，真的可以在示波器上看到类似双卷轴的轨迹。
对站点而言，这个 attractor 的气质很接近工具实验室：数学不是只用来解释世界，也可以被接线、被运行、被观察。
Thomas：三个方向互相追逐的循环对称
Thomas attractor 的形式非常干净：
\begin{aligned}
\dot{x} &= \sin(y) - bx, \\
\dot{y} &= \sin(z) - by, \\
\dot{z} &= \sin(x) - bz.
\end{aligned}首页 catalog 中使用：
b = 0.19.它的结构很有趣：三个坐标以循环方式互相驱动，公式本身几乎像一个三声部 Canon。和 Lorenz 的“两个翼”不同，Thomas 更像一种均衡的三向缠绕。
这个系统很适合提醒自己：视觉复杂性不一定来自复杂公式。有时非常短的方程，只要反馈结构足够巧妙，也能生成丰富形态。
Sprott-Linz：少项数系统里的混沌
J. C. Sprott 在 1994 年系统搜索了一批代数形式非常简单的三维混沌流。首页里加入了多个 Sprott-Linz 变体，因为它们很适合作为 catalog 的“轻量测试集”：公式短、参数少、形态差异明显。
例如 Sprott-Linz F 可以写成：
\begin{aligned}
\dot{x} &= y + z, \\
\dot{y} &= -x + ay, \\
\dot{z} &= x^2 - z.
\end{aligned}首页参数：
a = 0.5.再比如 Sprott-Linz B：
\begin{aligned}
\dot{x} &= yz, \\
\dot{y} &= x - y, \\
\dot{z} &= 1 - xy.
\end{aligned}这些系统很适合做一个反直觉练习：混沌不一定需要复杂模型。只要非线性反馈和耗散结构组合得当，非常少的项也能生成长期不可预测的轨迹。
Aizawa：像被掏空的三维涡核
Aizawa attractor 视觉上更像一个带孔的三维涡核。它比 Lorenz、Rössler 更“雕塑化”，适合在首页里制造一种接近科幻核心的感觉。
首页中使用的形式是：
\begin{aligned}
\dot{x} &= (z - b)x - dy, \\
\dot{y} &= dx + (z - b)y, \\
\dot{z} &= c + az - \frac{z^3}{3}
- (x^2 + y^2)(1 + ez)
+ fzx^3.
\end{aligned}参数为：
a = 0.95,\quad
b = 0.70,\quad
c = 0.60,\quad
d = 3.50,\quad
e = 0.25,\quad
f = 0.10.它在首页里承担的是另一种视觉角色：不是经典，不是极简，而是具有强烈三维体积感的“陌生核心”。
这次实现里真正重要的工程细节
如果只从效果看，这次升级像是“加了很多 attractor”。但工程上更重要的是四个约束：
- 每个系统必须能在浏览器里稳定积分，不能频繁 NaN 或爆轨。
- 每个系统需要归一化到类似视觉尺度，否则有的过大、有的退化成一点。
- 每个系统要有独立 palette，让背景光晕、线条和 caption 边框能同步变化。
- 移动端必须单独校准投影中心，不能把桌面偏右布局硬塞到手机上。
所以 catalog 里的每个条目不只是公式，还包含视觉参数：
\text{Attractor}
= \left(
F,\ \mathbf{x}_0,\ \Delta t,\ N,\ S,\ P
\right)其中：
\begin{aligned}
F &:\ \text{vector field}, \\
\mathbf{x}_0 &:\ \text{initial state}, \\
\Delta t &:\ \text{integration step}, \\
N &:\ \text{sample count}, \\
S &:\ \text{normalization scale}, \\
P &:\ \text{palette and projection parameters}.
\end{aligned}这就是我更愿意称它为 engine，而不是素材库的原因。
一个小的设计结论
首页视觉最怕两种极端：一种是纯装饰，漂亮但和系统无关；另一种是纯工程，把所有东西都摊给用户看。
Attractor 背景正好在中间。它有数学结构，有工程实现，也有足够强的视觉记忆点。用户不需要理解微分方程才能感受到它的运动；但如果继续往下看，又能从公式、参数和 catalog 结构里读到系统的真实逻辑。
这和我希望 keplace.top 成为的东西一致：不是模板站，不只是博客，也不是孤立工具集合，而是一个持续生长的 Knowledge Operation System。
参考
- Edward N. Lorenz, Deterministic Nonperiodic Flow, Journal of the Atmospheric Sciences, 1963.
- J. C. Sprott, Some Simple Chaotic Flows, Physical Review E, 1994.
- Chua circuit / double-scroll attractor materials: https://www.chuacircuits.com/
- Thomas cyclically symmetric attractor reference: https://en.wikipedia.org/wiki/Thomas%27_cyclically_symmetric_attractor