Fourier Series GUI Implementation

Goals Create hands-on demo that will deepen student’s understanding of Fourier Series Ensure maximum browser compatibility by using jQuery for event handling Show complex coefficients, and how they change

Project Detail Three graphs show the function and the magnitude and phase of the coefficients. Supports different levels of learning: combining coefficient pairs toggling pairs on/off changing number of pairs

Equations rightmost panel Shows formulas to get complex coefficients changes with each function

UI Controls HTML sliders checkboxes values displayed on mouseover coefficients can be toggled on/off with mouse click.

JSXGraph Implementation mouse events added through JSXGraph’s API JSX benefits: event handling is simplified easy to create as complex as you want it to be

Complex Number Representation Complex.js provides base implementation Coefficient computation is done separately for each wavefunction The active (in-use) coefficients are stored in the fourierSeries global variable Coefficient manipulation is done in one class, using above variable to get the current coefficients.

Code Layout All functions in global variable fourierDisp each graph has an update function each fourier series has functions to compute values with n number of coefficients event handlers are added after the page is loaded

Tools jQuery JSXgraph Complex.js MathJax Git Linux development environment

Results & Lessons Learned Overall, project accomplished main goals Lessons: debugging keeping in sync test every step of the way

Future work 3d representation of combination of coefficient waves animation Walkthrough of GUI, show users how to use the controls

Questions?