The DSP Pages

Web pages that exploit JavaScript to do animated explanations.

Compatibility

Some of the features of these pages (namely “canvas” and “slider”) are new in HTML 5. Your browser must be up-to-date. By slider, I mean a GUI control that you drag back and forth to set a number. If it is rendered like this

you are OK. (This one is just a picture, it won’t actually work.) If the blue knob is missing and there is just a text field to type in, a lot of the interactivity of the Web page will be missing.

Brief Explanation

These web pages illustrate graphically some of the interesting ideas in digital signal processing. The basic idea is that they follow a plan, and you go through them from first to last, using the links at the top or bottom of the pages. This is a good idea if you haven’t seen them before.

But you can also visit them in arbitrary order. In the section below, there are links for each page, so you can jump to them directly.

Navigate Yourself

• The Discrete Fourier Transform — Examines some transform pairs.
• The Simple Sine Wave — Drag a slider to select a frequency component.
• The Real Sine Wave — Real functions have Hermitian spectra.
• Building Waves — Using sine waves to build other shapes.

Remarks

Although this set of pages comprises a linear narrative, at each page we could turn off toward a multitude of related topics. Perhaps this set of Web pages will eventually more resemble a tree than a line! Of course, eventually the large-scale connectivity would be web-like. This is just a start a getting the simple things illustrated. Each page is self-contained, and most code is open and non-obfuscated, so inquiring minds can inspect the programming and learn further. One thing such minds will learn is that my CSS skills are rudimentary! The page layouts are more ad-hoc, versus the better-factored JavaScript code. Advice is welcome.

See Also

• DSP FAQ — DSP in thirteen lucky and easy steps.
• LL(1) Parsing — A Web tool for generating a parse table and using it to construct a leftmost derivation.
• Enumeration — A Web tool for finding permutations and combinations.
• The 3D Pages — My JavaScript implementation of interactive 3D graphics .
• Combinatorial Music Theory — A lecture connecting graph theory with musical scales and chords.
• The Chaos Pages — A similar series of pages exploring iterated systems.
• The Golden Ratio Pages — A similar series of pages exploring the famous ratio.
• Gear Ratios — These may not be golden, but they are important for people who ride and work with bicycles. Available as a mobile app and a Web page.
• Anagrams — A mobile app and a Web tool for finding anagrams.
• Gaussian Elimination — A Web tool for reducing matrices to row echelon form.
• Graph Clock — A good example of using JavaScript to make a self-modifying Web page, and a little puzzle about elementary connected graphs.
• Regular Expressions — Sometimes a non-match can hang the system.
• The Z-Board — A new kind of MIDI controller.