![7a8f7e5aa8dcad6c1398da5d9abc9dee.png](https://i-blog.csdnimg.cn/blog_migrate/96d4a7f268303d442f184d8022e3d450.jpeg)
【编程德鲁伊】系列是我的横向编程练习笔记,每期围绕一个主题(数学物理电子图形声音...),用几种程序语言分别实现。
编程德鲁伊 - 数学篇 - 傅里叶级数可视化Unity 实现
上一章做了三角函数可视化,分别用 MaxMSP, JavaScript (React), Python, 以及 Unity:
![96b5a3a09f1360a6e06d00c1917827a9.gif](https://i-blog.csdnimg.cn/blog_migrate/56d246571149c48c1e702f41efeadd1b.gif)
这一章重拾被傅里叶支配的恐惧。
谈到傅里叶变换、傅里叶分析,通常会分为两部分内容来讲,傅里叶级数和连续傅里叶变换。本章集中在傅里叶级数。
在数学中,傅里叶级数可以看作一组正弦曲线组成的周期函数,由加权求和组合而成。(wikipedia)
举个例子,假设有一个周期性方波,它可以分解成多个正弦波。正弦波越多,合成后的曲线越接近方波:
![83d9eec4b0aa7c5363f2a8b30dd3a3d3.gif](https://i-blog.csdnimg.cn/blog_migrate/1ff8d2396b749743ad9a62c39fb7ae44.gif)
更多图文解释及公式推导,可见上一节 JavaScript (React)傅里叶级数可视化 。
上一节 React 的实现效果:
![v2-206b0f9d1c243d5b054d682a340cc214_b.gif](http://img-02.proxy.5ce.com/view/image?&type=2&guid=027e2c53-c03c-eb11-8da9-e4434bdf6706&url=https://pic1.zhimg.com/v2-206b0f9d1c243d5b054d682a340cc214_b.gif)
本节用 Unity。
曾写过一篇 Unity 三角函数可视化 ,在其代码基础上,将绘制公式由三角函数修改为下方的傅里叶级数即可:
![b6c97253263750a1f0268734e336fe73.png](https://i-blog.csdnimg.cn/blog_migrate/c90d72b33bc76f6837c634db3e23f87e.jpeg)
![ff5a18e83d58e4df884a6cd91f75cdae.png](https://i-blog.csdnimg.cn/blog_migrate/f18971e59fa95343a444ed9f98243403.jpeg)
完整代码可见后文。
最终效果:
![489be4cfb135e26afc89c5d2bc878da7.gif](https://i-blog.csdnimg.cn/blog_migrate/1f4d37f97d7b4c11e278313cd30b55fd.gif)
参考资源
- Wikipedia
- 【编程德鲁伊 - 数学篇】Unity3D 三角函数可视化
- 【编程德鲁伊 - 数学篇】JavaScript (React)傅里叶级数可视化
- Building a Graph Visualizing Math
Talk is cheap. Show me the code!
本例及【编程德鲁伊】系列大部分代码都开源在这里:https://github.com/avantcontra/coding-druid
请猛戳下方赞赏或喜欢作者,buy me a coffee!
您的金钱鼓励是我前进的动力。
欢迎在Patreon上订阅(英文版),获取更多会员特供的高级内容。
您也可以直接在Gumroad商店获取demo和源代码。
网站: floatbug.com微信公众号/知乎专栏:实验编程
Cheers~
Contra