Current params differ from the reference case. The "Computed (live)" column reflects
your params, not the canonical example. Click Load Reference Case to align.
);
}
window.ReferenceValidation = ReferenceValidation;
// =====================================================================
// TimeDomainPlot — canvas plot of |IQ| over the 96 µs PPDU.
// Mirrors ref/wifi7-python/eht_waveform_time.png with field-boundary lines.
// =====================================================================
function TimeDomainPlot({ p }) {
const canvasRef = useRef8(null);
const [view, setView] = useState8('mag'); // 'mag' | 're' | 'im' | 'logmag'
const [waveform, setWaveform] = useState8(null);
const [running, setRunning] = useState8(false);
const onGenerate = () => {
if (!window.EHT.pipeline) return;
setRunning(true);
setTimeout(() => {
try {
const r = window.EHT.pipeline.generate(p);
setWaveform(r);
} catch (e) {
console.error(e);
}
setRunning(false);
}, 50);
};
useEffect8(() => {
if (!waveform || !canvasRef.current) return;
const cv = canvasRef.current;
const ctx = cv.getContext('2d');
const W = cv.width, H = cv.height;
ctx.fillStyle = '#fafcff';
ctx.fillRect(0, 0, W, H);
const { iqRe, iqIm, fields } = waveform;
const N = iqRe.length;
const fieldColors = {
'L-STF': '#fde4b8', 'L-LTF': '#e6d5f5', 'L-SIG': '#c8e6ec', 'RL-SIG': '#cfe9d4',
'U-SIG': '#f0e4b0', 'EHT-SIG': '#fbd5b8', 'EHT-STF': '#f5c8c8',
'EHT-LTF': '#dde8c0', 'Data': '#c8d8f0', 'PE': '#dbe1ea'
};
// Draw field background bands
for (const f of fields) {
const x0 = (f.startSample / N) * W;
const x1 = (f.endSample / N) * W;
ctx.fillStyle = fieldColors[f.name] || '#eee';
ctx.globalAlpha = 0.35;
ctx.fillRect(x0, 0, x1 - x0, H);
}
ctx.globalAlpha = 1;
// Compute Y values (decimated for plot)
const samplesPerCol = Math.max(1, Math.floor(N / W));
const yVals = new Float32Array(W);
let yMax = 0;
for (let x = 0; x < W; x++) {
const i0 = x * samplesPerCol;
const i1 = Math.min(i0 + samplesPerCol, N);
let agg = 0;
for (let i = i0; i < i1; i++) {
let v;
if (view === 'mag') v = Math.hypot(iqRe[i], iqIm[i]);
else if (view === 're') v = iqRe[i];
else if (view === 'im') v = iqIm[i];
else v = Math.log10(1e-6 + Math.hypot(iqRe[i], iqIm[i]));
agg = (Math.abs(v) > Math.abs(agg)) ? v : agg;
}
yVals[x] = agg;
if (Math.abs(agg) > yMax) yMax = Math.abs(agg);
}
if (yMax === 0) yMax = 1;
// Plot waveform
ctx.strokeStyle = '#2563eb';
ctx.lineWidth = 1;
ctx.beginPath();
for (let x = 0; x < W; x++) {
const y = (view === 'mag' || view === 'logmag')
? H - (yVals[x] / yMax) * (H - 24) - 4
: H/2 - (yVals[x] / yMax) * (H/2 - 12);
if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
}
ctx.stroke();
// Field boundary lines + labels
ctx.fillStyle = '#1a2236';
ctx.font = '10px JetBrains Mono, monospace';
for (const f of fields) {
const x0 = (f.startSample / N) * W;
ctx.strokeStyle = '#1a2236';
ctx.setLineDash([2, 3]);
ctx.beginPath();
ctx.moveTo(x0, 0); ctx.lineTo(x0, H);
ctx.stroke();
ctx.setLineDash([]);
ctx.fillText(f.name, x0 + 3, 12);
}
}, [waveform, view]);
return (
▦ Time-Domain Waveform
|IQ| vs sample index (full PPDU). Mirrors ref/wifi7-python/eht_waveform_time.png.
{['mag','re','im','logmag'].map(v => (
))}
{waveform && (
{waveform.iqRe.length} samples · {(waveform.iqRe.length / 480).toFixed(1)} µs · gen {waveform.stats.gen_ms} ms
)}
{!waveform && (
Click Generate to synthesize the IQ waveform. Currently the preamble fields use
placeholder analytic stubs (matching duration, not bit-content); the Data field is
fully spec-compliant.
)}
);
}
window.TimeDomainPlot = TimeDomainPlot;
// =====================================================================
// PSDPlot — Welch periodogram via the same generated IQ.
// Segment 256, 50% overlap, Hann window.
// =====================================================================
function welchPSD(iqRe, iqIm, segLen, hopLen, fs) {
const N = iqRe.length;
const hann = new Float64Array(segLen);
for (let n = 0; n < segLen; n++) hann[n] = 0.5 - 0.5 * Math.cos(2 * Math.PI * n / (segLen - 1));
let winSum = 0;
for (let n = 0; n < segLen; n++) winSum += hann[n] * hann[n];
// segLen must be a power of 2 for the radix-2 FFT used here (256 is fine).
const psd = new Float64Array(segLen);
let nSeg = 0;
for (let off = 0; off + segLen <= N; off += hopLen) {
const segRe = new Float64Array(segLen);
const segIm = new Float64Array(segLen);
for (let n = 0; n < segLen; n++) {
segRe[n] = iqRe[off + n] * hann[n];
segIm[n] = iqIm[off + n] * hann[n];
}
window.EHT.pipeline.fftRadix2(segRe, segIm, -1);
for (let k = 0; k < segLen; k++) {
psd[k] += (segRe[k]*segRe[k] + segIm[k]*segIm[k]);
}
nSeg++;
}
if (nSeg === 0) return null;
const norm = 1 / (nSeg * winSum * fs);
for (let k = 0; k < segLen; k++) psd[k] *= norm;
// FFT-shift so that DC is in middle
const half = segLen / 2;
const psdShift = new Float64Array(segLen);
for (let k = 0; k < segLen; k++) psdShift[k] = psd[(k + half) % segLen];
// Frequency axis (MHz, centered)
const freq = new Float64Array(segLen);
for (let k = 0; k < segLen; k++) freq[k] = (k - half) * fs / segLen / 1e6;
return { freq, psd: psdShift, nSeg };
}
function PSDPlot({ p }) {
const canvasRef = useRef8(null);
const [waveform, setWaveform] = useState8(null);
const [running, setRunning] = useState8(false);
const onGenerate = () => {
if (!window.EHT.pipeline) return;
setRunning(true);
setTimeout(() => {
try { setWaveform(window.EHT.pipeline.generate(p)); }
catch (e) { console.error(e); }
setRunning(false);
}, 50);
};
useEffect8(() => {
if (!waveform || !canvasRef.current) return;
const cv = canvasRef.current;
const ctx = cv.getContext('2d');
const W = cv.width, H = cv.height;
ctx.fillStyle = '#fafcff';
ctx.fillRect(0, 0, W, H);
const fs = 480e6;
const psdRes = welchPSD(waveform.iqRe, waveform.iqIm, 256, 128, fs);
if (!psdRes) return;
const { freq, psd } = psdRes;
const dB = new Float64Array(psd.length);
let dBmax = -Infinity, dBmin = Infinity;
for (let i = 0; i < psd.length; i++) {
dB[i] = 10 * Math.log10(psd[i] + 1e-20);
if (dB[i] > dBmax) dBmax = dB[i];
if (dB[i] < dBmin) dBmin = dB[i];
}
const range = Math.max(20, dBmax - dBmin);
const fMin = freq[0], fMax = freq[freq.length - 1];
// Plot
ctx.strokeStyle = '#2563eb';
ctx.lineWidth = 1;
ctx.beginPath();
for (let i = 0; i < freq.length; i++) {
const x = ((freq[i] - fMin) / (fMax - fMin)) * W;
const y = H - ((dB[i] - dBmin) / range) * (H - 24) - 4;
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
}
ctx.stroke();
// Axis labels
ctx.fillStyle = '#1a2236';
ctx.font = '10px JetBrains Mono, monospace';
ctx.fillText(`${fMin.toFixed(0)} MHz`, 4, H - 4);
ctx.fillText(`${fMax.toFixed(0)} MHz`, W - 60, H - 4);
ctx.fillText('0 Hz', W/2 - 12, H - 4);
ctx.fillText(`${dBmax.toFixed(1)} dB`, 4, 12);
ctx.fillText(`${dBmin.toFixed(1)} dB`, 4, H - 16);
// Grid: 80-MHz boundaries for BW=320
if (p.BW === 320) {
ctx.strokeStyle = '#cbd5e0';
ctx.setLineDash([2, 3]);
for (const fline of [-160, -80, 0, 80, 160]) {
const x = ((fline - fMin) / (fMax - fMin)) * W;
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
}
ctx.setLineDash([]);
}
}, [waveform, p]);
return (
▥ Power Spectral Density (Welch)
256-pt segments, 50% overlap, Hann window. Mirrors ref/wifi7-python/eht_waveform_psd.png.
);
}
window.PSDPlot = PSDPlot;
// =====================================================================
// BitTraceTool — Stub Phase-2 component. Currently shows the path through
// the pipeline at a high level; full bit-tracing requires more wiring.
// =====================================================================
function BitTraceTool({ p }) {
const [byteIdx, setByteIdx] = useState8(0);
const [bitIdx, setBitIdx] = useState8(3);
const c = window.EHT.compute(p);
// Reset byte/bit selection when PSDU layout changes (different BW/MCS/APEP)
// so the user never lands on an out-of-range byte after a param change.
useEffect8(() => { setByteIdx(0); setBitIdx(3); }, [p.BW, p.MCS, p.APEP, c.PSDU_bytes]);
// Clamp inputs (defensive — covers the render between effect dispatches)
const maxByte = Math.max(0, c.PSDU_bytes - 1);
const safeByteIdx = Math.min(Math.max(0, byteIdx), maxByte);
const safeBitIdx = Math.min(Math.max(0, bitIdx), 7);
// ---- Stage 1: PSDU byte (real APEP vs MAC EOF-padding delimiter) ----
const isPaddingByte = safeByteIdx >= c.APEP;
// ---- Stage 2: PHY bit-stream position (LSB-first per byte, after SERVICE) ----
// bit_stream[0..15] = SERVICE; bit_stream[16..16+8·PSDU_bytes-1] = PSDU bits.
const bitStreamPos = c.N_service + safeByteIdx * 8 + safeBitIdx;
const inBounds = bitStreamPos < c.N_pld;
// ---- Stage 4: LDPC codeword distribution ----
// The encoder pulls k_act = k − s_shrt info bits per codeword, sequentially.
// Shortening is distributed: first (N_shrt mod N_CW) codewords get one extra zero.
const k = Math.round(c.L_LDPC * c.mcs.Rn / c.mcs.Rd);
const shrtBase = (c.N_CW > 0) ? Math.floor(c.N_shrt / c.N_CW) : 0;
const shrtExtra = (c.N_CW > 0) ? c.N_shrt % c.N_CW : 0;
const puncBase = (c.N_CW > 0) ? Math.floor(c.N_punc / c.N_CW) : 0;
const puncExtra = (c.N_CW > 0) ? c.N_punc % c.N_CW : 0;
const repBase = (c.N_CW > 0) ? Math.floor(c.N_rep / c.N_CW) : 0;
const repExtra = (c.N_CW > 0) ? c.N_rep % c.N_CW : 0;
let cwIdx = -1, posInCw = -1, kActOfCw = 0;
let encStartOfCw = 0;
if (c.Coding === 'LDPC' && inBounds) {
let infoAcc = 0; // total info bits consumed so far
let encAcc = 0; // total encoded bits emitted so far
for (let cw = 0; cw < c.N_CW; cw++) {
const sShrt = shrtBase + ((cw + 1) <= shrtExtra ? 1 : 0);
const sPunc = puncBase + ((cw + 1) <= puncExtra ? 1 : 0);
const sRep = repBase + ((cw + 1) <= repExtra ? 1 : 0);
const kAct = k - sShrt;
const cwOutLen = kAct + (c.L_LDPC - k) - sPunc + sRep;
if (bitStreamPos < infoAcc + kAct) {
cwIdx = cw;
posInCw = bitStreamPos - infoAcc;
kActOfCw = kAct;
encStartOfCw = encAcc;
break;
}
infoAcc += kAct;
encAcc += cwOutLen;
}
}
// ---- Stage 5: which OFDM symbol + position within symbol ----
// Encoded bits stream is the concatenation of cwOuts; symbol idx = floor(enc_pos / N_CBPS).
// Info bits sit at the START of each cwOut, so encoded position of our bit = encStartOfCw + posInCw.
const encPos = (cwIdx >= 0) ? (encStartOfCw + posInCw) : -1;
const symIdx = (encPos >= 0) ? Math.floor(encPos / c.N_CBPS) : -1;
const posInSym = (encPos >= 0) ? (encPos % c.N_CBPS) : -1;
// ---- Stage 6: segment parser (BW ≥ 160) ----
// Round-robin into N_sb sub-blocks of s_l = max(1, N_BPSCS/2) bits per round.
// src_start = round * N_sb * s_l + l * s_l; dst_start = round * s_l + offset_in_chunk.
const N_sb = c.N_sb;
const s_l = Math.max(1, c.N_BPSCS >> 1);
let subBlock = 0, posInSb = posInSym;
if (N_sb > 1 && posInSym >= 0) {
const roundIdx = Math.floor(posInSym / (N_sb * s_l));
const offsetInRound = posInSym % (N_sb * s_l);
subBlock = Math.floor(offsetInRound / s_l);
const offsetInChunk = offsetInRound % s_l;
posInSb = roundIdx * s_l + offsetInChunk;
}
// ---- Stage 7: constellation point + LDPC tone map ----
// Each N_BPSCS bits → one Gray-coded QAM point. Sub-block size:
// N_SD_l = N_SD / N_sb; constellation index k = floor(posInSb / N_BPSCS).
// ldpc_tone_map (Eq. 36-72): t(k) = D_TM·(k mod (N_SD_l/D_TM)) + floor(k·D_TM/N_SD_l)
const N_SD_l = c.N_SD / N_sb;
const D_TM = (p.BW === 20) ? 9 : (p.BW === 40 ? 12 : 20);
let constIdx = -1, physIdxInSb = -1;
if (posInSb >= 0 && c.Coding === 'LDPC') {
constIdx = Math.floor(posInSb / c.N_BPSCS);
physIdxInSb = D_TM * (constIdx % (N_SD_l / D_TM)) + Math.floor(constIdx * D_TM / N_SD_l);
} else if (posInSb >= 0) {
constIdx = Math.floor(posInSb / c.N_BPSCS);
physIdxInSb = constIdx; // BCC: identity tone map (Eq. 36-74)
}
// K_mod table (matches modulation/constellation_map.py:K_mod_table)
const K_MOD_DEN = { 1: 1, 2: 2, 4: 10, 6: 42, 8: 170, 10: 682, 12: 2730 };
const kModDen = K_MOD_DEN[c.N_BPSCS];
// ---- Stage 8: time-domain sample range ----
// Preamble samples = sum of (L-STF, L-LTF, L-SIG, RL-SIG, U-SIG, EHT-SIG, EHT-STF, EHT-LTF) µs · 480 MHz.
// Read directly from c.fieldUs to honor the corrected EHT-LTF formula.
const preambleUs = c.fieldUs['L-STF'] + c.fieldUs['L-LTF'] + c.fieldUs['L-SIG'] +
c.fieldUs['RL-SIG'] + c.fieldUs['U-SIG'] + c.fieldUs['EHT-SIG'] +
c.fieldUs['EHT-STF'] + c.fieldUs['EHT-LTF'];
const preambleSamples = Math.round(preambleUs * 480);
const symLen = c.NFFT + c.CP_data;
const symStart = preambleSamples + Math.max(0, symIdx) * symLen;
const symEnd = symStart + symLen - 1;
const stages = [
{ title: 'PSDU byte location',
detail: `Byte ${safeByteIdx} of ${c.PSDU_bytes} (APEP=${c.APEP} real bytes + ${c.N_PAD_MAC_bytes} EOF-pad delimiter bytes; PHY pad ${c.N_PAD_PHY_bits} sub-byte bits at PHY layer). ${isPaddingByte ? 'This byte is a MAC EOF padding delimiter (signature 0x4E + length=0 + CRC-8).' : 'This byte is real APEP user payload.'}`
},
{ title: 'PHY bit-stream position (LSB-first per byte, §36.3.13.2)',
detail: `bit_pos = N_service(${c.N_service}) + byte(${safeByteIdx})·8 + bit(${safeBitIdx}) = ${bitStreamPos} of N_pld = ${c.N_pld}.`
},
{ title: 'Scrambler XOR (PN11, x¹¹+x⁹+1)',
detail: `scrambled[${bitStreamPos}] = data[${bitStreamPos}] ⊕ PN11_seq[${bitStreamPos}], with init seed = ${p.ScramblerInit || 1}. The XOR is bit-by-bit; bit position is preserved.`
},
{ title: c.Coding === 'LDPC' ? 'LDPC codeword distribution' : 'BCC encode (rate 1/2 + puncture)',
detail: c.Coding === 'LDPC' && cwIdx >= 0
? `k = round(L_LDPC·R) = round(${c.L_LDPC}·${c.mcs.Rn}/${c.mcs.Rd}) = ${k}. Per-codeword shortening: base ${shrtBase}, +1 for first ${shrtExtra} codewords. Lands in codeword #${cwIdx} (of ${c.N_CW}), info offset ${posInCw} of k_act = ${kActOfCw}. Output offset of this info bit = ${encStartOfCw + posInCw} (info comes first in cwOut = [info | parity]).`
: (c.Coding === 'BCC' ? 'BCC encoding doubles each scrambled bit (rate-1/2, K=7, g0=133/g1=171 octal). Detailed BCC trace TBD.' : '— bit out of N_pld range —')
},
{ title: 'OFDM symbol & encoded bit position',
detail: symIdx >= 0
? `Encoded position ${encPos} → OFDM symbol #${symIdx} of ${c.N_SYM}, encoded-bit offset ${posInSym} of N_CBPS = ${c.N_CBPS}.`
: '—'
},
{ title: `Segment parser (N_sb = ${N_sb})`,
detail: N_sb > 1 && posInSym >= 0
? `BW ≥ 160 MHz: round-robin into ${N_sb} sub-blocks. s_l = max(1, N_BPSCS/2) = ${s_l} bits/round. Round = floor(posInSym / ${N_sb*s_l}). Lands in sub-block #${subBlock}, position ${posInSb} of N_CBPSS_l = ${c.N_CBPS / N_sb}.`
: (posInSym >= 0
? `BW ≤ 80 MHz: single sub-block, identity (no parsing). Position in sub-block = posInSym = ${posInSb}.`
: '—')
},
{ title: 'Constellation point + LDPC tone map (Eq. 36-72)',
detail: constIdx >= 0
? `${c.mcs.name}, ${c.N_BPSCS} bits/SC, K_mod = 1/√${kModDen}. Logical SC #${constIdx} in sub-block (of N_SD_l = ${N_SD_l}). Tone map (D_TM = ${D_TM}): physical SC offset ${physIdxInSb} within sub-block #${subBlock}.`
: '—'
},
{ title: 'Time-domain sample range',
detail: symIdx >= 0
? `Preamble = ${preambleUs.toFixed(1)} µs · 480 MHz = ${preambleSamples} samples. Data symbol #${symIdx} occupies samples ${symStart}..${symEnd} (NFFT ${c.NFFT} + CP ${c.CP_data} = ${symLen}/symbol).`
: '—'
}
];
return (
⤳ Bit-Trace Tool
Pick ONE bit of your PSDU payload — see exactly where it lives at every stage of the PHY pipeline (math verified vs ref/wifi7-python)
{/* "What is this" intro card — keeps the panel self-explanatory */}
What this tool does
A WiFi 7 transmitter shreds your payload through 8 transformations
(scrambler → LDPC → bit→QAM → segment-parser → tone-map → pilots → IFFT → CP).
By the time the bit becomes RF, its identity is buried inside a complex sample.
Pick a single byte (e.g. byte 0, bit 3 = the 4th bit of byte 0) and the
panel tells you, at every stage:
which LDPC codeword it lands in (#0..#{c.N_CW-1})
which OFDM symbol carries it (#0..#{c.N_SYM-1})
which sub-block (segment parser) and which physical subcarrier it modulates
which time-domain sample range, in 480 MHz samples, it ultimately occupies
Use it for: debugging spec edge cases · teaching the LDPC distribution rule (shortening / puncturing / repetition) · sanity-checking your own reference implementation byte-by-byte.
▤ LDPC Base Matrix Heatmap
Annex F · {Ncw}-bit codeword, R={Rn}/{Rd}, Z={z} (lift factor) · ports of `_BM_{Rn===1&&Rd===2?1:Rn===2?2:Rn===3?3:4}{Ncw===648?1:Ncw===1296?2:3}` from coding/ldpc_matrices.py
Each cell is a Z×Z block: · = zero block; integer s ∈ [0, Z−1] = identity matrix circularly right-shifted by s.
Full parity-check matrix H is (rows·Z) × (cols·Z) = ({rows*z}×{cols*z}). The encoding matrix P is derived
once (cached) via GF(2) Gaussian elimination so that parity = P · info (mod 2).
);
}
window.LDPCBaseMatrixViz = LDPCBaseMatrixViz;
// 2. BCCTrellisViz — 64-state trellis for K=7, R=1/2 BCC.
// User types bit sequence; renders state path + per-step (A,B) outputs.
function BCCTrellisViz({ p }) {
const [bitInput, setBitInput] = useState8('1101001');
const bits = bitInput.split('').filter(c => c === '0' || c === '1').map(c => +c);
// Walk the 64-state shift register. At step n, with old state sr_old =
// [u_{n-1},…,u_{n-6}] (bits 5..0), the full 7-bit register that the K=7
// generators sample is reg7 = [u_n, u_{n-1},…,u_{n-6}] (bit 6 .. bit 0).
// The NEW state must drop u_{n-6} (the oldest tap that falls off).
// Earlier code had `sr = ((sr<<1)|b) & 0x3F` BEFORE building reg7, which
// duplicated u_n at bit 0 of reg7 and silently discarded u_{n-6}; that
// produced wrong A/B outputs (e.g. step 1 with u=1 gave A=B=0 instead of
// the correct A=B=1). Compute reg7 FIRST, then shift the state.
const states = [0];
const outputs = [];
let sr = 0;
// g0 = 133 octal = 0b1011011, g1 = 171 octal = 0b1111001
// Bit indices used by the polynomial taps map to positions in reg7
// where bit j corresponds to u_{n-6+j} (i.e. bit 6 = current u_n, bit 0
// = u_{n-6}). This matches ref/wifi7-python/coding/bcc_encoder.py.
const G0 = 0b1011011;
const G1 = 0b1111001;
for (const b of bits) {
const reg7 = ((b << 6) | sr) & 0x7F; // current u_n + previous 6 bits
let A = 0, B = 0;
for (let j = 0; j < 7; j++) {
A ^= ((reg7 >> j) & 1) & ((G0 >> j) & 1);
B ^= ((reg7 >> j) & 1) & ((G1 >> j) & 1);
}
outputs.push([A, B]);
sr = (reg7 >> 1) & 0x3F; // new 6-bit state (drops u_{n-6})
states.push(sr);
}
const W = 920, H = 380;
const stepX = bits.length > 0 ? (W - 100) / (bits.length) : 100;
const numStates = 64;
const stateY = s => 30 + (s / (numStates - 1)) * (H - 60);
return (
⊥ BCC Trellis (K=7, R=1/2, g0=133o, g1=171o)
6-bit shift-register state evolution; output (A,B) per step. Section 17.3.5.5.
{bits.length} bits → {bits.length*2} coded
Solid blue = input bit 0 · dashed red = input bit 1. Y-axis = 6-bit state (0..63). Path traces how the
encoder's state evolves as you feed input bits. Output is the full-rate-1/2 stream interleaved (A0,B0,A1,B1,...).
);
}
window.BCCTrellisViz = BCCTrellisViz;
// 3. GrayVsBinaryViz — 16-QAM, side-by-side: Gray vs natural-binary mapping.
// Highlights nearest-neighbor Hamming distance.
function GrayVsBinaryViz({ p }) {
const [highlight, setHighlight] = useState8(5);
const points = [];
// 16-QAM layout: 4×4 grid in (-3,-1,+1,+3) × (-3,-1,+1,+3)
const levels = [-3, -1, 1, 3];
const grayDecode = idx => idx ^ (idx >> 1); // simplified Gray: bin->Gray = bin ^ bin>>1
// Build 16 points: for each (Iidx, Qidx), compute Gray and binary 4-bit codes
for (let qi = 0; qi < 4; qi++) {
for (let ii = 0; ii < 4; ii++) {
const I = levels[ii], Q = levels[qi];
const binCode = (qi << 2) | ii; // simple 4-bit binary
// Gray code spec: spec uses Gray for I and Q independently, then concat.
// For 16-QAM: 2 bits per axis; Gray code(0..3) = {00, 01, 11, 10}.
const grayMap2 = [0b00, 0b01, 0b11, 0b10];
const grayI = grayMap2[ii];
const grayQ = grayMap2[qi];
const grayCode = (grayQ << 2) | grayI;
points.push({ I, Q, ii, qi, binCode, grayCode });
}
}
const popcount4 = x => ((x>>0)&1) + ((x>>1)&1) + ((x>>2)&1) + ((x>>3)&1);
const hl = points[highlight];
const grayHam = points.map(pt => popcount4(pt.grayCode ^ hl.grayCode));
const binHam = points.map(pt => popcount4(pt.binCode ^ hl.binCode));
function ConstPanel({ codeKind, hams }) {
const W = 280, H = 280;
const px = I => W/2 + (I/4) * (W/2 - 30);
const py = Q => H/2 - (Q/4) * (H/2 - 30);
return (
);
}
return (
◇ Gray vs. Binary Mapping (16-QAM)
Click a point. Color = Hamming distance from selection. Notice Gray's nearest neighbors are 1-bit apart.
Why Gray? A small AWGN error nudges a symbol to its nearest neighbor.
With Gray coding, that neighbor differs by exactly 1 bit → the bit error is minimised. With naïve binary,
neighbors can differ in up to 4 bits, dramatically inflating BER for the same SNR.