// Multi-Level Feedback Queue — Manimo lesson scene.
// Three priority queues. New jobs land at the top. A job that uses its
// full slice drops a queue; a job that yields stays high. A periodic
// boost lifts everyone back to the top so nothing starves.
//
// Genuine animation lives in `DemotionBeat`: two jobs (A and B) sit on
// the queue stack and their y-position is driven directly by sprite
// localTime — A descends Q2→Q1→Q0 in three discrete demotions while a
// slice-meter pulses to full and resets, B yields early after one short
// burst and stays in Q2. Then `BoostBeat` animates a synchronized lift
// of both demoted jobs back to Q2 on a "boost tick".
const SCENE_DURATION = 44;
const NARRATION = [
/* 0.00– 6.91 */ "Schedulers usually don't know how long a job will run. MLFQ figures it out by watching what the job does.",
/* 6.91–15.91 */ 'Three queues stacked by priority. A new job always starts at the very top. The CPU only runs jobs from the highest non-empty queue.',
/* 15.91–26.25 */ 'If a job uses its whole time slice, it must be CPU bound. MLFQ demotes it to the next queue down. A short job that gives up the CPU stays high.',
/* 26.25–34.73 */ "Without help, a CPU heavy job could starve forever at the bottom. So every so often, MLFQ lifts every job back to the top queue.",
/* 34.73–44.00 */ 'Short interactive jobs stay fast. Long jobs get their fair share. And the scheduler never had to ask how long anything would run.',
];
const NARRATION_AUDIO = 'audio/mlfq-scheduling/scene.mp3';
function Scene() {
return (
);
}
// Geometry shared across the three queue beats so the stack is in the
// same place every time. Three horizontal tracks Q2 (top) > Q1 > Q0.
function queueGeometry(portrait) {
return portrait
? { vbW: 600, vbH: 480, trackX: 90, trackW: 460, trackH: 56, rowGap: 22,
topY: 110, labelGap: 60, eyebrowY: 60, captionY: 410,
tileW: 64, tileH: 38, labelFs: 13, eyebrowFs: 11 }
: { vbW: 1080, vbH: 400, trackX: 160, trackW: 760, trackH: 60, rowGap: 26,
topY: 90, labelGap: 90, eyebrowY: 40, captionY: 340,
tileW: 78, tileH: 44, labelFs: 14, eyebrowFs: 12 };
}
function QueueStack({ G, jobsOnTrack, highlightCpuTrack, showSliceMeter, sliceFrac, boostTick }) {
// jobsOnTrack: { trackIdx: 0|1|2, x: 0..1 along the track, color, label, opacity }
// Renders three queue tracks plus any jobs sitting on them.
const trackY = [G.topY, G.topY + G.trackH + G.rowGap, G.topY + 2 * (G.trackH + G.rowGap)];
const trackLabels = ['Q2', 'Q1', 'Q0'];
return (
{trackLabels.map((label, i) => (
{label}
{['HIGH', 'MID', 'LOW'][i]}
))}
{/* Optional CPU-side slice meter, tied to whichever track is running. */}
{showSliceMeter && highlightCpuTrack != null && (() => {
const y = trackY[highlightCpuTrack] + G.trackH / 2;
// Portrait viewBox is too narrow to fit the meter outside the
// right edge of the lane, so park it just inside the right end
// of the active lane instead.
const portraitMeter = G.vbW < 700;
const meterW = portraitMeter ? 70 : 80;
const mx = portraitMeter
? G.trackX + G.trackW - meterW - 6
: G.trackX + G.trackW + 60;
return (
SLICE
);
})()}
{/* Boost tick — small flash that fades quickly */}
{boostTick != null && boostTick > 0 && (
BOOST
)}
{/* Jobs */}
{jobsOnTrack.map((j, i) => {
const ty = trackY[j.trackIdx] + G.trackH / 2;
const tx = G.trackX + 24 + (G.trackW - 48) * j.x;
return (
{j.label}
);
})}
);
}
// ─── Beat 2: introduce the stack ──────────────────────────────────────────
function QueuesBeat() {
const portrait = usePortrait();
const G = queueGeometry(portrait);
const { localTime } = useSprite();
// A new job tile drifts in from the left and lands centred in Q2.
const entryT = clamp((localTime - 1.6) / 1.4, 0, 1);
const entryX = -0.2 + entryT * 0.7; // ends at x=0.5
return (
);
}
// ─── Beat 3: demotion — the centrepiece ───────────────────────────────────
// A long CPU-bound job A descends Q2→Q1→Q0 in three demotions over the
// beat. Each demotion happens after A's slice fills. Job B yields after
// one short burst and stays in Q2. The CPU highlight ribbon shows which
// queue is being served.
function DemotionBeat() {
const portrait = usePortrait();
const G = queueGeometry(portrait);
const { localTime } = useSprite();
// Beat schedule (sprite-local seconds):
// 0.0 eyebrow + queues fade in
// 1.0 A and B sit in Q2 already (they entered last beat conceptually)
// 1.5 A's slice starts ticking; B fades active for a short burst
// 3.0 B yields (gives up CPU), stays in Q2
// 3.5 A first slice fills → demote Q2→Q1 (small slide down)
// 3.7..5.7 A's slice ticks again in Q1
// 5.9 A second slice fills → demote Q1→Q0
// 6.1..8.6 A's slice ticks again in Q0 (now a long slice)
// 8.9 rule label fades in
const aLane = (() => {
if (localTime < 3.5) return 0; // Q2
if (localTime < 5.9) return 1; // Q1 (during 3.5..5.9)
return 2; // Q0
})();
// Smooth visual transition between lanes
const laneTransitionSec = 0.45;
const aLaneSmooth = (() => {
const transitions = [
{ at: 3.5, from: 0, to: 1 },
{ at: 5.9, from: 1, to: 2 },
];
for (const tr of transitions) {
const t = clamp((localTime - tr.at) / laneTransitionSec, 0, 1);
if (localTime >= tr.at && localTime < tr.at + laneTransitionSec) {
return tr.from + (tr.to - tr.from) * Easing.easeOutCubic(t);
}
}
return aLane;
})();
// Slice meter: fills to 1.0 over slice length, then resets at demotion.
const sliceFrac = (() => {
if (localTime < 1.5) return 0;
if (localTime < 3.5) return clamp((localTime - 1.5) / 2.0, 0, 1); // first slice fills
if (localTime < 5.9) return clamp((localTime - 3.7) / 2.2, 0, 1); // second slice fills
if (localTime < 8.9) return clamp((localTime - 6.1) / 2.8, 0, 1); // third slice fills
return 1;
})();
// Which lane the CPU is serving — always the highest non-empty queue
// that contains A. B yields early so MLFQ runs A from then on.
const cpuTrack = localTime < 1.5 ? null : Math.round(aLaneSmooth);
// Job A position: descends linearly through the lanes.
// Job B position: stays in Q2 (lane 0), fades to softer opacity after
// it yields at t=3.0 to convey "still parked here, idle."
const bOpacity = localTime < 3.0
? 1
: 0.35 + 0.45 * (0.5 + 0.5 * Math.sin(localTime * 0.5));
// Pulse a "demote!" tag at each transition for ~0.7s
const demoteFlash = (() => {
const t1 = clamp((localTime - 3.5) / 0.7, 0, 1);
const t2 = clamp((localTime - 5.9) / 0.7, 0, 1);
const flash = (t) => t > 0 && t < 1 ? (1 - t) : 0;
return Math.max(flash(t1), flash(t2));
})();
// Where the demote tag points to (lane-relative y).
const trackY = [G.topY, G.topY + G.trackH + G.rowGap, G.topY + 2 * (G.trackH + G.rowGap)];
const flashY = localTime < 5.9
? (trackY[0] + trackY[1]) / 2 + G.trackH / 2
: (trackY[1] + trackY[2]) / 2 + G.trackH / 2;
const jobs = [
{
trackIdx: 0, x: 0.32, color: 'var(--teal-400)', label: 'B',
opacity: bOpacity,
},
{
trackIdx: aLaneSmooth, x: 0.58, color: 'var(--amber-400)', label: 'A',
},
];
// Re-implement the y interpolation here for A so we can render it at a
// float lane index — easier than threading the float through QueueStack.
// We'll pass A through a custom renderer below instead of QueueStack.
return (
);
}
// ─── Beat 4: priority boost ───────────────────────────────────────────────
function BoostBeat() {
const portrait = usePortrait();
const G = queueGeometry(portrait);
const { localTime } = useSprite();
// At t<3.5, two demoted jobs sit at Q0 (A) and Q1 (C, a new long job
// that arrived after the previous beat). At t=3.5 the boost tick fires:
// both rise in a single eased motion to Q2 over 1.0s. After that they
// stay at Q2.
const BOOST_AT = 3.5;
const BOOST_DUR = 1.0;
const boostFrac = clamp((localTime - BOOST_AT) / BOOST_DUR, 0, 1);
const eased = Easing.easeOutCubic(boostFrac);
const aLaneStart = 2; // Q0
const cLaneStart = 1; // Q1
const aLane = aLaneStart + (0 - aLaneStart) * eased;
const cLane = cLaneStart + (0 - cLaneStart) * eased;
const boostFlash = (() => {
const t = clamp((localTime - (BOOST_AT - 0.1)) / 1.3, 0, 1);
return t > 0 && t < 1 ? (1 - t) : 0;
})();
return (
no length predictions needed
behaviour over time tells the scheduler what kind of job it is
YIELDS → STAYS HIGHBURNS SLICES → DROPS DOWNBOOST → BACK TO TOP