傅里叶圆环：几个圆叠着转，随手一画就变成周期性轨迹

随手画一条线，松开鼠标就变成一堆叠着转的圆环。圆越多，转出来的轨迹越像你刚画的那条。

这个 App 做什么

• 自由绘制轨迹：画布用鼠标画出任意闭合或开放路径，松开后自动采样。
• 傅里叶圆环重构：用一组匀速旋转的圆环把轨迹拼回来，末端实时画出曲线。
• 圆环数滑块：按振幅从大到小取前 n 个圆环，低振幅谐波被丢弃，圆越多越接近原图。
• 速度与清空：可调动画速度，一键清空重画；内置圆形、方形、三角、心形、星形、字母 A、正弦波预设。
• 界面深色极简：有公式和重构说明，适合边玩边看傅里叶分解。

为什么值得看

• 手画一条乱七八糟的线，几十个圆环叠起来居然把它转回来了，这种反差很适合作为傅里叶级数的入口。
• DFT 不再是纯公式：每个圆环就是一组频率、振幅和相位的三角波，能直接把求和动画化。
• 界面默认从轨迹采样到重构一步完成，玩起来没有参数负担。

进入 AI 开发者空间

本文用码道 WebUI 版演示，不装任何本地软件，浏览器就能用。先打开：

https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz

进入后选择「体验版」，首次使用会跳到华为云登录页，扫码登录一次，之后浏览器会话会复用；再按提示点击「同意」，让临时凭据自动配置并创建沙箱。

进入 AI 开发者空间主界面后，等左侧菜单加载出来，找到 CodeArts 并点击右侧的浏览器图标，打开码道 WebUI 对话窗口。

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

准备环境：进入 CodeArts

进入 CodeArts：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

浏览器打开 CodeArts 后，按提示开通体验版，再回到上一步的 AI 开发者空间进入码道 WebUI。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

请在 /workspace/fourier 目录下做一个单文件网页应用 index.html：傅里叶圆环画笔。画布可用鼠标自由绘制任意闭合或开放轨迹，松开后自动用一组匀速旋转的傅里叶圆环重构轨迹，显示圆环数量并可用滑块调节，支持速度滑块、清空重画、几个预设图案按钮；界面深色极简，有公式和重构说明。完成后检测一个空闲端口，用 python3 -m http.server <空闲端口> --directory /workspace/fourier 启动并告诉我访问地址。

这轮码道具体做了什么

• 在 /workspace/fourier 下创建单文件 index.html，完成轨迹采样、DFT、圆环动画和预设图案。
• 检测空闲端口后用 python3 -m http.server 启动服务，返回当前开发环境可访问的预览地址。
• 尺寸变化时自动重算轨迹，缩放窗口不会把图案打散。

代码亮点

1. dft：把采样点变成一圈一圈的频率分量

function dft(zs){
  const n = zs.length;
  const cs = [];
  for (let k = 0; k < n; k++){
    let re = 0, im = 0;
    const w = -2 * Math.PI * k / n;
    for (let i = 0; i < n; i++){
      const ang = w * i;
      const cr = Math.cos(ang), ci = Math.sin(ang);
      re += zs[i][0] * cr - zs[i][1] * ci;
      im += zs[i][0] * ci + zs[i][1] * cr;
    }
    re /= n; im /= n;
    const r = Math.hypot(re, im);
    if (r < 1e-9) continue;
    let freq = k;
    if (freq > n / 2) freq -= n;
    cs.push({ r, freq, phase: Math.atan2(im, re) });
  }
  cs.sort((a, b) => b.r - a.r);
  return cs;
}

把轨迹等距采样成复数点，再做离散傅里叶变换，得到每个频率的振幅和相位。半径是振幅，角速度是频率，初始角度是相位；最后按振幅从大到小取前 n 个圆环。

验证与踩坑

• 点圆形预设，重构轨迹与原始圆重合；点心形后，圆环组成的心形路径清晰可见。

• 圆环数滑块减少时重构曲线变粗糙，放回 40 后又平滑回来。
• 清空重画和正弦波预设都能稳定响应，轨迹不拖影。

本地复现

这是单文件 index.html，没有第三方依赖。保存到本地后双击用浏览器打开，或起一个本地静态服务：

python3 -m http.server 8080 --directory codearts-fourier-epicycles

浏览器访问 http://127.0.0.1:8080 即可。

生成页面和截图已同步到公开 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本期目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-fourier-epicycles

使用码道体会

• 代码没有把 DFT 写成黑盒，而是把 z 点当复数存成 [re, im]，频率、相位和振幅分开存，前后的材料关系比硬拼动画更容易讲清楚。
• 预设图案直接落进同一个采样管道，扩展新图案不用改重构逻辑，加一个形状函数就可以。

总结

傅里叶圆环把求和动画做成可交互的轨迹画笔，解释了“周期信号拆成旋转分量”的老概念。之后可以把 GIF 导出、笔画顺序或非周期近似也加进去。