DEV Community: Contra

Fourier Series visualization using Unity

Contra — Sun, 03 Nov 2019 12:47:37 +0000

"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, JavaScript (React), Python, and Unity:

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)

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:

More graphic explanations and formula derivation, see the previous section: Fourier Series Visualization Using React Hooks .

The effect of the previous section:

Now let's try Unity.

Have written an note Sine function visualization using Unity3D. So on the basis of its code, the drawing formula can be modified from the trigonometric function to the lower Fourier series：

The full code can be seen later.

Final effect:

References

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. 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.

Your encouragement is my driving energy!

Cheers~

Contra

Website: floatbug.com
Github: avantcontra
Facebook: avantcontra
Twitter: avantcontra
Instagram: avantcontra
Gumroad (buy codes directly): avantcontra
Patreon (advanced content): avantcontra

Fourier Series Visualization Using React Hooks

Contra — Sat, 31 Aug 2019 16:15:30 +0000

Coding Druid
Part: Math
Chapter: Fourier Series
Section: Javascript (React)

In the previous Chapter, I visualized Trigonometric function (Sine and unit circle) separately using MaxMSP, JavaScript (React), Python, and Unity:

This chapter I implement Fourier Series curve visualization.
And start with JavaScript and React this section.

Mathematics

In mathematics, a Fourier series is a periodic function composed of harmonically related sinusoids, combined by a weighted summation.
(wikipedia)

And it can be explained as expressing a repetitive curve as sum of sine curves. (Purrier Series (Meow) and Making Images Speak)

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.

Now Let's see the process of Fourier series expansion.

Assume that f(x) is a periodic function for x∈[−π,π], and its period is 2π.
Its expression:

Then its trigonometric expression of Fourier series (sine-cosine form) is like:

And Fourier coefficients of $f(x)$ is:

Finally:

Above content refers to "Advanced Mathematics - (Engineering Course) (Vol.2)"

And the original Fourier series definition and detail explanation will be found in wikipedia.

Sums of lengths the first four terms, and showing how the approximation to a square wave:

Visualization

Now to visualize this curve using React.
I have forked and refactored a sine visualization:

I will do the Fourier stuff on the basis of above code.

It’s really clear to write code using React:

Still use React Hooks to update the data binded with Components:

Final curve:

As n increases, that is, the sine wave increases, the synthesized waveform gets closer to the square wave.

References

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 can find more resources in my site floatbug.com.

You may buy me a coffee in my Patreon. 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.

Your encouragement is my driving energy!

Cheers~

Contra

Website: floatbug.com
Github: avantcontra
Facebook: avantcontra
Twitter: avantcontra
Instagram: avantcontra
Gumroad (buy codes directly): avantcontra
Patreon (advanced content): avantcontra

Sine function visualization using Unity3D

Contra — Fri, 12 Jul 2019 07:10:05 +0000

Coding Druid
Part: Math
Chapter: Trigonometric Function
Section: Unity3D

In other sections, I visualized Trigonometric function (Sine and unit circle) by MaxMSP, Python, JavaScript(React):

This time I use Unity3D to implement it.

In the Python version, the data visualization Library Matplotlib was used. With Unity I just draw it according to the trigonometric function algorithm.

Firstly, Let a point move with the Sine function curve.

Put a Sphere in the scene, and let its position.x increase at a constant speed, then position.y = sin(position.x).

Vector3 posSine = sphere.localPosition;
posSine.x += speed;
posSine.y = Mathf.Sin(posSine.x);
sphere.localPosition = posSine;

Next, draw a path of the sphere moving along the unit circle.

Note that here, set the radius of the unit circle to 1, and set the period length of Sine to 2Pi. That is as shown in the previous sections, the unit circle shares a coordinate system with Sine.

Formula to drawing a circle:

x = cos(t);
y = sin(t);

The param t here, in fact is the position.x of the Sine in previous step.

Then move the center of the circle to the left, to make the rotating starting point of the unit circle consistent with the starting point of Sine.

Vector3 posCircle = posSine;
posCircle.x = Mathf.Cos(posSine.x) - 1f;
posCircle.y = Mathf.Sin(posSine.x);
circleDot.localPosition = posCircle;

Combine the Sine and unit circle:

In the previous articles, I drew the path of the curve to make it more clearly, such as Python:

I plan to be lazy with Unity.
Add the Trail Renderer directly to the two spheres, and let them draw path trail effect themselves.

Well, The default trail is a bit strong...

OK let's change it. After searching trail in the Unity Assets Store I find a free good track effect：

After installation the asset there are a lot of effects. Then pick a material by liking:

