Interactive Communication Systems Lab
A browser-native simulation environment for communication theory — move a control, watch the math resolve into a signal.
CommSysLab is a browser-only simulation lab that turns textbook figures into live instruments. It covers the full communication signal chain — Fourier analysis, analog AM/FM modulation, random processes, sampling and waveform coding, source coding, digital modulation and optimum detection, baseband pulse shaping, channel coding, wireless links, and an end-to-end system — all runnable without install or sign-in.
Every module executes its DSP client-side and re-renders as controls change. Aliasing appears the moment Nyquist is crossed. An eye diagram closes as ISI builds. A fading channel reshapes the BER curve in real time.
Simulation math, notation, and parameter ranges follow Proakis & Salehi, Fundamentals of Communication Systems. The module-to-chapter mapping is in docs/book-reference.md.
Communication theory is hard to internalize from static equations. The intuition is in the motion — how a constellation scatters under noise, how a Viterbi decoder unwinds an error burst, how OFDM handles multipath. CommSysLab makes that motion the primary interface.
- Zero friction. Open the URL and explore. No account, no install, no server.
- Direct manipulation. Every parameter is a live control; every output updates immediately.
- Textbook-faithful math. DSP and theory panels track the reference book exactly.
- Separated core. Pure TypeScript DSP functions in
src/lib/dsp, decoupled from UI and independently tested. - Audio where it matters. Web Audio playback exposes aliasing and quantization artifacts as sound.
- Instrument-grade UI. Dark glassmorphism, neon signal palette, light/dark theme tokens.
All twelve modules are live and follow book-chapter order.
| # | Module | What it covers |
|---|---|---|
| 01 | Signals & Spectra | Basic signals, convolution, Fourier series synthesis, FFT & spectra, transform pairs, filter design (LTI · realizable · studio with audio), Hilbert transform, bandpass & I/Q representation |
| 02 | Amplitude Modulation (AM) | DSB-SC, conventional AM, SSB & VSB, power/efficiency; power-law, switching, balanced & ring modulators with circuit block diagrams; envelope & coherent demodulators; FDM channel stacking & quadrature-carrier multiplexing (QAM); superheterodyne receiver frequency plan |
| 03 | Angle Modulation (FM/PM) | FM & PM waveforms, instantaneous frequency, Bessel sidebands, Carson bandwidth, discriminator & PLL detection; FM radio (stereo multiplexing, pre/de-emphasis, superheterodyne) |
| 04 | Random Processes | Probability, Bayes & random variables (distributions, Q-function, functions of an RV, joint Gaussian, CLT); ensembles, autocorrelation, ergodicity, PSD (Wiener–Khinchin), cross-correlation & LTI filtering; Gaussian, white/thermal & bandpass-filtered noise (I/Q, noise-equivalent bandwidth) |
| 05 | Noise in Analog Systems | AM noise with real demod chains (baseband reference, DSB-SC, SSB, conventional-AM envelope detection, efficiency & threshold); angle-modulation noise (parabolic FM / flat PM output PSD, FM/PM output SNR, threshold effect, pre/de-emphasis); DSB/SSB/AM/FM/PM SNR comparison; transmission losses & link budget (thermal noise kTB, noise figure & Friis cascade, path loss, repeater chains) |
| 06 | Analog-to-Digital Conversion | Sampling & aliasing, scalar (uniform + Lloyd-Max) & vector quantization, SQNR, PCM with μ-law/A-law companding, DPCM, delta & adaptive delta modulation, LPC vocoder, Σ-Δ + TDM digital audio, JPEG 8×8 DCT, and baseband line coding (OOK/NRZ/RZ/AMI/Manchester); audio playback |
| 07 | Digital Modulation & Detection | M-ary constellations (PSK/QAM/ASK/FSK), AWGN, ML/MAP decision regions, SER curves; signal waveforms & signal-space (Gram-Schmidt basis + constellation); optimum receiver (correlation / matched-filter); DPSK differential encoding & detection; noncoherent square-law FSK; multidimensional orthogonal/biorthogonal/simplex signals with union bound; regenerative-vs-analog repeaters; carrier-phase PLL & symbol-timing (early-late gate) synchronization |
| 08 | Baseband Transmission & ISI | Raised-cosine pulse shaping & the Nyquist criterion, matched-filter / correlation receiver; power spectrum of digitally modulated signals (continuous vs discrete lines, symbol correlation); partial-response (duobinary / modified-duobinary) signaling; PR detection with precoding, three-level eye, ML sequence (Viterbi) detection & BER penalties; ISI, eye diagrams, ZF/MMSE equalization; channel amplitude/phase distortion, envelope delay & Tx/Rx filter design |
| 09 | Information Theory | Entropy & self-information, joint/conditional & mutual information (entropy Venn diagram), differential entropy, Kraft inequality & prefix codes, Huffman, Lempel-Ziv compression, source-coding efficiency (channel capacity & Shannon bounds are in the Channel Coding module) |
| 10 | Channel Capacity & Coding | Mutual information, capacity, Shannon limit; block/conv/cyclic/BCH/Reed–Solomon, product, concatenated, turbo (BCJR), LDPC (belief propagation) & TCM codes, Viterbi |
| 11 | Wireless Communications | Rayleigh/Rician fading, Doppler; BER/diversity/shadowing; OFDM (equalization, PAPR CCDF & clipping, applications); DS-SS & detector P_e; PN codes (LFSR/m-seq/Gold); CDMA near-far; FHSS (partial-band & fast-FH); SS sync (acquisition + DLL); RAKE; MIMO (capacity, Alamouti, ZF/MMSE); CPM/MSK; link budget |
| 12 | End-to-End Link | Full chain: source → quantizer → modulation → channel → detection → sink with stage inspection |
Each module is a block in a communication link. The landing page renders this chain interactively; the module launcher lists every lab in book-chapter order.
source → sampling → source coding → modulation → channel → detection → receiver
│ │ │ │ │
Sampling & Information Modulation AWGN / ML/MAP
Quantization Theory & Detection fading detector
| Layer | Stack |
|---|---|
| Frontend | React 18 · TypeScript strict · Vite 5 · React Router v6 |
| Math typesetting | KaTeX |
| Audio | Web Audio API |
| Rendering | Custom Canvas + SVG plotting primitives |
| DSP core | Pure TypeScript in src/lib/dsp (70 modules, no framework deps) |
| Styling | CSS design tokens · glassmorphism · neon signal palette |
| Testing | Vitest · Testing Library · jsdom (140+ test files, 930+ tests) |
| Tooling | ESLint · Prettier · tsc --noEmit |
| Deployment | Vercel static SPA |
The architecture enforces a hard boundary between math and UI. All DSP, coding, channel, and simulation logic lives in pure functions under src/lib/dsp and src/lib/sim, independently testable without React.
A single visual language throughout: dark glassmorphism with restrained neon glow, driven by CSS custom properties in src/theme/tokens.css.
- Tokens only. Colors, spacing, radii, blur, and motion are CSS variables — never hardcoded values.
- Typography.
Newsreader(editorial serif) for headings and body;IBM Plex Monofor numerics, formulas, and code. - Glass panels. Translucent surfaces, backdrop blur, hairline borders, subtle hover glow.
- Signal palette. Green input · orange system · blue-violet output · pink marker.
- Shared primitives. Sliders, selects, panels, KaTeX formulas, readouts, segmented controls, toggles.
src/
├── modules/ One directory per communication-theory lab
│ ├── fourier/ Signals, convolution, Fourier series/transform, filters, Hilbert, bandpass & I/Q
│ ├── analog-am/ AM (DSB-SC/SSB/VSB), modulators/demodulators, FDM/QAM, AM radio
│ ├── analog-fm/ FM/PM, Bessel spectrum, discriminator/PLL, FM radio
│ ├── random-process/ Probability & RVs, random processes/PSD, Gaussian & white noise
│ ├── sampling-quantization/ Full Ch7 A/D: sampling, quantization (Lloyd-Max/VQ), PCM/companding, DPCM, delta-mod, LPC, Σ-Δ/TDM, JPEG DCT, line coding
│ ├── analog-noise/ AM/FM noise, SNR comparison, transmission & link budget (Ch 6)
│ ├── infotheory/ Entropy, mutual info, differential entropy, prefix codes, Huffman, LZ78
│ ├── modulation/ Constellations, AWGN, ML/MAP, optimum receiver, DPSK, noncoherent FSK, multidim signals, repeaters, sync
│ ├── baseband/ Pulse shaping, matched filter, eye, equalization
│ ├── channel-coding/ Capacity, block/conv/cyclic/BCH/RS, product, concat, turbo, LDPC, TCM
│ ├── wireless/ Fading, Doppler, OFDM (+PAPR), DS-SS, PN codes, CDMA, FHSS, SS sync, RAKE, MIMO, CPM, link budget
│ └── end-to-end/ Source-to-sink full-chain inspection
├── lib/
│ ├── dsp/ Pure DSP, probability, channel, and coding functions
│ ├── plot/ Canvas/SVG drawing primitives and color helpers
│ ├── sim/ Simulation loop, sources, and link helpers
│ └── audio/ Web Audio playback helpers
├── components/ Shared UI controls and display components
├── pages/ Landing page, module launcher, and page shells
├── theme/ Design tokens and global styles
├── i18n/ User-facing string catalogs
└── App.tsx Router, nav shell, theme toggle
tests/ Vitest unit and component suites
docs/book-reference.md Module-to-chapter map
refs/ Reference PDFs (git-ignored)
Requires Node.js 18+.
npm install
npm run dev # Dev server at http://localhost:5173
npm run build # Type-check + production build → dist/
npm run preview # Preview the production build
npm test # Run all unit and component tests
npm run lint # ESLint with zero warnings
npm run format # PrettierReact Router v6 with hash routing — no server rewrites needed.
/ Landing page
/start Module launcher
/fourier Signals & Spectra
/analog-am Amplitude Modulation (AM)
/analog-fm Angle Modulation (FM/PM)
/random-process Random Processes
/analog-noise Noise in Analog Systems
/sampling Analog-to-Digital Conversion (Sampling, Quantization & Delta Mod.)
/delta-modulation → redirects to /sampling
/modulation Digital Modulation & Detection
/information-theory Information Theory
/baseband Baseband Transmission & ISI
/channel-coding Channel Capacity & Coding
/wireless Wireless Communications
/end-to-end End-to-End Link
Simulation math and notation track the textbook. Chapter-by-chapter coverage and DSP-file cross-references are in docs/book-reference.md.
Proakis, J. G., & Salehi, M. (2014). Fundamentals of Communication Systems (2nd ed., Global ed.). Pearson. ISBN 978-1292015682.
CommSysLab ships as a static SPA on Vercel via git integration. Vite preset (npm run build, output dist/) with a relative base so assets resolve from any deployed path.
CommSysLab · Interactive Communication Systems Lab
📡 Communication theory — live, manipulable, and in the browser.