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

晓查 发自 凹非寺 量子位 报道 | 公众号 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/

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

原文发布于微信公众号 - 量子位(QbitAI)

原文发表时间:2019-01-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券