我很喜欢的科普数学知识的博主3Blue1Brown有一期非常是有趣的视频介绍傅里叶级数
里面除了简单易懂的语言介绍了什么是傅里叶级数外，还介绍了如何将svg图转换成有趣的图形路线绘制动画。
先来看看这个蜜汁舒适的动画。一笔到底，寻着笔触的模仿人类素描的样子
svg原图长这样
那么如何将SVG图可以转成动画？
听起来就非常有趣，不使用视频剪辑软件，仅仅使用纯粹的数学知识，就能实现如何酷炫的效果。听起来还是非常唬人的傅里叶级数。一起来看看他是如何做到的。
至于博主3Blue1Brown是如何推导傅里叶级数的，视频里面已经非常详细严谨的分析，很久没接触高数或者傅里叶变换的可能会有一点蒙，我这里使用一些平白概括的语言介绍下他是如何做的。
如何做一个路径动图
做一个的路径动图，最简单的方法：
绘制的路径（路径点），
将路径分成间隔相同的位置点(线性采样)，
生成多张动画帧，每次递进一个位置点，进而生成动画。
线性采样到间隔相同的位置点，所有的问题迎刃而解。
主要的难点就在于如何得到间隔相同的点。SVG图形中圆弧的绘制是使用贝赛尔曲线原理的钢笔工具绘制的，想要得到每个圆弧其中的点不难求。
SVG中的钢笔工具-贝塞尔曲线
但多个弧线相连时，很难确保计算后的点，在整个路径中都是间隔相等？
我们拥有数量众多的位置点，那是否有一种方法能够利用这些离散的点，进而求导得到整个绘制路线的方程呢？
傅里叶级数能解决这个问题
傅里叶提出，任何周期性的函数，可用多个余弦/正弦函数的和来表示
看起来好像很复杂的样子。详细说下。k指的是项数，k可以从正无穷到无穷。
ak为 第k项的系数
e-jnwt 简单理解为正弦/余弦的复平面表示。
我们只要把系数ak求出来，问题就能得到解决。
ak求法也有公式
听起来似乎有点懵逼。用一个简单的例子来举例。
以一个简单周期波动的函数y = f(t)为例。这个函数周期性的在两个值之间波动。
假设我们事前并不清楚这个周期性函数的具体表达式，我们期望能通过傅里叶变换，能尽可能的得到这个函数的表达式。
傅里叶级数的说法，任意的周期性函数，都可以表示为多个余弦函数相加。而且项数越多，与原函数的拟合就越好。
我们可以通过比如下图右边。
当函数2项时，组成的函数可以近似的拟合原震荡函数。
我们将项数取多一点，当4个项时，可以看到拟合的图已经比较好了。
继续加大项数，当79项时
可以看到，当项数越来越多的时候，与原函数的拟合度越高。
等下，图中的用了三角函数cos，但为何与公式中却又是指数函数？有些许区别？
其实这是通用的写法，让函数的输出值为二维平面的上复数，也就是将三角函数写成复数的表示方式.
例如下：
如此一来，输入空间为实数，输出空间为复数，用复数的实部与虚部来看作图形的x，y坐标，便可以把这种函数想想成绘画
整理一下式子
那么只要通过求出积分，算出系数Cn就可以了，具体的项数多少并无特别要求，项目越多，与原图的拟合越好
总结而言，具体做法如下
计算出原图片尽量多的坐标点
将坐标点带入Cn公式，求得项数系数。
得到傅里叶级数后，便可就得每一个间隔相同的点
不想理解那么多？我只想得到动图？
说那么多，如果自己写一个这样的程序还是会非常不易的。还好已经有人做好了，就是文中开头的3Blue1Brown，他将自己的制作动画的一个python库manim开源出来给大家分享，但里面内容坑非常多，如果在本机安装也是非常痛苦，即使安装完了，也会发现除了Demo外，他之前写的一些测试代码也大部分无法运行起来。
github库地址：
https://github.com/3b1b/manim
下面我给大家分享这个svg转MP4的方法。
mainm安装
如果选择安装在本地，是个痛苦活儿，需要安装好几种开源软件ffmpeg, Cario等，这里不使用本地安装方法。
这里使用Docker的安装方法，里面已经包含了所有的依赖的开源软件了。
1.1 安装docker
1.2 安装mainm镜像
docker pull mainm 2.1.2 创建svg文件夹
svg需要放置到容器的mainm/assets/svg_images文件夹中
docker run -it eulertour/mainmcd mainmmkdir assetsmkdir assets/svg_images2.1.3 将svg文件拷贝到容器
打开另外的命令行窗口
2.1.3.1 查询容器名称
docker ps 找到NAMES一栏，便是容器名称，比如我的名称为 zealous_tu
将svg拷贝到容器
docker cp /xx/xxx/BatmanLogo.svg zealous_tu:/manim/assets/svg_images注意，svg名称必须为BatmanLog.svg
3. 生成MP4
回到步骤2.1.2的命令行窗口
python -m manim active_projects/diffyq/part2/fourier_series.py FourierBatman -lp生成的视频文件会放置到manim/videos里面
回到2.1.3的命令行窗口拷贝出来
docker cp zealous_tu:/manim/videos/ /Users/xx/Documents/Trash最终的mp4，便是svg转换的结果
傅里叶变换思想可以运用许多计算机的场景中。用已知离散的数据，去推测以及拟合真正的方程/函数。比如计算机图形学中的球谐光照，比如常用的美颜功能，利用傅里叶变换提取图片高频、低频信息以达到磨皮的功能。
拒绝无趣！更多新鲜有趣的编程知识欢迎关注 乐Code乐Code
