PROJECT / 09 FEATURE ARTICLE

QPSKVisualization

TYPE Technical VisualisationSTATUS live

An interactive view of QPSK modulation and signal noise.

01 Project overview

Make the symbol mapping visible

This browser visualization generates 40 random bits and groups them into 20 QPSK symbols. Each pair selects one of four ideal positions in the I/Q constellation.

An adjustable random displacement moves the displayed coordinates around those ideal points. Showing the original and perturbed symbols together makes the mapping and its visual change easy to compare; the perturbation is illustrative, not a physical channel model.

02 Signal flow

From bit pairs to plotted coordinates

40 random bits
20 bit pairs
QPSK mapping
Ideal I/Q coordinates
Random I/Q displacement
SVG constellation

Each pair maps to one of four normalized constellation positions. The displacement control adds a separate bounded random offset to the real and imaginary coordinates before plotting the perturbed points.

03 Implementation

A small stateful browser visualization

The original standalone visualization used a React component; the embedded V5 demo preserves the same mapping and interaction in vanilla JavaScript and SVG. Forty random bits become twenty pairs, with each I and Q coordinate set to +1/√2 or −1/√2 according to the pair.

The displacement slider ranges from 0 to 1 in 0.01 steps. For each coordinate, the demo adds level × (2 × Math.random() − 1), then plots the ideal and displaced points in SVG. This is bounded random I/Q perturbation, not Gaussian noise or an AWGN channel simulation.

04 QPSK mapping

Two bits select one of four positions

00

I = +1/√2 · Q = +1/√2

01

I = −1/√2 · Q = +1/√2

10

I = +1/√2 · Q = −1/√2

11

I = −1/√2 · Q = −1/√2

The constellation labels its horizontal and vertical axes Real and Imag.

05 Explore the visualization

Change the data and compare points

  1. 01

    Generate data

    Create a new random 40-bit stream and map its 20 pairs to the ideal QPSK positions.

  2. 02

    Adjust displacement

    Move the 0–1 displacement slider to change the maximum random displacement applied independently to I and Q.

  3. 03

    Regenerate displacement

    Generate another set of random offsets around the same ideal symbol coordinates.

  4. 04

    Compare the field

    Show or hide ideal and perturbed points independently, then compare the constellation with the current bit-pair sequence.

06 Interactive demo

Explore the constellation

Adjust the bounded displacement, regenerate the bit stream, and compare ideal and perturbed symbols.