An interactive, educational web application for exploring digital modulation schemes in wireless communications. Built for students studying wireless networks and digital communications.
This simulator makes abstract modulation concepts tangible through real-time visualization. Students can experiment with different modulation schemes, adjust signal-to-noise ratios, and observe how these changes affect bit error rates, constellation diagrams, and waveforms.
- 5 Modulation Schemes: BPSK, QPSK, 8-PSK, 16-QAM, and 64-QAM
- Real-time Simulation: Watch symbols transmit, add noise, and get decoded
- Constellation Diagrams: See ideal points and noisy received symbols
- BER Performance Curves: Compare simulated vs theoretical bit error rates
- Time-Domain Waveforms: Visualize transmitted and received I/Q signals
- Passband Waveforms: See actual RF signal shapes for each symbol
- Frequency Spectrum: Understand bandwidth and pulse shaping effects
- Interactive Controls: Adjust SNR, playback speed, and pulse shaping
- Interactive Quiz: Test your understanding with 10 questions (with autosave)
- Dig Deeper: Explore the implementation code behind key algorithms
This tool helps students understand:
| Concept | What You'll Learn |
|---|---|
| Constellation Mapping | How bits map to I/Q symbols using Gray coding |
| AWGN Channel | How noise affects received symbols |
| BER vs SNR | The fundamental trade-off in digital communications |
| Modulation Trade-offs | Higher order = more bits/symbol but needs more SNR |
| Spectral Efficiency | Why bandwidth depends on symbol rate, not modulation order |
| Pulse Shaping | How raised cosine reduces bandwidth vs rectangular pulses |
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/ANRGUSC/digital-modulation-sim.git
cd digital-modulation-sim
# Install dependencies
npm install
# Start development server
npm run devThe app will open at http://localhost:5173
npm run buildThe built files will be in the dist/ directory.
Click on BPSK, QPSK, 8-PSK, 16-QAM, or 64-QAM to change the modulation. Notice how:
- The constellation diagram updates with new symbol positions
- The BER curve changes (higher order schemes need more SNR)
- The passband waveforms show different phase/amplitude patterns
Use the Eb/N0 slider to change the signal-to-noise ratio:
- Low SNR (-5 to 5 dB): High noise, constellation points scatter widely, many errors
- Medium SNR (5-15 dB): Transition region, some errors occur
- High SNR (15+ dB): Low noise, clean constellation, few errors
- Play: Continuously generate and transmit symbols
- Step: Advance one symbol at a time
- Reset: Clear statistics and start fresh
- Speed: Adjust symbols per second
- Waveforms: See how noise corrupts the transmitted signal
- Constellation: Watch received symbols scatter around ideal points
- BER Plot: See simulated BER converge toward theoretical curve
- Statistics: Track bit errors and compare simulated vs theoretical BER
In the Modulation Waveform Reference section:
- Toggle between Rectangular and Raised Cosine pulse shaping
- Observe the frequency spectrum change
- Note how raised cosine has finite bandwidth while rectangular has infinite (sinc) spectrum
Click "Take Quiz" to test your understanding:
- 10 questions (True/False and Multiple Choice)
- Each question includes a hint on how to verify the answer using the simulator
- Answers are automatically saved in your browser
- Download your answers as a text file for submission
Click "Dig Deeper" to explore how key algorithms are implemented:
- Q-Function: The mathematical foundation of BER calculations
- BER Formulas: Closed-form expressions for each modulation scheme
- Constellation Generation: Gray coding and I/Q symbol mapping
- AWGN Channel: How noise is added to simulate real channels
- Raised Cosine Pulse Shaping: Bandwidth-efficient transmission
- Box-Muller Transform: Generating Gaussian random numbers
digital-modulation-sim/
├── src/
│ ├── components/ # React UI components
│ │ ├── BERPlot.tsx # BER vs SNR chart
│ │ ├── ConstellationDiagram.tsx
│ │ ├── ModulationSelector.tsx
│ │ ├── ModulationWaveforms.tsx # Passband & spectrum
│ │ ├── PlaybackControls.tsx
│ │ ├── SNRSlider.tsx
│ │ ├── StatisticsPanel.tsx
│ │ ├── WaveformDisplay.tsx
│ │ ├── Quiz.tsx # Interactive quiz with autosave
│ │ └── DigDeeper.tsx # Code implementation examples
│ ├── hooks/ # Custom React hooks
│ │ ├── useSimulation.ts # Core simulation logic
│ │ └── useAnimationFrame.ts
│ ├── utils/ # Signal processing utilities
│ │ ├── math.ts # Q-function, complex math
│ │ ├── modulation.ts # Constellation generation, mod/demod
│ │ ├── channel.ts # AWGN noise
│ │ ├── theory.ts # Theoretical BER formulas
│ │ └── waveform.ts # Time-domain signal generation
│ ├── types/ # TypeScript definitions
│ ├── App.tsx # Main application
│ └── index.css # Tailwind styles
├── questions.txt # Review questions for students
├── LICENSE.md # PolyForm Noncommercial License
└── README.md
The simulator uses these closed-form expressions for AWGN channels:
| Scheme | BER Formula |
|---|---|
| BPSK | Pb = Q(√(2·Eb/N0)) |
| QPSK | Pb = Q(√(2·Eb/N0)) — same as BPSK! |
| 8-PSK | Pb ≈ (2/3)·Q(√(6·Eb/N0)·sin(π/8)) |
| 16-QAM | Pb ≈ (3/4)·Q(√(0.8·Eb/N0)) |
| 64-QAM | Pb ≈ (7/12)·Q(√(2/7·Eb/N0)) |
All constellation mappings use Gray coding, where adjacent symbols differ by only one bit. This minimizes bit errors when symbol errors occur (since errors typically go to adjacent symbols).
- React 18 with hooks for UI
- TypeScript for type safety
- Vite for fast development and building
- Tailwind CSS for styling
- Recharts for the BER plot
- HTML Canvas for waveforms and constellation diagrams
The simulator includes an interactive Quiz feature (click "Take Quiz" in the header) with 10 questions covering:
- QPSK vs BPSK performance
- Bits per symbol calculations
- Effects of SNR on constellation
- Gray coding benefits
- Bandwidth and pulse shaping
Each question includes hints that encourage students to verify answers using the simulator. Answers auto-save and can be downloaded for submission. The raw questions are also available in questions.txt.
This project is licensed under the PolyForm Noncommercial License 1.0.0.
- Non-commercial use: Free for educational, research, and personal use
- Commercial use: Requires a separate commercial license
For commercial licensing inquiries, please contact the author.
Bhaskar Krishnamachari University of Southern California EE597 - Wireless Networks
Developed with Claude Code and OpenAI Codex, January 2026
- Built as an educational tool for USC's wireless networks curriculum
- Theoretical formulas based on standard digital communications textbooks (Proakis, Sklar)