Discrete Convolution Demo Team Members: Jay Karwatsky, Cassie Xia

Goals Recreate discrete convolution demo GUI using HTML/CSS, JavaScript, and JSXGraph Learn how to use JSXGraph libraries Use GitHub to organize collaborative work

Project Overview The Discrete Convolution Demo is a program that helps visualize the process of discrete-time convolution. The demo we created works with linear convolution. This demo allows the user to select from a selection of signals and view the output of the discrete time convolution.

Matlab GUI - Discrete Convolution

Matlab GUI - Signal Inputs

JavaScript GUI - Signal Inputs

JavaScript GUI - Discrete Convolution

Tools Used HTML Javascript (JSXGraph) CSS (Bootstrap) Git

JSXGraph JSXGraph is a JavaScript library used to display visuals In our demo, we use the JSXGraph to provide the graphs and sliders content to our webpage

Webpage Setup The webpage was laid out with a modular design structure This design structure allowed elements of the page to be moved around easily without causing issues with the code The modular design allowed for easy implementation of Bootstrap CSS tools. JavaScript files were also implemented with a modular design Each function was placed in a separate file in a JavaScript folder

x[n] and h[n] Input Signal Types Pulse User Inputs: Amplitude, Length, Delay Cosine User Inputs: Amplitude, Period, Phase, Length, Delay Sine Exponential User Inputs: Scaling Factor, Exponential Constant, Length, Delay, Causality

Input Signal Features Changes input queries based on selected signal type Only shows input boxes for selected signal type Select signal type through drop-down menu Submit signal to graph user input Make changes to input signals before convolving Can always go back to resubmit input signals

Convolution Signals were stored in a global array that all boards could access and manipulate x[n] and h[n] are convolved point by point and added to the overall convolution board. The delay slider determines where signals are placed on the overlay and multiplication boards. Zoom is determined based upon the max ranges of X and Y values for respective boards.

Overlay Board x[n] and h[n] signals are overlaid on top of each other Zoom is based on the range of the input signals Ability to change whether x[n] or h[n] is flipped

Middle Step Board The middle board highlights the multiplication of the overlaid signals

Convolution Result Board Displays the final result of the convolution and highlights the stem associated with the stems in the middle board Zoom is again based on the possible range of values

Challenges Encountered Learning how to use the virtual machine alongside of GitHub to setup a localhost Overcoming different levels of JavaScript experience Locating resources for learning about JSXGraphs and how to use the JSXGraph libraries Encountering compatibility issues when combining individual code together Figuring out how to use design space most efficiently

JavaScript GUI - Signal Inputs

JavaScript GUI - Discrete Convolution

What Worked? Using a global backing array Using a modular HTML and JavaScript design Setting up Brackets (Text Editor) to work as an IDE Brackets provided live feedback during development

What Didn’t Work? Optimal use of GitHub Use of AJAX to format the pages Too much to learn within the given timeframe Could not test code without a local server Ended up using CSS

Possible Improvements Display equation of each input signal Add an unit sample input for x[n] and h[n] Add an user signal input for x[n] and h[n] Improved zoom functionality and tools to configure zoom Improved visual design Optimization of backing code Setting limits for the user Display equation of each input signal On both the input signal page and the convolution page Add an unit sample input for x[n] and h[n] Functionality is available in pulse input signal Add for improved user compatibility Add an user signal input for x[n] and h[n] Allow user to input an array of values instead of a defined signal type

Learning Experience Greatly improved knowledge of JavaScript and how to use libraries Basic understanding of Git collaboration Using suggestions and reference code from multiple sources Time management and group coordination

Questions?