);
}
// ---------- "What is this whole thing" plain-language intro ----------
// Goal: before showing the wire-spaghetti SVG, explain in human language
// what scrambling actually does, what the 3 streams are, and why anyone cares.
function PlainLanguageIntro() {
return (
What this panel actually does
A WiFi transmitter takes your raw data bits (PSDU + SERVICE) and XORs them
bit-by-bit with a pseudo-random sequence before sending. This is called
scrambling. The point is to whiten the
spectrum so a long run of identical data bits doesn't accidentally produce a tone.
The receiver runs the SAME XOR with the SAME sequence to recover the data — XOR is its
own inverse.
{/* Three-stream story: in / PN / out */}
in
Data input — your raw bits going INTO the scrambler (e.g. SERVICE
all-zeros, then your PSDU bytes). One bit per clock.
PN
Pseudo-random Number bit — what the 11-bit shift-register
(LFSR) emits this clock. Looks random, but completely deterministic given the seed.
This is the only thing the LFSR diagram below actually computes.
out
Scrambled output = in ⊕ PN. This is what
actually goes on the air (after FEC, IFFT, etc.).
How to read the diagram below: the 11 boxes (X₁…X₁₁) are
register cells. Every clock the bits inside SHIFT one cell to the right. The
rightmost cell (X₁₁) drops its bit out the bottom — that's the PN bit for this clock.
Two of the cells (X₁₁ and X₉) feed back UP into a XOR; the result drops into the leftmost
cell to refill the register. Then the data XOR happens at the bottom-right: in ⊕ PN.
);
}
// ---------- Title ----------
function ScrTitle() {
return (
Step 5 · Data Scrambler
The 11-bit conveyor belt
Every Data-field bit gets XOR'd with a pseudo-random sequence so the on-air spectrum stays white.
The PN generator is a Fibonacci LFSR with polynomial S(x) = x¹¹ + x⁹ + 1.
{stages.map(s => {
const active = reveal >= s.n;
const sel = reveal === s.n;
return (
);
})}
);
}
// ---------- ① Polynomial card ----------
function PolyCard({reveal}) {
return (
①
The polynomial
S(x) = x11 + x9 + 1
Two non-zero terms (besides the constant) → exactly two tap points: bit positions
{' '} and . The XOR of those taps becomes tomorrow's
{' '}. This particular polynomial is primitive, so the sequence cycles through all 2¹¹−1 = 2047 non-zero states before repeating.
);
}
function CtrlBtn({children, onClick, primary}) {
return (
);
}
// ---------- ②③④ Conveyor belt SVG ----------
// Layout per IEEE Fig 36-50:
// feedback line on TOP, register cells X11..X1 LEFT-to-RIGHT,
// tap pickoffs at X11 and X9 going UP into the feedback adder,
// output X₁₁ drops out the left side (X11=leftmost cell), then meets the data XOR.
function ConveyorBelt({cur, step, playing, reveal}) {
if (!cur) return null;
// Compact dimensions — fit in a typical desktop panel without horizontal scroll.
// padR enlarged from 168 → 240 so the right-side "out = X / (scrambled)"
// label fits inside the viewBox (was being clipped by the SVG's right edge).
const cellW = 44, cellH = 42, gap = 4;
const padL = 88, padR = 240, padT = 96, padB = 78;
const xs = [];
for (let i = 0; i < 11; i++) xs.push(padL + i * (cellW + gap));
const yReg = padT;
const W = padL + 11*(cellW+gap) - gap + padR;
const H = padT + cellH + padB;
// Visual cell index 0..10 (left→right) shows X_{11-i}, i.e. before[10-i]
const cellName = i => 11 - i;
const cellVal = i => cur.before[10 - i];
const isTap = i => (i === 0 || i === 2); // X11 (i=0), X9 (i=2)
const x_X11 = xs[0] + cellW/2;
const x_X9 = xs[2] + cellW/2;
const x_X1 = xs[10] + cellW/2;
const yFBtop = yReg - 64; // top feedback rail (X11 tap goes here)
const yFBmid = yReg - 38; // middle rail (X9 tap goes here, below X11 tap)
const xFBxor = padL - 52; // feedback adder x-pos (left of register)
const yFBxor = yReg + cellH/2;
const xOutXor = xs[10] + cellW + 60;
const yOutXor = yReg + cellH + 50;
return (
The 11-cell shift register & the data XOR
Three colour-coded zones:
{' '}red = LFSR feedback path (taps from X₁₁ & X₉ →
XOR → back into X₁₁ to refill the register).
{' '}amber = the 11 register cells.
{' '}purple = the data XOR — PN bit ⊕ incoming data
bit = scrambled output.
{/* viewBox + width 100% lets the SVG scale to its container instead of
forcing a horizontal scrollbar on smaller screens. */}
{/* Animation legend strip */}
{/* Steps ordered to match the reveal levels (so the early reveals tell a coherent story) */}
{reveal >= 2 &&
① shift right: each X_i ← X_(i+1) · old X₁₁ = drops out · new X₁ ←
}
{reveal >= 3 &&
② feedback: fb = X₁₁ ⊕ X₉ = ⊕ =
}
{reveal >= 4 &&
③ output tap: s_n = X₁₁ =
}
{reveal >= 4 &&
④ scramble: out_n = in ⊕ s_n = ⊕ =
}
);
}
function BitChip({v, c}) {
return (
{v}
);
}
// ---------- Mini-panels (shift/feedback/output) ----------
function MiniPanels({cur, reveal}) {
if (!cur) return null;
return (
{reveal >= 2 &&
Every clock, the entire register slides one cell rightward — like a conveyor belt. The
{' '}old X₁₁ falls off the end (becomes the PN bit), and a fresh
{' '}new X₁ drops in at the front (= the freshly-computed feedback).
}
{reveal >= 3 &&
The freshman X₁ isn't random — it's X₁₁ ⊕ X₉ from before the shift.
Those two tap positions correspond to the non-zero exponents in S(x). They're what makes the sequence
{' '}maximal-length.
}
{reveal >= 4 &&
The bit that just fell off (s_n) is XOR'd with the data bit you fed in. That XOR result is
{' '}the scrambled bit on air. Notice: the scrambler doesn't add
information; it just whitens the spectrum.
);
}
// ---------- Piano-roll bit stream ----------
// 3 rows (in / PN / out) share a horizontal timeline; cursor sweeps over columns.
function PianoRoll({records, step, setStep}) {
const containerRef = useRc(null);
const cellW = 26;
const N = records.length;
useEc(()=>{
const el = containerRef.current; if (!el) return;
const cell = el.querySelector(`[data-col="${step}"]`);
if (cell) {
const cleft = cell.offsetLeft, ew = el.clientWidth, sw = el.scrollLeft, cw = cell.offsetWidth;
if (cleft < sw + 50 || cleft > sw + ew - 50 - cw) {
el.scrollTo({ left: cleft - ew/2 + cw/2, behavior:'smooth' });
}
}
}, [step]);
const inBits = records.map(r=>r.inBit);
const pnBits = records.map(r=>r.sBit);
const outBits = records.map(r=>r.outBit);
return (
Bit-stream piano roll · 3 streams over time
click any column to jump
Each column = one clock tick.
{' '}Data in (raw input, e.g. SERVICE all-zeros, then PSDU bytes)
⊕
{' '}PN bit (X₁₁ output of the LFSR this clock)
=
{' '}Scrambled (what goes on the air).
);
}
// ---------- ⑤ Descrambler symmetry ----------
function DescramblerCard({records, step, showDescrambler, setShowDescr}) {
// The descrambler is the SAME circuit. Apply the scrambler again to the
// already-scrambled output → we recover the original input.
const out = records.slice(0, step+1).map(r=>r.outBit);
const seed = records[0]?.before ?? [1,1,1,1,1,1,1,1,1,1,1];
const recovered = useMc(()=> scrRun(seed, out), [out, seed]);
return (
⑤Descrambler is the same circuit
Because XOR is its own inverse, feeding the scrambled stream back through an identical LFSR
(same polynomial, same initial state) recovers the original bits.
The receiver doesn't need a different circuit — and the seed is recovered from the SERVICE field.
{showDescrambler && (
scrambled →
{out.map((b,i)=>{b})}
↓ same LFSR
···
recovered ←
{recovered.map((r,i)=>{r.outBit})}
original
{records.slice(0, step+1).map((r,i)=>{r.inBit})}
)}
);
}
// ---------- SERVICE-field comparison ----------
function ServiceCard({seed, records}) {
const isAllOnes = seed.every(b => b === 1);
const pn16 = records.slice(0, 16).map(r=>r.sBit);
// Pad to 16 if input shorter
while (pn16.length < 16) pn16.push(null);
const matches = pn16.every((b,i) => b === SERVICE_REF[i]);
return (
✱ Spec NOTE 1 · SERVICE field reference
{isAllOnes && matches && (
✓ matches
)}
With seed = 0x7FF (all-1s),
the first 16 PN bits are documented in the spec. Receivers use this to recover the unknown TX seed
from the SERVICE field (which is transmitted as 16 zeros).
{/* Two-row comparison */}
spec ref
{SERVICE_REF.map((b,i)=>(
))}
your seed
{pn16.map((b,i)=>(
))}
{!isAllOnes && (
ⓘ change seed to all-1s to see the canonical match.
)}
);
}
function BitBox({b, color, dim, mismatch}) {
return (