Attach the material to the Trail Renderer.

Final Effect:

In the released source code, I added Trail Renderer to an empty GameObject and moved with the sphere. I didn't add the track directly to the sphere. There is no special reason, just practice of Unity newbie.

Reference article: Building a Graph Visualizing Math

Talk is cheap. Show me the code!

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

You can find more resources in my site floatbug.com.
Or you may buy me a coffee in my Patreon. Your encouragement is my driving energy!

Cheers~

Contra

Website: floatbug.com
Github: avantcontra
Facebook: avantcontra
Twitter: avantcontra
Instagram：avantcontra
Patreon (buy me a coffee XD): avantcontra

Sine function visualization using Python

Contra — Fri, 12 Jul 2019 04:07:23 +0000

Coding Druid
Part: Math
Chapter: Trigonometric Function
Section: Python

In other sections, I visualized Trigonometric function (Sine and unit circle) by MaxMSP, JavaScript(React), Unity3D:

This time I use Python to implement it.

For the quick goal, directly Google "python data visualization lib" these keywords, get the lib, sort by the number of stars in github, found the old and strong Matplotlib. So, it was so pleasant to decide.

Matplotplib Install

Consider the follow-up exercises, I select the whole-family-bucket installation method provided by Anaconda. It includes a bunch of libraries related to scientific data analysis including Matplotlib.

Due to the recent unfixed working computer and location, I've deployed a remote development environment (VSCode Remote rocks!). The code is deploying and running on the Azure server. I just use a old notebook to edit the code and view the effect.
So I choose the Linux version for the server environment.

Note, the Python 3.x version on the left is preferred here, because Matplotlib 3.0 and above only supports Python 3.

Matplotlib 3.0 is Python 3 only.

For Python 2 support, Matplotlib 2.2.x will be continued as a LTS release and updated with bugfixes until January 1, 2020.

Then you can start coding after Matplotlib installing.

(In fact, after writing a few lines, I found that remotely developing Python, it is still not convenient to view the result graphics in real time. So I also installed Jupyter Notebook and coding directly in the browser, WYSIWYG.)

In addition, ffmpeg is installed too, to save the animation obtained by Matplotlib to mp4.
Also used Anaconda to install ffmpeg.
conda install -c conda-forge ffmpeg

With Matplotlib, the Sine function animation part, in fact, there is not a few code. Most is actually the coordinate configuration, and draw some auxiliary lines and so on.

Basically coding by according to the tutorial and some reference articles. The characteristics of this library, most of the ideas focus on the algorithmic logic of the mathematical formula itself.

A nice reference article:
Animations with Matplotlib

Final Effect:

Talk is cheap. Show me the code!

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

You can find more resources in my site floatbug.com.
Or you may buy me a coffee in my Patreon. Your encouragement is my driving energy!

Cheers~

Contra

Website: floatbug.com
Github: avantcontra
Facebook: avantcontra
Twitter: avantcontra
Instagram：avantcontra
Patreon (buy me a coffee XD): avantcontra

Sine function visualization using JavaScript (React)

Contra — Fri, 12 Jul 2019 03:57:31 +0000

Coding Druid
Part: Math
Chapter: Trigonometric Function
Section: Javascript (React)

In other sections, I visualized Trigonometric function (Sine and unit circle) by MaxMSP, Python, Unity3D:

This time I use javascript to implement it.

There are kinds of ways to draw graphic in javascript in browser:

Directly in Canvas or WebGL
d3js
p5js
pixijs
SVG + CSS
More and more

I found a React + SVG example by chance, and I very like it.

The SVG descripted Sine function in a marked way:

And binding and updating the value of param degree along x-axis taking advantage of the updating mechanism of React State.

I think its a beautiful and charming way.

I rarely used SVG in my past projects. Then I learn it from this example and cool! Thanks for its author.

While React is my most commonly used library in front-end projects for years. But I'm new with its latest features like React Hooks. So I study and refactor the React State part of the example using React Hooks.

The Hooks official document is great. I just followed its rules and implemented the functions like that:

The Hooks is simple and powerful, but you should take care the performance issue. Because the useEffect() will run both after the first render and after every update. The offical tips here.

Final Effect:

I changed the color style to make a distinction with the original example.

Talk is cheap. Show me the code!

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

You can find more resources in my site floatbug.com.
Or you may buy me a coffee in my Patreon. Your encouragement is my driving energy!

Cheers~

Contra

Website: floatbug.com
Github: avantcontra
Facebook: avantcontra
Twitter: avantcontra
Instagram：avantcontra
Patreon (buy me a coffee XD): avantcontra