Fourier Series visualization using Unity
Tags: unity, fourierseries, visualization, math
Published: 2019-11-03 12:47:37

---
title: Fourier Series visualization using Unity
published: true
description: This chapter I implement Fourier Series curve visualization, using Unity this section.
tags: Unity, Fourier Series, visualization, math
cover_image: https://thepracticaldev.s3.amazonaws.com/i/clo01w70qdti67xxivmv.gif
---


**"Coding Druid"** series is my **horizontal programming** practice notes, each part around a topic like mathematical, physics, electronic, graphics, sound, etc., implemented in several programming languages.

----

**Coding Druid**
**Part**: Math
**Chapter**: Fourier Series
**Section**: Unity

In the previous Chapter, I visualized Trigonometric function (Sine and Unit Circle) separately using [MaxMSP](https://www.floatbug.com/2019/07/04/trigonometric-function-visualization-using-maxmsp%e2%80%8a-%e2%80%8acoding-druid/), [JavaScript (React)](https://dev.to/avantcontra/sine-function-visualization-using-javascript-react-3b85), [Python](https://dev.to/avantcontra/sine-function-visualization-using-python-2ogo), and [Unity](https://dev.to/avantcontra/sine-function-visualization-using-unity3d-4747):


![sine-unity-croped](https://thepracticaldev.s3.amazonaws.com/i/1lwa8c2fi4f0p4pvcp3n.gif)


This chapter I implement **Fourier Series** curve visualization.
And **Unity** this section.
When it comes to Fourier transform or Fourier analysis, it is usually divided into two parts: **Fourier series** and **Continuous Fourier transform**. This chapter focuses on the **Fourier series**.


In mathematics, a Fourier series is a periodic function composed of harmonically related sinusoids, combined by a weighted summation.
([wikipedia](https://en.wikipedia.org/wiki/Fourier_series))

For example, suppose there is a square wave, and it can be interpreted into sine waves.
The more sine waves you have, the preciser square wave you will get:

<!-- ![Fourier_series_and_transform](assets/Fourier_series_and_transform.gif) -->
<img src="http://floatcc.intplusplus.org/Fourier_series_and_transform.gif"  width="800px" >

More graphic explanations and formula derivation, see the previous section: [Fourier Series Visualization Using React Hooks](https://dev.to/avantcontra/fourier-series-visualization-using-react-hooks-1he9) .

The effect of the previous section:

![fs-js-5](http://floatcc.intplusplus.org/fs-js-5.gif)
<br/>

Now let's try **Unity**.


Have written an note [Sine function visualization using Unity3D](https://dev.to/avantcontra/sine-function-visualization-using-unity3d-4747). So on the basis of its code, the drawing formula can be modified from the trigonometric function to the lower Fourier series：

![fs-mathshot](http://floatcc.intplusplus.org/fs-mathshot-5.png)



![code](http://floatcc.intplusplus.org/carbon.png)

The full code can be seen later.

**Final effect**:

![fs-unity](https://thepracticaldev.s3.amazonaws.com/i/clo01w70qdti67xxivmv.gif)


<br/>

#### References

- [Wikipedia](https://en.wikipedia.org/wiki/Fourier_series)

- [Sine function visualization using Unity3D](https://dev.to/avantcontra/sine-function-visualization-using-unity3d-4747)

- [Fourier Series Visualization Using React Hooks](https://dev.to/avantcontra/fourier-series-visualization-using-react-hooks-1he9)

- [Building a Graph Visualizing Math](https://catlikecoding.com/unity/tutorials/basics/building-a-graph/)


----



**Talk is cheap. Show me the code!**


This demo and the **Coding Druid** series is open source here:
https://github.com/avantcontra/coding-druid

You may **buy me a coffee** in my [Patreon](https://www.patreon.com/avantcontra). There are many articles, patches, source code and some **advanced Patron-only content** there. 

Also you can get some free patches/codes in [Gumroad shop](https://gumroad.com/avantcontra).

Your encouragement is my driving energy!

Cheers~

Contra

- Website: [floatbug.com](https://www.floatbug.com)
- Github: [avantcontra](https://github.com/avantcontra)
- Facebook: [avantcontra](https://facebook.com/avantcontra)
- Twitter: [avantcontra](https://twitter.com/avantcontra)
- Instagram: [avantcontra](https://www.instagram.com/avantcontra)
- Gumroad (buy codes directly): [avantcontra](https://gumroad.com/avantcontra)
- Patreon (advanced content): [avantcontra](https://www.patreon.com/avantcontra)