1. Fourier Series
GUI Implementation

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

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

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

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

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

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

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

10. Tools jQuery JSXgraph Complex.js MathJax Git
Linux development environment

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

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

13. Questions?