A comprehensive WebGL/Canvas-based learning aid for digital signal processing education. This tool provides interactive visualization of signal processing concepts including DTFT, poles and zeros, and FIR filter design.

• Load images from web URLs (or use the default Pillars of Creation image)
• CORS-enabled for most web images
• Displays images in a responsive canvas viewer

• Click on any row in the image to select it
• Real-time cursor feedback (yellow dashed line)
• Selected row highlighted in red

• Red (R): Extract red channel
• Green (G): Extract green channel
• Blue (B): Extract blue channel
• Luminance (Y): Extract luminance using ITU-R BT.601 formula (0.299R + 0.587G + 0.114*B)

Once a row is selected, the tool performs:

• DTFT (Discrete-Time Fourier Transform): Analyzes frequency content
• Z-Plane Representation: Visualizes poles and zeros on the unit circle
• Magnitude Response: Shows frequency response in dB

Adjust sliders to select a region in the Z-plane:

• Pole Selection Radius: Controls the selection circle size
• Pole X Position: Moves selection circle left/right
• Pole Y Position: Moves selection circle up/down

• Generate FIR (Finite Impulse Response) filter coefficients based on selected poles/zeros
• Uses Hamming window for smooth frequency response
• Displays filter coefficients as a bar chart

• Apply FIR filter to the signal with real-time visualization
• Convolution Window Position: Slide the filter window across the signal
• Window Width: Adjust the region being filtered
• View the filtered output in real-time

• Show Grid: Toggle grid overlay on signal plots
• Show Poles/Zeros: Toggle selection circle in Z-plane
• Show Magnitude: Toggle magnitude response display

1. Load an Image

   • Click "Load Default (Pillars)" to load the Pillars of Creation image
   • Or enter a URL and click "Load Image"

2. Select a Row

   • Click on any row in the image viewer
   • The row will be highlighted in red

3. Choose a Channel

   • Click one of the channel buttons (R, G, B, or Y)
   • The analysis will update for the selected channel

4. Analyze Frequencies

   • The DTFT result is automatically computed
   • View the magnitude spectrum and Z-plane representation

5. Select Filter Region

   • Adjust the radius and position sliders
   • The selection circle in the Z-plane shows your region
   • Selected frequency content is highlighted

6. Generate and Apply Filter

   • Click "Generate FIR Coefficients"
   • The FIR filter is designed based on your selection
   • Coefficients are displayed in the bottom right

7. View Filtered Signal

   • Slide the convolution window position to move the filter
   • Adjust window width to change the filtering region
   • The filtered output updates in real-time

Converts discrete-time signal to frequency domain for analysis of spectral content.

Represents the transfer function of a filter. Points on the unit circle show frequency response characteristics.

• Poles: Cause peaks in frequency response
• Zeros: Cause nulls in frequency response
• Selection strategy determines filter characteristics

Finite Impulse Response filters have:

• Linear phase (no distortion)
• Always stable
• Finite duration impulse response
• Typically require higher order than IIR

Mathematical operation combining signal and filter to produce filtered output.

DSP02/
├── index.html           # Main HTML structure
├── styles.css          # Styling and layout
├── utils.js            # Utility functions (image processing, math)
├── signal-processing.js # DSP algorithms (DTFT, FIR, etc.)
├── visualization.js    # Canvas visualization classes
└── app.js             # Main application logic

• Uses 2D Canvas API for all visualizations
• Real-time updates on parameter changes
• Responsive layout adapting to screen size

• DTFT with 512 frequency bins
• Hamming windowing for FIR design
• Complex number operations for frequency analysis
• Zero-centered convolution for visualization

• Blue: Frequency domain content
• Red: Row selection
• Green: FIR coefficients
• Yellow: Convolution window

Requires a modern browser with support for:

• HTML5 Canvas
• ES6 JavaScript
• Canvas 2D Context
• CORS for image loading

Tested on:

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

This tool is designed for:

• Digital Signal Processing courses
• Filter design education
• Frequency analysis visualization
• Understanding FIR filter concepts
• Interactive learning of DSP fundamentals

1. Start Simple: Begin with simple channel selection and row selection
2. Observe Patterns: Notice how different images produce different frequency content
3. Experiment: Try different pole/zero selections to see filter effects
4. Compare: Switch between channels to see how content differs
5. Analyze Edge Cases: Look at transition regions in images

• Large images may take a moment to process initially
• DTFT computation is O(N²), acceptable for typical row lengths
• Real-time convolution updates at 60fps on modern hardware
• Sliders provide smooth interactive feedback

Potential improvements:

• IIR filter design option
• Multi-dimensional filtering
• FFT acceleration for larger signals
• Export filter designs
• Preset filter configurations
• Signal import/export
• More advanced DSP algorithms

• Oppenheim & Schafer: Discrete-Time Signal Processing
• Digital Signal Processing fundamentals
• Filter Design Theory

Version: 1.0
Last Updated: December 2025
License: Educational Use