Fourier transform

フーリエ変換

In Sine Waves and Additive Synthesis, we added up a series of sine waves to create waves with different shapes. For example, a square wave can be expressed as a combination of sine waves as shown below. This type of series is called Fourier series.

サイン波と加算合成のページではいくつものサイン波を足し合わせて様々な形の波を作りました。例えば矩形波は下のようなサイン波の組み合わせとして表すことができます。このような級数はフーリエ級数と呼ばれています。

${\displaystyle {\begin{aligned}x_{\text{square}}(t)&={\frac {4}{\pi }}\sum _{k=1}^{\infty }{\frac {\sin \left(2\pi (2k-1)ft\right)}{2k-1}}\\&={\frac {4}{\pi }}\left(\sin(2\pi ft)+{\frac {1}{3}}\sin(6\pi ft)+{\frac {1}{5}}\sin(10\pi ft)+\dots \right)\end{aligned}}}$

https://codepen.io/kynd/pen/JJPWyz

On this page, we convert an arbitrary function into a Fourier series. That is, given a function that represents a change in a certain quantity, such as the rectangular wave above, we decompose it into a series of sine waves.

このページでは任意の関数をフーリエ級数に変換します。つまりある数値の変化、例えば上の矩形波のようなものが関数として与えられた時に、それをサイン波の組み合わせに分解します。

Instead of delving too deeply into math, we will aim to create a drawing machine like the one below and gain some rough insights into how it works. A great thing about sketching with code is that you don't need to fully understand a concept to start. Instead, you can start by tinkering with working examples and learn from the experience (And I'm learning a lot through writing this).

ここでは数学に深く踏み込む代わりに、下のようなドローイングマシンを作ることで、その仕組みについて大まかな洞察を得ることを目指します。素晴らしいことに、コードでスケッチを始めるのに概念を完全に理解する必要はありません。代わりに動作する例をいじり、その経験から学ぶことができます(そして、自分自身このページを書くことで学んでいます)。

We will only consider functions that can be expressed as a repetition of a constant period, such as square waves or the sketch below.

ここでは矩形波や下のスケッチのように元になる関数がある一定期間の繰り返しとして表せるもののみを考えます。

https://codepen.io/kynd/pen/ZEmXaBO?editors=0010