// TLB Hits and Misses — Manimo lesson scene.
// The TLB is a tiny on-chip cache of virtual-to-physical mappings; a hit
// completes a translation in one cycle, a miss walks the page table in
// memory and fills the TLB before continuing.
//
// Beats (timed to single-track narration in motion/operativsystemer/audio/tlb-hit-miss/):
// 0.00– 8.36 Manimo intro: how do we make a page-table lookup cheap?
// 8.36–17.92 TLB card: four rows, three pre-populated
// 17.92–27.32 Hit: virtual address glides to TLB, row lights up, PFN exits
// 27.32–39.14 Miss: address arrives, no hit; walk to page table; fill TLB; continue
// 39.14–48.00 Takeaway: hit ≈ 10 ns, miss ≈ 100 ns — locality is what saves us
//
// Genuine animation:
// • Beat 3 (hit): a labeled address tile is interpolated from left edge
// into the TLB; the matching row's stroke pulses; the resulting PFN
// tile then travels right to the physical-address box. Two synced
// value-driven motions.
// • Beat 4 (miss): the address tile arrives at the TLB but does not
// match; a dotted path branches down to a page-table box; the PFN
// travels up and fills an empty TLB row before continuing. The TLB's
// row content actually changes mid-beat (the empty row becomes
// occupied with VPN=19 → PFN=34) — a state mutation, not a fade-in.
const SCENE_DURATION = 53;
const NARRATION = [
/* 0.00– 8.36 */ 'Every memory access has to be translated. Doing that walk on every load would be ruinously slow — so the hardware keeps a tiny cheat sheet.',
/* 8.36–17.92 */ 'The translation lookaside buffer is a small on-chip cache. Each entry maps a virtual page number to a physical frame number, with a valid bit on the side.',
/* 17.92–27.32 */ 'A load asks for virtual page seven. The TLB has it, and answers in one cycle: frame ninety-two. Fast path — about ten nanoseconds.',
/* 27.32–39.14 */ 'A load asks for virtual page nineteen. Not in the TLB. The hardware walks the page table in memory, finds frame thirty-four, fills a TLB slot, and only then completes the access.',
/* 39.14–48.00 */ 'Programs reuse a small set of pages, so most lookups hit the TLB — and a few cheap misses end up paying for themselves many times over.',
];
const NARRATION_AUDIO = 'audio/tlb-hit-miss/scene.mp3';
// Static TLB contents shown in Beat 2 + Beat 3 (hit on VPN=7).
const TLB_INITIAL = [
{ vpn: '02', pfn: '13', valid: 1 },
{ vpn: '07', pfn: '92', valid: 1 },
{ vpn: '11', pfn: '04', valid: 1 },
{ vpn: '--', pfn: '--', valid: 0 },
];
// In Beat 4 the bottom row gets filled with VPN=19 → PFN=34 after the walk.
const TLB_AFTER_FILL = [
{ vpn: '02', pfn: '13', valid: 1 },
{ vpn: '07', pfn: '92', valid: 1 },
{ vpn: '11', pfn: '04', valid: 1 },
{ vpn: '19', pfn: '34', valid: 1 },
];
function Scene() {
return (
);
}
// Shared geometry for the TLB layout — used by beats 2, 3, 4.
function lookupGeom(portrait) {
return portrait
? { vbW: 600, vbH: 500,
tlbX: 180, tlbY: 80,
tlbW: 240, rowH: 50, rows: 4,
addrX: 60, addrY: 175, // virtual-address tile origin
padX: 500, padY: 175, // physical-address tile origin
pageTblX: 180, pageTblY: 360, pageTblW: 240, pageTblH: 80,
timingY: 470 }
: { vbW: 1080, vbH: 500,
tlbX: 380, tlbY: 60,
tlbW: 320, rowH: 50, rows: 4,
addrX: 80, addrY: 150,
padX: 840, padY: 150,
pageTblX: 380, pageTblY: 340, pageTblW: 320, pageTblH: 80,
timingY: 470 };
}
// Reusable TLB drawing. `entries` is an array of 4 row objects; `hitRow`
// (if set) gets a pulsing amber stroke driven by `pulsePhase`.
function TlbTable({ G, entries, hitRow = -1, pulsePhase = 0 }) {
const colVpnX = G.tlbX + 36;
const colPfnX = G.tlbX + G.tlbW * 0.5;
const colValX = G.tlbX + G.tlbW - 36;
return (
{/* Frame */}
{/* Header row */}
VPNPFNVALID
{/* Body rows */}
{entries.map((e, i) => {
const y = G.tlbY + (i + 1) * G.rowH;
const isHit = i === hitRow;
const pulse = isHit ? (0.6 + 0.4 * Math.sin(pulsePhase * 4.0)) : 0;
return (
{isHit && (
)}
{e.vpn}
{e.pfn}
{e.valid ? '1' : '0'}
);
})}
);
}
// Small labelled tile representing a virtual or physical address.
function AddrTile({ x, y, w, h, eyebrow, value, valueColor, frameColor }) {
return (
{eyebrow}
{value}
);
}
// ─── Beat 2: TLB card on its own ────────────────────────────────────────
function TlbCardBeat() {
const portrait = usePortrait();
const G = lookupGeom(portrait);
return (
);
}
// ─── Beat 3: TLB Hit ─────────────────────────────────────────────────────
function HitBeat() {
const portrait = usePortrait();
const G = lookupGeom(portrait);
const { localTime } = useSprite();
// Phases:
// 0.0–1.5 — VA tile flies from addrX into the TLB's left edge
// 1.5–2.2 — matching row (VPN=07) pulses
// 2.2–3.7 — PFN tile flies from TLB's right edge to physical-addr tile
// 3.7+ — final timing readout
const tileW = portrait ? 130 : 150;
const tileH = 56;
const VA_START = 0.6, VA_END = 1.8;
const PFN_START = 2.4, PFN_END = 3.7;
const tlbLeftEdgeX = G.tlbX;
const tlbRightEdgeX = G.tlbX + G.tlbW;
// VA tile X — start at addrX, end at TLB left edge (minus tile width)
const vaProg = clamp((localTime - VA_START) / (VA_END - VA_START), 0, 1);
const vaStartX = G.addrX;
const vaEndX = tlbLeftEdgeX - tileW - 8;
const vaX = vaStartX + (vaEndX - vaStartX) * Easing.easeOutCubic(vaProg);
// PFN tile X — start at TLB right edge, end at padX
const pfnProg = clamp((localTime - PFN_START) / (PFN_END - PFN_START), 0, 1);
const pfnStartX = tlbRightEdgeX + 8;
const pfnEndX = G.padX;
const pfnX = pfnStartX + (pfnEndX - pfnStartX) * Easing.easeOutCubic(pfnProg);
const pfnVisible = localTime >= PFN_START - 0.05;
const hitRow = localTime >= VA_END - 0.05 ? 1 : -1;
return (
);
}
// ─── Beat 4: TLB Miss ────────────────────────────────────────────────────
function MissBeat() {
const portrait = usePortrait();
const G = lookupGeom(portrait);
const { localTime } = useSprite();
const tileW = portrait ? 130 : 150;
const tileH = 56;
// Phases:
// 0.4–1.6 — VA tile flies to TLB
// 1.6–2.6 — VA highlight: red flash (no match)
// 2.6–4.2 — dotted branch down to page-table box; PFN appears
// 4.2–5.6 — PFN travels up, fills empty TLB slot 3
// 5.6–7.0 — PFN tile travels right to physical-addr box
// 7.0+ — timing readout fades in
const VA_START = 0.6, VA_END = 1.8;
const BRANCH_START = 2.6, BRANCH_END = 4.0;
const FILL_START = 4.2, FILL_END = 5.4;
const OUT_START = 5.6, OUT_END = 7.0;
const tlbLeftEdgeX = G.tlbX;
const tlbRightEdgeX = G.tlbX + G.tlbW;
// VA tile X — into TLB left edge
const vaProg = clamp((localTime - VA_START) / (VA_END - VA_START), 0, 1);
const vaStartX = G.addrX;
const vaEndX = tlbLeftEdgeX - tileW - 8;
const vaX = vaStartX + (vaEndX - vaStartX) * Easing.easeOutCubic(vaProg);
const vaArrived = localTime >= VA_END - 0.1;
// Red flash on the VA tile when it's at the TLB and no match
const flashing = vaArrived && localTime < BRANCH_START + 0.3;
// TLB content: after FILL_END, the bottom row mutates to the new entry.
const tlbEntries = localTime >= FILL_END ? TLB_AFTER_FILL : TLB_INITIAL;
// Pulse the freshly-filled row briefly
const justFilled = localTime >= FILL_END && localTime < FILL_END + 1.2;
const hitRow = justFilled ? 3 : -1;
// Branch path (dashed) from below VA tile down to page-table box.
// Computed: from (tlbX + tlbW/2, tlbY + (rows+1)*rowH) down to page table.
const branchTopX = G.tlbX + G.tlbW / 2;
const branchTopY = G.tlbY + (G.rows + 1) * G.rowH;
const branchBotX = G.pageTblX + G.pageTblW / 2;
const branchBotY = G.pageTblY;
const branchD = `M ${branchTopX} ${branchTopY} L ${branchTopX} ${(branchTopY + branchBotY) / 2} L ${branchBotX} ${(branchTopY + branchBotY) / 2} L ${branchBotX} ${branchBotY}`;
const branchProg = clamp((localTime - BRANCH_START) / (BRANCH_END - BRANCH_START), 0, 1);
const branchPathLen = 600;
const branchOn = localTime >= BRANCH_START;
// PFN ball animates from page table up to TLB row 3, then right to padX.
// Slot 3's centre:
const slot3Y = G.tlbY + (3 + 0.5 + 1) * G.rowH; // header + row 3 mid
const ballR = 11;
let ballX = null, ballY = null, ballColor = 'var(--amber-400)', ballOp = 1;
if (localTime >= BRANCH_END - 0.05 && localTime < FILL_START) {
// Sits briefly at page-table top edge (PFN was read).
ballX = G.pageTblX + G.pageTblW / 2;
ballY = G.pageTblY;
} else if (localTime >= FILL_START && localTime < FILL_END) {
const k = clamp((localTime - FILL_START) / (FILL_END - FILL_START), 0, 1);
const e = Easing.easeOutCubic(k);
ballX = (G.pageTblX + G.pageTblW / 2) + ((G.tlbX + G.tlbW / 2) - (G.pageTblX + G.pageTblW / 2)) * e;
ballY = G.pageTblY + (slot3Y - G.pageTblY) * e;
} else if (localTime >= OUT_START && localTime < OUT_END) {
const k = clamp((localTime - OUT_START) / (OUT_END - OUT_START), 0, 1);
const e = Easing.easeOutCubic(k);
ballX = (G.tlbX + G.tlbW) + (G.padX + tileW / 2 - (G.tlbX + G.tlbW)) * e;
ballY = G.padY + tileH / 2;
} else if (localTime >= FILL_END && localTime < OUT_START) {
// Briefly disappear into the slot.
ballX = null;
}
return (