×

Methodology

The Fourier Game is based on the forwards and backwards Fourier transformations, with the time series data being displayed alongside the magnitude and phase data. The steps taken by the game to generate the FFT and the IFFT are outlined below:

• First, the time series curve is normalized to [-1,1] and stored in an array
• Then, the discrete FFT algorithm is used to generate the frequency array. This algorithm is the Cooley–Tukey FFT algorithm, and is outlined below:
• \[X_k = \sum_{n=0}^{N-1}(x_n \times e^{-2i\pi n k / N})\]
• Where N is the total number of points in the time array, $x_n$ is the $n_{th}$ point of the time series, and $X_k$ is the $k_{th}$ point of the frequency series
• Since ordinary JavaScript cannot process imaginary numbers, the Euler's formula is used to split the exponent into a real and imaginary component, which are stored in separate arrays. The real and imaginary components are calculated as follows:
• \[X_k^{Re} = \sum_{n=0}^{N-1}(x_n \times \cos{(\frac{-2i\pi n k}{N})})\]
• \[X_k^{Im} = \sum_{n=0}^{N-1}(x_n \times \sin{(\frac{-2i\pi n k}{N})})\]
• Afterwards, the real and imaginary arrays are transformed into Magnitude and Phase arrays, using the following formulae:
• \[X_k^{Mag} = \sqrt{{(X_k^{Re})}^2 + {(X_k^{Im})}^2}\]
• \[X_k^{Phase} = \arctan{ \left(\frac{X_k^{Im}}{X_k^{Re}}\right)}\]
• These are then displayed at the appropriate heights on the Magnitude graph (middle) and the Phase graph (bottom).
• Lastly, the Inverse FFT is calculated, based on a Fourier sum series, aka a sum of multiple sine waves. The formula for the resulting time series is as follows:
• \[x = \sum_{k=1}^{K}(X_k^{Mag} \times \sin{(2\pi k t + X_k^{Phase})})\]
• Where t is the time array and K is the length of the array of signal magnitudes. The time array is then normalized to [-1,1] to be displayed.
• Note: there is no offset for the time curve, as it is normalized to [-1,1]
• Note: the sine wave increments in steps of π, meaning that the first magnitude-phase pair describes sin(πt), the second pair describes sin(2πt), etc.

The Daubechies Wavelets Game is based on the forwards and backwards Wavelet Transform, with the time series data being displayed alongside the magnitude data. The steps taken by the game to generate both transforms are outlined below:

• First, the time series curve is normalized to [-1,1] and stored in an array, with only one iteration being analyzed - each third of the time series window is one iteration and drawing on any one of them updates the others, so overall the time series curve consists of three repetitions
• Next, the time series data is transformed from a 1 by 500 array into a 2 by 250 matrix, using the Daubechies transform. The source code for the Daubechies transform can be found here
• The first row of the resulting matrix is a condensed version of the original time series curve, while the second row is the raw frequency output
• Afterwards, the program takes the number of the layer selected and breaks up the frequency output into the corresponding number of sections - the first layer only has 1 frequency, the second has 2 frequencies, the third has 4, and so on until the seventh layer has 64 sections. The decomposition stops at the 7th layer, as it is visually confusing to display 128 frequency points on such a small window
• Each section of the raw frequency data is then averaged to get the average frequency for that section, and it is then stored in an array to be displayed. The frequency display is normalized to have frequencies between [-1,1] for ease of calculations and displayability
• The raw matrix output is then further displayed in the 3D graph at the bottom of the page, with the scale parameter representing the row of the raw output matrix

Game Rules

• Any custom drawn input is accepted, and the user can draw over previously drawn lines
• • Note: Rapid movement is not tracked accurately and thus a straight line is assumed to exist between two mouse movements
• The number of layers can only be between 20 and 100
• The number of data points on the curve strictly depends on your window size and cannot be changed.

×

Download Options

Download Data

• This generates a text file with the FFT output (magnitudes and phases), as well as the IFFT curve data.
• If a user-input curve, or a pre-set curve was used (Square / Triangle / Sawtooth), its data also downloaded.
• Note: This text file is large and may take a while to download.

Download FFT

• This downloads just the FFT output data, in the form of (A+Bi)

Download Wavelets

• This downloads just the Wavelet Transform output data, in the form of [position, value] pairs

Download Full Transform

• This downloads the Wavelet Transform output data in the form of [position, value] pairs, and also the raw Daubechies transform

Download Data Download FFT Data Download Wave Data Download Full Transform Data

×

Version History

2.2

• Added Mobile functionality (thank you Daniel Glyde)
• Implemented various minor bug fixes

2.1

• Changed how canvases are coded and viewed
• Fixed the dissappearing curve bug
• More minor bug fixes

2.0

• Daubechies Wavelet app launched into full release
• Added Download options
• Expanded calculations
• Annotated code, explaining all the supportive functions

1.4

• Refined and upgraded the various curves and the methods to display them
• Added two more buttons - Flat and Unit Signal
• Tested added buttons to work in both gales

1.3

• Removed multiple layers from the magnitudes canvas - was becoming too cluttered
• Added slider for layers instead - can now support up to 7th layer (128 points)

1.2

• Added ability to manipulate layers for the Daubechies transform - now can view up to 6 layers - each layer is separated by a vertical line
• Added custom URL extensions to all games - default is still Fourier, but the new game has a sub-link that can be called to directly access it
• Renamed the folder path to frequency_games, thus encompassing all current and future transforms

1.1

• Added a basic structure for the Daubechies Wavelet Transform - game, methodology and downloads were modified and expanded to include the new game
• Added additional canvas structures for the Daubechies game to not interfere with the Fourier game
• Added 3D surface graphs to better illustrate the Daubechies decomposition

1.0

• Initial release
• Added Y Offset, used by all custom graphs
• Fixed Time series bug where a custom drawn graph would show up as a single line at origin
• Added more advanced mouse movement detection
• Added the option to change the number of magnitude/phase pairs
• Removed canvas resizing options

0.5

• Added user input for the Time Series Window
• Updated HTML text

0.4

• Added square, triangle and sawtooth waves
• Added custom FFT function to process any input, based on the Cooley-Tukey algorithm
• Added FFT output download and tweaked Data download
• Modified and expanded Methodology section
• Added substance to Instructions

0.3

• Added display resizing - screens are now divided into 4 categories: < 1000 px, 1000-1300 px, 1300-1600 px, > 1600
• Buttons for preset Time plots added - only the Sine and Noise buttons work for now
• Download data capability added

0.2

• User interactivity added on Magnitudes and Phases sections
• 50 sine curves are now being used to make the Time series plot

0.1

• Game Created
• Basic display added