chars-draw-sing 是一个把「任意字符」变成可视化画与声的开源网页项目，托管在 GitHub 上，作者为 KeJunMao。它源自一条创意提示：参照数学可视化视频，做一个可交互的 artifacts，让用户输入任意字符后都能看到生成过程，并且同时包含声音与公式。项目用代码生成全部内容，核心思路是傅里叶本轮——把字符的闭合轮廓拆解成一系列旋转的圆，每个坐标都有自己的实傅里叶级数，频率为 k 的余弦与正弦构成一条长度为 √(aₖ²+bₖ²) 的臂，每圈旋转 k 次，一条链控制 x，一条链控制 y，笔尖落在两条导轨的交点处，于是字符被一圈圈「画」出来。项目提供 twin-epicycles 等在线演示页面，打开浏览器即可体验，无需安装。
很多人对傅里叶级数、谐波、本轮这些概念停留在公式层面，看得懂推导却想象不出它到底在做什么；数学视频里的炫酷动画往往只能看，不能改，想换成自己的名字或喜欢的符号就无从下手。另一方面，做科普、讲课或内容创作的人，需要一种能直观展示「复杂图形由简单圆周运动叠加而成」的演示素材，但现成工具要么门槛高，要么只能播放固定内容。字符轮廓如何被拆成旋转的圆、谐波数量变化时误差如何变化，这些细节缺少一个可以随手输入、即时看到结果的交互入口。
chars-draw-sing 把抽象的傅里叶分解变成可交互的字符动画，输入即生成，过程与结果同时可见。
用户可以输入任意字符，项目会为其生成对应的绘制过程，不局限于固定音符符号。
生成过程同时包含视觉绘制与声音，让字符的轮廓运动可以被看见也被听见。
以傅里叶本轮的方式呈现 x、y 两条链的旋转叠加，谐波数量可影响逼近精度。
它把数学公式、动画与声音揉进一个轻量网页里，既是教学演示，也是创意玩具，打开链接就能玩。
用旋转的圆解释傅里叶级数，比静态公式更容易理解谐波叠加的含义。
项目代码托管在 GitHub，感兴趣的人可以查看实现、自行部署或二次创作。
这就是你做数学的原因。https://kejunmao.github.io/chars-draw-sing/twin-epicycles.html
2026-10-09 06:56
闭合轮廓的每个坐标都有自己的实傅里叶级数：x(t) = ∑ (aₖ cos kt + bₖ sin kt)，y 同理。
频率为 k 的余弦和正弦构成一条长度为 √(aₖ² + bₖ²) 的臂，每圈旋转 k 次。一条链控制 x，一条链控制 y，笔尖位于两者导轨的交点处。每轴取 N 个谐波时，骑士在 N = 1 时偏离其高度的 30.2 %，在 N = 50 时偏离 0.70 %。
当 N = 1 时，两个坐标都是纯正弦曲线：一个椭圆。
