// Shortest Job First — Manimo lesson scene.
// Same three jobs, two orderings: how the convoy effect bloats average
// turnaround under FIFO, and why running short jobs up front fixes it.
//
// Beats (timed to single-track narration in motion/operativsystemer/audio/sjf-scheduling/):
// 0.00– 8.13 Manimo intro: three jobs, one queue
// 8.13–16.60 The jobs: A=10, B=2, C=2 all arrive at t=0
// 16.60–24.57 FIFO Gantt: bars fill in arrival order, avg = 12
// 24.57–34.83 SJF Gantt: same jobs reordered, avg ≈ 6.67
// 34.83–46.00 Takeaway: 12 vs 6.67 side by side
//
// Genuine animation: in fifoGantt + sjfGantt, the Gantt bars sweep in
// across a real timeline driven by sprite localTime, and a running
// completion-time tally counts up live as each job finishes. Not just
// fade-ins.
const SCENE_DURATION = 44;
const NARRATION = [
/* 0.00– 8.13 */ 'Three jobs land at the scheduler at the same time. Same work — but the order you pick changes how long everyone waits.',
/* 8.13–16.60 */ 'Job A needs ten units of CPU time, job B needs two, job C needs two. All three are ready at time zero.',
/* 16.60–24.57 */ 'First-in first-out runs them in arrival order. A finishes at ten, B at twelve, C at fourteen. Average turnaround: twelve.',
/* 24.57–34.83 */ 'Shortest job first runs the small ones up front. B finishes at two, C at four, A at fourteen. Average turnaround drops to six and two thirds.',
/* 34.83–46.00 */ 'Same jobs, same total work — but the convoy of one big job behind two small ones is what hurts. Run short first, and everyone waits less.',
];
const NARRATION_AUDIO = 'audio/sjf-scheduling/scene.mp3';
// Job lengths (CPU time units). The two orderings:
const JOBS = {
A: { len: 10, color: 'var(--amber-400)', accent: 'var(--amber-300)' },
B: { len: 2, color: 'var(--rose-400)', accent: 'var(--rose-300)' },
C: { len: 2, color: 'var(--teal-400)', accent: 'var(--teal-400)' },
};
const FIFO_ORDER = ['A', 'B', 'C'];
const SJF_ORDER = ['B', 'C', 'A'];
function Scene() {
return (
);
}
// ─── Beat 2: Three jobs in the ready queue ───────────────────────────────
function JobsArrive() {
const portrait = usePortrait();
const G = portrait
? { vbW: 600, vbH: 380, tileW: 140, tileH: 110, gap: 22, rowY: 130, captionY: 290, eyebrowY: 50 }
: { vbW: 980, vbH: 320, tileW: 200, tileH: 130, gap: 36, rowY: 100, captionY: 260, eyebrowY: 40 };
const order = ['A', 'B', 'C'];
const totalW = order.length * G.tileW + (order.length - 1) * G.gap;
const startX = (G.vbW - totalW) / 2;
return (
);
}
// ─── Beats 3 & 4: Gantt chart that builds in time ────────────────────────
// One reusable component renders the bars for whatever job order it's
// passed. The bars sweep in along the timeline at the rate they would in
// reality (compressed so the whole 14-unit schedule plays in ~6 seconds),
// and the completion-time labels appear at the right edge of each bar as
// it finishes. The average-turnaround formula fades in at the end.
function GanttBeat({ eyebrow, eyebrowColor, order, completions, avg }) {
const portrait = usePortrait();
const { localTime } = useSprite();
const G = portrait
? { vbW: 600, vbH: 440, axisX: 60, axisY: 220, stripH: 64, stripW: 500,
eyebrowY: 60, completionY: 200, avgY: 360,
avgFontSize: 22, tickFontSize: 11, labelFontSize: 18 }
: { vbW: 1080, vbH: 380, axisX: 90, axisY: 180, stripH: 72, stripW: 900,
eyebrowY: 50, completionY: 158, avgY: 320,
avgFontSize: 26, tickFontSize: 11, labelFontSize: 22 };
const TIME_MAX = 14; // schedule fits inside 14 CPU units
const SWEEP_START = 0.5;
const SWEEP_DUR = 6.0; // seconds of wall time to play through all 14 units
const swept = clamp((localTime - SWEEP_START) / SWEEP_DUR, 0, 1);
const playedUnits = swept * TIME_MAX;
const pxPerUnit = G.stripW / TIME_MAX;
// Compute each job's [startUnit, endUnit] from the order.
const segs = [];
let cursor = 0;
order.forEach((letter, i) => {
const len = JOBS[letter].len;
segs.push({
letter, color: JOBS[letter].color, accent: JOBS[letter].accent,
startU: cursor, endU: cursor + len, idx: i,
});
cursor += len;
});
return (
);
}
// ─── Beat 5: Takeaway with big-number contrast ───────────────────────────
function Takeaway() {
const portrait = usePortrait();
return (
FIFO
12
vs
SJF
6.67
Shortest job first nearly halves the average wait.
(it needs to know job lengths up front — and that's the catch)