傅立叶变换还能画简笔画？谷歌工程师开发的这个试玩网站火了| 附资源

晓查 发自 凹非寺 
量子位 报道 | 公众号 QbitAI

无论是处理声音和图像信号，都必须用到傅立叶变换。其实除了这些“正经”用途，它还能做一些有意思的事情。

最近，一位名叫Jez Swanson的谷歌工程师自己写了篇博客，教你用傅立叶变换画出任何简笔画。目前已在Twitter已经收获了3000+点赞。

什么是傅立叶变换

简而言之，傅里叶变换是将某些东西分解成一系列正弦波，而正弦波是最简单的周期函数。

我们先从一些简单的例子开始，比如下面的波形可以分解成两个正弦波。

反过来说，傅里叶变换也是组合波形的一种方式。把这两个正弦波叠加起来，就得到上方的波形。

即使是看起来并不平滑的方波，也能分解成正弦波。

但是方波和前面波形不同，它在进行叠加操作的时候会有困难。因为方波的成分包含无数正弦波。但是在现实世界中，我们不可能能叠加无限多的波形。

如果我们截取其中主要的部分，就能得到近似的方波波形。随着高频的成分越来越多，图形也会越来越接近方波。

接下来，我们在互动页面上随便画出一个波形，

通常计算机会离散地记录下波形上一些点的数值，然后对它们做傅立叶变换，最终得到的波形与原始波形非常相似

这也是计算机处理声音的方式，MP3文件就是这么做的。

通常计算机会把声波存储为一系列点，点的密集程度决定了舍弃掉多高的频率。电脑只存储那些前面低频部分，忽略声音里的高频，这就是MP3压缩的原理。

从三维角度理解

上面简单介绍了傅立叶变换的基本知识。如果你学过一点三角函数的知识，就知道正弦波其实和圆有密切的关系。

我们一边画圆，一边让绘制点随着时间前进，就得到在三维空间中的螺旋线图像。

它从侧面来看就是正弦波：

叠加的“轮子”

既然正弦波可以理解成圆周运动的投影，那么傅立叶变换就可以理解成不同圆周运动的叠加。

每个轮子的转速代表着频率，轮子的半径代表着振幅。

理解了以上内容，我们就可以用“三维正弦波”做一些有趣的事情，比如画一个胜利手势：

在三维角度看，它是这样的：

我们可以将简笔画视为一个3D图形。想象一个人正在画一只手，那么这3D图形就代表了笔尖位置的变化。x、y维度代表笔尖位置，z维度代表笔尖所在的某个时刻。

在这里，我们使用的是3D螺旋正弦波的组合，来得到我们的图像。

当我们从正面观察这个3D图像时，就会看到许多圆圈的叠加运动。我们把一个圆围绕另一个圆旋转叫做“本轮”（epicycle）。

和前面叠加出方波一样。我们只用几个圆圈就可以很好地逼近简笔画。前面的大圆确定图像的大致形状，而最后的小圆让边缘更锐利。

作者Jez已经把它做成Demo放在网站上试玩，还用它画了一幅自画像。

△作者自画像的傅立叶变换

最后奉上Jez本人照片：

自己动手

如果你觉得很酷炫，可以去Jez的个人博客网站去尝试。

http://www.jezzamon.com/fourier/index.html

他还公布了交互部分的源代码。这些交互元素大部分是用JS编写的。

另外Jez还简单介绍了傅立叶变换是如何用于JPEG图像压缩的，这部分内容使用了Python和Jupyter Notebook。并把说明文档放在了Python文件夹中。

如果你想折腾JPEG图像压缩原理的部分，还需要安装Jupyter，以及NumPy，PIL，SciPy和Matplotlib。

学习资料

Jez这篇博客的介绍还是非常简略的，即使你完全没有数学基础也能上手。如果想更深入的学习傅立叶变换，Jez也给出了更多学习教程。

傅立叶变换的交互式学习指南：
https://betterexplained.com/articles/an-interactive-guide-to-the-fourier-transform/

数学播客“3Blue1Brown”的视频教程：
http://www.bilibili.com/video/av19141078/

作者系网易新闻·网易号“各有态度”签约作者

— 完 —

加入社群

量子位AI社群开始招募啦，欢迎对AI感兴趣的同学，在量子位公众号（QbitAI）对话界面回复关键字“交流群”，获取入群方式；

此外，量子位专业细分群(自动驾驶、CV、NLP、机器学习等)正在招募，面向正在从事相关领域的工程师及研究人员。

进专业群请在量子位公众号（QbitAI）对话界面回复关键字“专业群”，获取入群方式。（专业群审核较严，敬请谅解）

诚挚招聘

量子位正在招募编辑/记者，工作地点在北京中关村。期待有才气、有热情的同学加入我们！相关细节，请在量子位公众号(QbitAI)对话界面，回复“招聘”两个字。

量子位 QbitAI · 头条号签约作者

վ'ᴗ' ի 追踪AI技术和产品新动态

喜欢就点「好看」吧 !