MathViz Lab: 基于 Cloudflare Workers 的微积分可视化实验

在学习微积分的过程中，很多概念如果仅仅停留在公式推导上，往往显得抽象且难以直观理解。比如 $dy$ 和 $\Delta y$ 到底差在哪？黎曼和是如何逼近真实面积的？

为了解决这个问题（同时也为了折腾一下有趣的技术栈），我开发了 MathViz Lab (数学思维探究社) —— 一个部署在边缘网络上的交互式可视化实验室。

👉 在线体验: viz.matnoble.top

🛠️ 技术选型

本项目的核心目标是快和轻。我希望用户打开网页就能立即互动，没有繁重的 Loading 界面。

• 运行环境: Cloudflare Workers - 利用全球边缘网络，实现极低延迟的响应。
• Web 框架: Hono - 一个超轻量级、适配 Web Standards 的框架，非常适合在 Workers 上运行。
• 绘图引擎: function-plot (基于 D3.js) - 用于渲染函数图像。
• 数学计算: math.js - 处理表达式解析和导数计算。
• 前端实现: 原生 TypeScript + HTML Template Literals。没有 React，没有 Vue，没有打包复杂的 Bundle，回归最纯粹的 Web 开发。

✨ 核心功能

1. 微分几何直观 (The Differential)

在微分的可视化中，最大的难点在于如何清晰地展示“切线”与“割线”的区别，以及无穷小量 $o(\Delta x)$ 的存在。 我实现了一个自适应缩放的视图系统。无论你设置的 $\Delta x$ 是极大还是极小，视图都会自动调整视口范围，确保起始点、终点和切线点始终完整展示在屏幕内。

• 交互点：拖动滑块改变 $\Delta x$，观察割线如何逐渐逼近切线。
• 数据对比：实时计算并显示 $\Delta y$ (真实增量)、$dy$ (线性主部) 和 误差项。
• URL 同步：所有的参数状态都会实时同步到 URL，刷新页面不丢失进度。

2. 积分可视化 (The Integral)

积分的本质是黎曼和。在这个模块中，我强制采用了 1:1 的等比例坐标系。 为什么要 1:1？因为在展示几何面积时，如果 X 轴和 Y 轴比例不一致（例如画一个半圆看起来像压扁的椭圆），会严重误导直觉。通过算法自动计算数据边界并修正视口比例，现在你可以看到标准的图形面积切割过程。

• 支持任意函数表达式输入（如 x*sin(x)）。
• 动态调整分割份数 $n$，直观感受 $\lim_{n \to \infty}$ 的过程。

🚀 最近的优化迭代

作为一个持续迭代的项目，最近我重点优化了以下体验：

1. URL 状态持久化 (State Persistence)
   • 以往刷新页面，输入好的函数就没了。现在，所有的输入（函数表达式、滑块位置）都双向绑定到了 URL Query 参数中。
   • 这意味着你可以直接把某个有趣的函数图像链接发给朋友，他们打开后看到的是一模一样的状态。
2. 一键分享与预设
   • 增加了常用函数预设（如正态分布曲线、三角函数等），方便快速演示。
   • 新增了“分享”按钮，适配了复杂的剪贴板权限策略，支持一键复制当前状态链接。
3. SEO 与结构化数据
   • 虽然是一个工具站，但也配置了完整的 sitemap.xml、robots.txt 以及 JSON-LD 结构化数据，让搜索引擎能更好地理解这些数学工具的内容。

结语

MathViz Lab 是我对“代码 + 数学”的一次有趣尝试。它不需要服务器运维，依托于 Cloudflare 强大的边缘能力，稳定且快速。 如果你正在学习微积分，或者只是想找个画图工具玩玩，欢迎来试试！