Visualization of Math Concepts With Dynamic Wall

This project visualizes the process of selection sort and properties of fourier transform using Dynamic Wall SDK of National Mesuem of Mathematics. It first visualizes the selection sort algorithm in two halves, making one half to ascending order and the other to descending order. It then shows the fourier transform of a cosine wave, with its time domain representation on one side, and frequency domain representation on the other side. As time goes, the cosine wave’s magnitude changes, and the animation shows the frequency representation’s magnitude changes in the same way (linearity). Then the cosine wave’s frequency changes, and it shows the reversed relationship between interval lengths in time and frequency domain (scaling property).

You can find the code of this project here

Video of this project is shown below (with background music). If you can’t see it, try here.

Explanation of Mathematical Details

Part 1. Selection Sort Algorithm


for i = 1:n
    k = i
    for j = i+1:n
        if a[j] < a[k]
            k = j
            swap a[i] with a[k]


Since the update function is executed every frame, in order to visualize the process in a more clear manner, the two for loops are replaced by incrementing two counter variables.

Part 2. Linear and Scaling Properties of Fourier Transform

Cosine wave is used as an example to demonstrate linearity and scaling property of fourier transform.

      $\mathcal{F}[\cos(w_0t)]$      (1)

$ = \displaystyle\int_{-\infty}^{\infty}e^{-jwt}$ $ \displaystyle\frac{e^{jw_0t} + e^{-jw_0t}}{2}dt$      (2)

$ = \displaystyle\frac{1}{2} \int_{-\infty}^{\infty} e^{-j(w-w_0)t}dt + \displaystyle\frac{1}{2} \int_{-\infty}^{\infty} e^{-j(w+w_0)t}dt $      (3)

$ = \pi\delta(w - w_0) + \pi\delta(w + w_0)$      (4)

Thus, if the input consine wave is $2\cos(w_0t)$, the fourier transform becomes $2\pi\delta(w - w_0) + 2\pi\delta(w + w_0$). If add another consine wave $\cos(w_1t)$ altogether, the fourier transform would be $$\pi\delta(w - w_0) + \pi\delta(w + w_0) + \pi\delta(w - w_1) + \pi\delta(w + w_1)$$

This is the linearity of fourier transform, though only the first part is demonstrated in the animation due to limitation of time and animation quality.

More details of the reasoning

From (1) to (2)

a. Definition of Fourier transform: $\mathcal{F}[f(t)] = \displaystyle\int_{-\infty}^{\infty}e^{-jwt}f(t)dt$

b. Euler’s formula: $\cos(w_0t) = \displaystyle\frac{e^{jw_0t}+e^{-jw_0t}}{2}$

From (2) to (3)

By sum rule of integration $\displaystyle\int(f(x) + g(x))dx = \int f(x)dx + \int g(x)dx $

From (3) to (4)

We will show $\displaystyle\int_{-\infty}^{\infty} e^{-j(w-w_0)t}dt = 2\pi\delta(w - w_0)$

First, $\mathcal{F}[\delta(t)] = \displaystyle \int_{-\infty}^{\infty}\delta(t)e^{-jwt}dt = e^{0}\displaystyle \int_{-\infty}^{\infty}\delta(t)dt = 1$, so $\mathcal{F^{-1}}[1] = \displaystyle\frac{1}{2\pi}\displaystyle \int_{-\infty}^{\infty}e^{jwt}dw = \delta(t)$,
that is, $\displaystyle \int_{-\infty}^{\infty}e^{jwt}dw = 2\pi\delta(t) $.

Because delta function is an even distribution, $\displaystyle \int_{-\infty}^{\infty}e^{-jwt}dw = 2\pi\delta(-t) = 2\pi\delta(t)$.

Let $w \leftarrow t, t\leftarrow w-w_0$, we have $\displaystyle\int_{-\infty}^{\infty} e^{-j(w-w_0)t}dt = 2\pi\delta(w - w_0)$. Thus, proof is done.

Similarly, we have $\displaystyle\int_{-\infty}^{\infty} e^{-j(w + w_0)t}dt = 2\pi\delta(w + w_0)$


This project was done during the momath hackathon

Comments are welcome. Please cite this page if you use it in your work.

@Special thanks to Jingwen Cui, who is currently an image processing engineer at Suzhou Keda Technology Co., Ltd, for reviewing concepts of fourier transform with me.