// Address Translation — Manimo lesson scene.
// How the OS turns a virtual address into a physical one: split into
// VPN + offset, look up the page table, glue the frame number back onto
// the offset.
//
// Beats (timed to single-track narration in motion/operativsystemer/audio/address-translation/):
// 0.00– 7.00 Manimo intro: where is byte 0x40c2 really?
// 7.00–19.01 A virtual address splits into VPN | offset
// 19.01–29.19 Page-table lookup: a dot traces VPN row → PFN → frame
// 29.19–39.18 PFN ‖ offset = physical address (genuine: bits slide and snap together)
// 39.18–51.00 Takeaway: each process has its own table
//
// Authoring notes:
// • Beat 3 carries the genuine animation: a glowing dot follows the
// translation pathway from the virtual-address row, through the page-
// table row, to the physical-frame slot. Driven by sprite localTime.
// • Beat 4 reinforces with a snap-together motion (PFN bits slide left
// to meet offset bits sliding right).
const SCENE_DURATION = 51;
const NARRATION = [
/* 0.00– 7.00 */ 'Your program asks for byte zero one zero zero. But where is byte zero one zero zero, really?',
/* 7.00–19.01 */ 'Every virtual address is split into two parts. The top bits name a page — the virtual page number, or VPN. The bottom bits name a byte inside that page — the offset.',
/* 19.01–29.19 */ "The VPN is an index into the process's page table. Walk to that row, read the physical frame number, and you know where in real memory the page actually lives.",
/* 29.19–39.18 */ 'The physical address is just the frame number with the original offset glued on. The CPU does this on every memory access — and the page table makes it cheap.',
/* 39.18–51.00 */ 'Each process has its own page table, so two programs can use the very same virtual address and never collide. Memory becomes private by translation, not by trust.',
];
const NARRATION_AUDIO = 'audio/address-translation/scene.mp3';
// 16-bit virtual address: 0100 0000 1100 0010 → VPN=4 (0100), offset=0xC2.
// Page table maps VPN → PFN. Worked example: VPN 4 → PFN 6.
const VPN_BITS = '0100';
const OFFSET_BITS = '0000 1100 0010';
const PFN_BITS = '110';
const TARGET_VPN = 4;
const TARGET_PFN = 6;
// Page table rows shown in the lookup beat.
const PAGE_TABLE = [
{ vpn: 0, pfn: 1 },
{ vpn: 1, pfn: 7 },
{ vpn: 2, pfn: 0 },
{ vpn: 3, pfn: 3 },
{ vpn: 4, pfn: TARGET_PFN }, // <- the row we hit
{ vpn: 5, pfn: 2 },
{ vpn: 6, pfn: 5 },
{ vpn: 7, pfn: 4 },
];
function Scene() {
return (
);
}
// ─── Beat 2: split address ────────────────────────────────────────────────
// The 16-bit address appears in mono; brackets fade in beneath the bit
// groups labelling VPN and offset.
function SplitAddressBeat() {
const portrait = usePortrait();
const G = portrait
? { vbW: 600, vbH: 400, addrY: 160, vpnLabelY: 240, offLabelY: 240,
captionY: 340, eyebrowY: 80, fontAddr: 28 }
: { vbW: 1080, vbH: 320, addrY: 140, vpnLabelY: 220, offLabelY: 220,
captionY: 280, eyebrowY: 60, fontAddr: 40 };
// Layout the 16 bits in groups of 4: "0100 0000 1100 0010"
// We measure the position of the first 4 bits (VPN) vs the last 12 (offset).
// Use a centred mono string and compute approximate bracket positions.
const charW = portrait ? 18 : 26;
const groupGap = portrait ? 12 : 18;
// 4 groups of 4 chars, with 3 gaps between groups.
const totalW = 16 * charW + 3 * groupGap;
const startX = (G.vbW - totalW) / 2;
// VPN spans first 4 chars (0..3) → positions startX .. startX+4*charW
const vpnX1 = startX;
const vpnX2 = startX + 4 * charW;
// Offset spans chars 4..15, with 3 group gaps between them.
const offX1 = startX + 4 * charW + groupGap;
const offX2 = startX + 16 * charW + 3 * groupGap;
return (
16-bit virtual address
);
}
// ─── Beat 3: page-table lookup ────────────────────────────────────────────
// Genuine motion. A glowing dot enters at VPN 4 on the page-table column,
// pauses (the lookup), then arrows across to physical-frame row 6.
function PageTableLookupBeat() {
const portrait = usePortrait();
const { localTime } = useSprite();
const G = portrait
? { vbW: 600, vbH: 560, ptX: 60, ptY: 60, ptW: 200, rowH: 36,
memX: 340, memY: 60, memW: 200,
captionY: 510, eyebrowY: 30 }
: { vbW: 1080, vbH: 460, ptX: 220, ptY: 60, ptW: 240, rowH: 36,
memX: 620, memY: 60, memW: 240,
captionY: 410, eyebrowY: 40 };
// Animation timeline (sprite local):
// 0.0 — 1.2 fade in page table + memory
// 1.6 dot appears at top of page table
// 1.6 — 3.0 dot descends to VPN-4 row
// 3.0 — 4.4 dot pauses on row, row glows
// 4.4 — 6.0 dot crosses to physical-memory row 6
// 6.0 — end dot stays inside memory slot 6
const startDot = 1.6;
const arriveRow = 3.0;
const leaveRow = 4.4;
const arriveFrame = 6.0;
const ptRowY = G.ptY + (TARGET_VPN + 0.5) * G.rowH;
const memRowY = G.memY + (TARGET_PFN + 0.5) * G.rowH;
const ptRowX = G.ptX + G.ptW; // right edge of PT row, where dot rests
const memRowX = G.memX; // left edge of mem row, where dot lands
let dotX, dotY, dotVisible, rowGlow;
if (localTime < startDot) {
dotVisible = false;
rowGlow = 0;
dotX = ptRowX;
dotY = G.ptY;
} else if (localTime < arriveRow) {
// Descending the right edge of the page table to row 4.
const t = clamp((localTime - startDot) / (arriveRow - startDot), 0, 1);
const eased = 1 - Math.pow(1 - t, 3);
dotVisible = true;
rowGlow = 0;
dotX = ptRowX;
dotY = G.ptY + eased * (ptRowY - G.ptY);
} else if (localTime < leaveRow) {
// Paused on the row, glow ramps up.
const t = clamp((localTime - arriveRow) / (leaveRow - arriveRow), 0, 1);
dotVisible = true;
rowGlow = t;
dotX = ptRowX;
dotY = ptRowY;
} else if (localTime < arriveFrame) {
// Cross to the physical-memory row.
const t = clamp((localTime - leaveRow) / (arriveFrame - leaveRow), 0, 1);
const eased = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
dotVisible = true;
rowGlow = 1;
dotX = ptRowX + eased * (memRowX - ptRowX);
dotY = ptRowY + eased * (memRowY - ptRowY);
} else {
dotVisible = true;
rowGlow = 1;
dotX = memRowX + 18;
dotY = memRowY;
}
return (
page-table lookup
);
}
// ─── Beat 4: PFN ‖ offset = physical address ──────────────────────────────
// Reinforcement: PFN bits and offset bits slide in from opposite sides
// and snap together. Driven by sprite localTime.
function ConcatBeat() {
const portrait = usePortrait();
const { localTime } = useSprite();
const G = portrait
? { vbW: 600, vbH: 380, addrY: 200, fontBits: 28, eyebrowY: 40,
captionY: 320 }
: { vbW: 1080, vbH: 320, addrY: 170, fontBits: 38, eyebrowY: 40,
captionY: 270 };
// Slide-in start delay: 1.6s. Slide takes 1.4s.
const slideStart = 1.6;
const slideDur = 1.4;
const t = clamp((localTime - slideStart) / slideDur, 0, 1);
const eased = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
// Final centred position. PFN sits left of OFFSET, separated by a small gap.
const charW = portrait ? 18 : 26;
const pfnW = PFN_BITS.length * charW;
const offW = OFFSET_BITS.length * charW * 0.85; // some chars are spaces
const gap = portrait ? 14 : 22;
const totalW = pfnW + gap + offW;
const finalLeftX = (G.vbW - totalW) / 2;
const pfnFinalX = finalLeftX;
const offFinalX = finalLeftX + pfnW + gap;
// Off-screen origins.
const pfnFromX = -pfnW - 40; // off the left edge
const offFromX = G.vbW + 40; // off the right edge
const pfnX = pfnFromX + eased * (pfnFinalX - pfnFromX);
const offX = offFromX + eased * (offFinalX - offFromX);
return (