// Aktivitetsvalg: ta den som slutter først — Manimo lesson scene.
// Chapter 7 of algdat (Grådige algoritmer). Activity selection is the
// canonical greedy story: sju aktiviteter på samme tidslinje, hver med
// et starttidspunkt og et sluttidspunkt, mange overlapper. Den grådige
// regelen — sorter etter slutttid, plukk det første som ikke overlapper
// med forrige valg — er optimal. Bars draw in unsortert, glir vertikalt
// til finish-sorted rekkefølge, deretter en grense-strek som vandrer
// høyrover mens valg-teller tikker. Lander på sortering + ett gjennomløp.
//
// Beats (placeholder timings — rewire-scene.js overwrites them after audio):
// 0– 9 Manimo hook (intro caption + journey)
// 9–20 Tidslinje + sju søyler tegnes inn usortert
// 20–32 Søylene glir på plass etter slutttid (GENUINE MOTION)
// 32–50 Grense-strek vandrer; bars tar/hopper-over (GENUINE MOTION)
// 50–60 Takeaway (regel + n log n + n)
//
// Colour discipline:
// chalk-100 values, picked text, axis numerals
// chalk-200 caption body, idle bar borders
// chalk-300 dimmed bars (skipped), axis ticks, eyebrow
// amber-400 picked bar border, advancing cutoff line, primary stroke
// amber-300 picked bar fill tint, counter, payoff
// rose-400 short flash on a skipped bar (overlap conflict)
// teal-400 considering pulse ring (the moment the algorithm peeks)
//
// Milestones inside the motion beats are fractions of the sprite's actual
// duration so audio rewires keep the choreography aligned.
const SCENE_DURATION = 64;
const NARRATION = [
/* 0– 9 */ 'Du har sju aktiviteter som vil bruke det samme rommet. Hvor mange rekker du å gjennomføre uten at noen overlapper?',
/* 9–20 */ 'Hver aktivitet har et starttidspunkt og et sluttidspunkt. Tegnet som søyler på tidslinjen ser vi at noen er korte, noen lange, og at flere overlapper hverandre.',
/* 20–32 */ 'Det grådige trikset er å sortere etter slutttid, ikke etter start og ikke etter lengde. Da kan vi alltid plukke den som rydder rommet først.',
/* 32–50 */ 'Vi tar den som slutter først — aktivitet to slutter i tre. Da må neste starte i tre eller senere. Aktivitet seks overlapper, hopp over. Fem starter i fire, ta den, slutter i sju. Sju starter i åtte, ta den, slutter i ti. Til slutt tre fra elleve. Fire aktiviteter får plass.',
/* 50–60 */ 'Sorter etter slutttid, og plukk det første som ikke overlapper. Sorteringen tar orden n log n, plukket er bare ett gjennomløp. Grådig — og likevel optimalt.',
];
const NARRATION_AUDIO = 'audio/aktivitetsvalg-graadig/scene.mp3';
// ─── Data ──────────────────────────────────────────────────────────────────
// Seven activities, presented unsorted on screen. id is the on-screen label.
// Sorted-by-finish order yields a greedy pick of {2, 5, 7, 3} → 4 activities.
const ACTS = [
{ id: 1, s: 5, f: 9 }, // skipped — 5 < 7
{ id: 2, s: 1, f: 3 }, // taken — first cutoff = 3
{ id: 3, s: 11, f: 13 }, // taken — 11 ≥ 10
{ id: 4, s: 1, f: 8 }, // skipped — 1 < 7
{ id: 5, s: 4, f: 7 }, // taken — 4 ≥ 3, cutoff = 7
{ id: 6, s: 2, f: 5 }, // skipped — 2 < 3
{ id: 7, s: 8, f: 10 }, // taken — 8 ≥ 7, cutoff = 10
];
const T_MIN = 0;
const T_MAX = 14;
// Indices into ACTS in finish-sorted order.
const SORTED_IDX = ACTS
.map((a, i) => ({ i, f: a.f }))
.sort((p, q) => p.f - q.f)
.map(p => p.i);
// Map ACTS index → row position when sorted by finish.
const SORTED_ROW = (() => {
const out = new Array(ACTS.length);
SORTED_IDX.forEach((acti, row) => { out[acti] = row; });
return out;
})();
// Greedy walk over the finish-sorted list. Pre-compute the schedule so the
// beat can deterministically rasterise per-bar state at any localTime.
const GREEDY_SCHEDULE = (() => {
let cutoff = 0;
const steps = [];
for (let row = 0; row < SORTED_IDX.length; row++) {
const acti = SORTED_IDX[row];
const a = ACTS[acti];
const taken = a.s >= cutoff;
const newCutoff = taken ? a.f : cutoff;
steps.push({ row, acti, id: a.id, s: a.s, f: a.f, taken, oldCutoff: cutoff, newCutoff });
cutoff = newCutoff;
}
return steps;
})();
// ─── Layout ────────────────────────────────────────────────────────────────
function layoutGeom(portrait) {
if (portrait) {
return {
svgW: 720, svgH: 1280,
// Timeline strip
tlLeft: 70, tlRight: 660, tlBaseY: 320,
tickH: 8, axisFont: 12,
// Bars
barH: 38, barGap: 10, firstBarY: 360,
idFont: 17, stampFont: 12,
labelGutterW: 56, // left of bars: "to", "fem" etc.
stampGutterW: 100, // right of bars: "s=1 f=3"
// Cutoff line + counter (portrait: counter below the bars, centred-right)
cutoffStrokeW: 2.4,
counterX: 280, counterY: 760,
// Takeaway
payoffMax: '24ch',
};
}
return {
svgW: 1280, svgH: 720,
tlLeft: 200, tlRight: 1180, tlBaseY: 158,
tickH: 8, axisFont: 13,
barH: 38, barGap: 10, firstBarY: 192,
idFont: 18, stampFont: 13,
labelGutterW: 60,
stampGutterW: 110,
cutoffStrokeW: 2.8,
counterX: 1000, counterY: 590,
payoffMax: '34ch',
};
}
function timeX(G, t) {
return G.tlLeft + (t - T_MIN) * (G.tlRight - G.tlLeft) / (T_MAX - T_MIN);
}
function rowY(G, row) {
return G.firstBarY + row * (G.barH + G.barGap);
}
function easeInOutCubic(t) {
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
}
// Spelled-out Norwegian numerals for activity ids (read alongside narration).
const ID_WORD = {
1: 'én', 2: 'to', 3: 'tre', 4: 'fire', 5: 'fem', 6: 'seks', 7: 'sju',
};
// ─── Pieces ────────────────────────────────────────────────────────────────
// state: 'idle' | 'considering' | 'taken' | 'skipped'
function ActivityBar({ G, acti, x1, x2, y, state, considerPulse = 0, flash = 0, opacity = 1 }) {
const w = Math.max(2, x2 - x1);
const border =
state === 'taken' ? 'var(--amber-400)' :
state === 'considering' ? 'var(--amber-400)' :
state === 'skipped' ? 'rgba(232,220,193,0.28)' :
'rgba(232,220,193,0.45)';
const fill =
state === 'taken' ? 'rgba(244,184,96,0.20)' :
state === 'considering' ? 'rgba(244,184,96,0.10)' :
state === 'skipped' ? 'rgba(232,220,193,0.05)' :
'rgba(232,220,193,0.08)';
const a = ACTS[acti];
const rWord = ID_WORD[a.id];
return (
{considerPulse > 0 && (
)}
{flash > 0 && (
)}
{/* Activity id inside left edge of bar */}
{rWord}
{/* start / finish stamp on the right, outside the bar */}
s={a.s} f={a.f}
);
}
function Timeline({ G, ticks = [0, 2, 4, 6, 8, 10, 12], showLabel = true }) {
return (
{ticks.map(t => (
{t}
))}
{showLabel && (
tid
)}
);
}
function Counter({ G, value, accent = 'var(--amber-300)' }) {
return (
VALGT
{value}
/ 7
);
}
// ─── Scene ─────────────────────────────────────────────────────────────────
function Scene() {
return (
);
}
// ─── Beat 2: Setup — timeline + unsortert søyle-rad ────────────────────────
function SetupBeat() {
const portrait = usePortrait();
const G = layoutGeom(portrait);
const { localTime, duration } = useSprite();
const T = Math.max(duration - 1, 1);
const at = (f) => f * T;
// Timeline first; then bars cascade in over ~60% of T.
const tlReady = localTime >= at(0.10);
const barStart = at(0.25);
const barEnd = at(0.92);
// Stagger: bar i appears at barStart + i * (span/8).
const stride = (barEnd - barStart) / ACTS.length;
const barProgress = (i) => clamp((localTime - (barStart + i * stride)) / 0.55, 0, 1);
return (
);
}
// ─── Beat 3: Sort by finish (GENUINE MOTION — vertical slide) ──────────────
function SortByFinishBeat() {
const portrait = usePortrait();
const G = layoutGeom(portrait);
const { localTime, duration } = useSprite();
const T = Math.max(duration - 1, 1);
const at = (f) => f * T;
// Hold-sort-hold rhythm: 0–0.18 hold, 0.18–0.70 lerp, 0.70+ settled badge.
const sortStart = at(0.18);
const sortEnd = at(0.70);
const sortP = clamp((localTime - sortStart) / (sortEnd - sortStart), 0, 1);
const eased = easeInOutCubic(sortP);
const badgeShow = localTime >= at(0.78);
return (
<>
{badgeShow && (
sortert etter slutt
)}
);
}
// ─── Beat 4: Greedy pick (GENUINE MOTION — cutoff sweep + per-bar) ─────────
function GreedyPickBeat() {
const portrait = usePortrait();
const G = layoutGeom(portrait);
const { localTime, duration } = useSprite();
const T = Math.max(duration - 1, 1);
// Step schedule as fractions of T. Each step has a "consider" moment
// (pulse + decision) and a "settle" moment (cutoff advances if taken).
const STEP_FRACS = [0.06, 0.18, 0.30, 0.42, 0.54, 0.66, 0.80];
const PULSE_LEN = 0.7; // seconds the considering ring lingers
const SETTLE_LAG = 0.55; // seconds after consider before settle/cutoff move
const FLASH_LEN = 0.5; // rose flash on a skipped bar
// Step index that is currently being considered (most recent past).
const considerTime = (k) => STEP_FRACS[k] * T;
const settleTime = (k) => considerTime(k) + SETTLE_LAG;
// Cutoff value at localTime: latest step k with localTime ≥ settleTime(k)
// contributes its newCutoff if taken.
let activeCutoff = 0;
let cutoffTarget = 0;
for (let k = 0; k < GREEDY_SCHEDULE.length; k++) {
if (localTime >= settleTime(k)) {
const st = GREEDY_SCHEDULE[k];
activeCutoff = st.newCutoff;
cutoffTarget = st.newCutoff;
}
}
// Smooth cutoff between old and new during the settle window.
let displayedCutoff = activeCutoff;
for (let k = 0; k < GREEDY_SCHEDULE.length; k++) {
const st = GREEDY_SCHEDULE[k];
if (!st.taken) continue;
const moveStart = settleTime(k);
const moveEnd = moveStart + 0.55;
if (localTime >= moveStart && localTime < moveEnd) {
const p = clamp((localTime - moveStart) / (moveEnd - moveStart), 0, 1);
displayedCutoff = st.oldCutoff + (st.newCutoff - st.oldCutoff) * easeInOutCubic(p);
}
}
// Per-row state lookup.
function stateForRow(row) {
const st = GREEDY_SCHEDULE[row];
if (localTime < considerTime(row)) return { state: 'idle', pulse: 0, flash: 0 };
if (localTime < settleTime(row)) {
const t = (localTime - considerTime(row)) / PULSE_LEN;
return { state: 'considering', pulse: clamp(1 - t, 0, 1), flash: 0 };
}
// Settled
if (st.taken) return { state: 'taken', pulse: 0, flash: 0 };
const ft = (localTime - settleTime(row)) / FLASH_LEN;
const flash = clamp(1 - ft, 0, 1);
return { state: 'skipped', pulse: 0, flash };
}
// Counter: number of takens settled.
let counter = 0;
for (let k = 0; k < GREEDY_SCHEDULE.length; k++) {
const st = GREEDY_SCHEDULE[k];
if (st.taken && localTime >= settleTime(k)) counter++;
}
const cutoffX = timeX(G, displayedCutoff);
return (
);
}
// ─── Beat 5: Takeaway ──────────────────────────────────────────────────────
function Takeaway() {
const portrait = usePortrait();
const G = layoutGeom(portrait);
return (
grådig på sluttid
Sorter etter slutt — plukk det første som ikke overlapper.
n log n + n
4 av 7 — og det er optimalt
);
}
// Expose narration to external tooling (TTS generation, subtitle export)
window.sceneNarration = NARRATION;
// ─── Mount ─────────────────────────────────────────────────────────────────
function App() {
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render();