傅立葉變換還能畫簡筆畫？谷歌工程師開發的這個試玩網站火了

曉查 發自 凹非寺

量子位 報道 | 公眾號 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)對話界面，回復「招聘」兩個字。

喜歡就點「好看」吧 !

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！