**Requirements**- modern web-browser with HTML and JavaScript support- The game is divided into three windows - the Time Series window (top), the Magnitudes window (middle) and the Phases window (bottom)
##### Time Series Window

- Displays the Time Series (in blue when applicable) and the Inverse Fourier Transform (in red)
- All presets generate 3 periods, meaning that the signal is repeated 3 times on the graph. The user however is free to use the entire canvas to draw a custom input
- The blue line is shown for the following options - Square wave, Triangle wave, Sawtooth wave and User Drawing. For all other options the Time Series is identical to the IFFT, and is thus not shown
- Each pixel on the curve is a data point, meaning that there are
**1500**data points being analyzed and processed - All data output is normalized to [-1,1] for ease of drawing, before any offset is added
**To start drawing a custom signal, simply click and drag with your mouse / finger on the game window! The game will update when you release the mouse button or lift your finger. More rules can be found in the Methodology and Calculator Rules section**

##### Magnitudes Window

- Displays the Magnitudes of FFT components, with each circle representing a specific frequency
- All magnitudes are normalized to [0,1] for ease of drawing

##### Phases Window

- Displays the Phases of FFT components, with each circle representing a specific frequency
- All phases are normalized to [-π,π] for ease of drawing

- There are
**50**magnitude/phase pairs displayed. Use the slider below to change that:

**Requirements**- modern web-browser with HTML and JavaScript support- The game is divided into two windows - the Time Series window (top) and the Magnitudes window (bottom)
##### Time Series Window

- Displays the Time Series (in blue when applicable) and the Inverse Fourier Transform (in red)
- All presets generate 3 periods, meaning that the signal is repeated 3 times on the graph. The user however is free to use the entire canvas to draw a custom input
- Each pixel on the curve is a data point, meaning that there are
**1500**data points being analyzed and processed - All data output is initially normalized to [-1,1] for ease of drawing, before any user input is added
**To start drawing a custom signal, simply click and drag with your mouse / finger on the game window! The game will update when you release the mouse button or lift your finger. More rules can be found in the Methodology and Calculator Rules section**

##### Magnitudes Window

- Displays the Magnitudes of Wavelet components, with each circle (blue) representing a specific wavelet, as well as displaying the raw Daubechies transform as a curve (red)
- Using the slider below you can select whiich layer of the decomposition to display - the first (default) layer represents the average frequency of the entire signal, while each layer beyond that splits the signal into smaller sections while increasing the frequency of the wavelets, with each section being represented with a magnitude point. More information can be found in the Methodology section
- Each individual magnitude point, when you hover over it will highlight a section of the curve it is responsible for, both on the time series curve and on the raw transform curve
- All magnitudes are normalized to [-1,1] for ease of drawing
- Below the Magnitudes window is a 3D Plotly representation of the Daubechies output, see the Methodology section for more information

- There are
**1**layers of decomposition displayed. Use the slider below to change that: - The current transformation is
**Daubechies 2**. Use the drop down below to change that:

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

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

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

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

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

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

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

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

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

- 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

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

- 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

- 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

- 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

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

- 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

- 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

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

- Game Created
- Basic display added

Currently showing

Y offset = **0**