# 直觉与形式：交互式数学图表与公式变形演进

> 让冰冷的符号在纸面上流动起来，通过安全可控的交互图表与步进推导动画，把数学直觉带入技术手记

- HTML: /nodes/math-plot-showcase/
- Markdown: /nodes/math-plot-showcase.md
- Section: Nodes / 实践
- Published: 2026.11.03
- Column: Maplen
- Tags: 数学, 交互

---

在我看来，数学从来不应该只是教科书里凝固的冰冷符号，它是我观察物理现实、信号系统与算法本质的透镜。

在撰写 **[Nodes · 实践](/nodes/)** 与 **[Notes · 随笔](/notes/)** 时，静态的 $\LaTeX$ 公式固然严谨庄重，但当需要向读者（或者未来的自己）阐述一个参数如何影响动态响应、积分面积如何随边界漂移、或者一个公式如何步步演变变形时，文字往往显得苍白。

我希望 Maplen 的页面能够像一张数字互动草稿纸：既有出版级质感的排版推演，又能通过**公式步进变形动画**与**交互图表**，把直觉亲手交还给读者。

在这篇手记中，我向大家展示 Maplen 里的数学公式渲染、步进变形与动态函数交互功能。

---

## 一、高阶数学公式排版范式

Maplen 的数学公式在构建期通过 [KaTeX](/wiki/katex.md) 预渲染为静态 MathML 与 SVG，零客户端抖动，支持多种复杂的数学排版范式：

### 1. 多行对齐推导（Aligned Environment）
使用 `\begin{aligned} ... \end{aligned}` 展示多步严密的代数变换：

$$
\begin{aligned}
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \\
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0
\end{aligned}
\tag{1}
$$

### 2. 分段函数与矩阵（Cases & Matrices）
在描述状态方程与非线性控制时，分段与矩阵是不可或缺的工具：

$$
f(x) = \begin{cases}
0, & x < 0 \\
\frac{1}{2} x^2, & 0 \le x < 1 \\
x - \frac{1}{2}, & x \ge 1
\end{cases}
\qquad
\mathbf{A} = \begin{bmatrix}
0 & 1 \\
-\frac{k}{m} & -\frac{c}{m}
\end{bmatrix}
\tag{2}
$$

---

## 二、公式变形动画：步进推导演进引擎

最令人心动的数学体验，往往不是看到最终那行孤立的恒等式，而是亲眼目睹公式内部的项如何如同细胞裂变般展开、重组、对称相消，最终优雅地坍缩为一个至简定理。

为此，我编写了专门的公式变形演进组件 ``。你可以通过下方的控制栏**单步推导**，或者点击**「自动推导演进」**，观察著名的欧拉公式与二阶传递函数的动态诞生过程：



这个组件通过安全的客户端状态驱动，结合 [KaTeX](/wiki/katex.md) 实时矢量重绘，将原本枯燥的长篇推导分解为节奏明晰的视觉序列。

---

## 三、交互函数图表：参数、导数与积分

除了公式本身的变形，参数改变对空间曲线形态的塑造同样需要动态探索。

### 1. 调和正弦波：振幅、频率与相位
在交流电路与机械振动中，正弦波是最基础的积木。它的解析式及其导数为：

$$
f(x) = a\sin(bx + c),
\qquad
f'(x) = ab\cos(bx + c)
\tag{3}
$$

拖动下方参数滑块，点击「导数 $f'(x)$」或「积分面积」，直观比对原函数与其导函数的正交相位差：



---

### 2. 高斯调制波包：局部化能量与频散
在量子力学与小波变换中，我经常遇到能量局域化的「波包」（Wave Packet）：

$$
f(x) = a \cdot \exp\left(-\sigma x^2\right) \cdot \cos(b x)
\tag{4}
$$

高斯衰减项 $e^{-\sigma x^2}$ 会迅速压制振荡，使能量严格约束在有限的时间视窗内：



---

### 3. S 型增长曲线：逻辑斯蒂与激活函数
从受资源上限约束的种群繁衍，到神经网络中经典的 Sigmoid 激活函数，逻辑斯蒂曲线描绘了一种非线性的平滑阈值过程：

$$
f(x) = \frac{L}{1 + e^{-k(x - x_0)}}
\tag{5}
$$



---

## 四、安全与架构准则

在将高交互代码直接嵌入 Markdown 文章时，我时刻保持着对工程边界的敬畏：

1. **拒绝 `eval()` 与任意代码执行**：数学表达式由安全沙盒 `expr-eval` 进行词法解析，只开放受控的基础初等函数与算符，杜绝任何 XSS 攻击的隐患；
2. **纯矢量与轻量岛屿**：图表采用原生 SVG 与轻量 Canvas 渲染，公式变形引擎直接复用 KaTeX 语法树，整包体积极小；
3. **原生无缝的双主题契合**：全部图表坐标轴与曲线均绑定全站 CSS 变量，切换「褐页」与「暖墨」双主题时即刻无感自适应。

把直觉交还给双手，让公式不再孤立。这正是我在 Maplen 中想要守护的严谨与生动。