// Funksjonskall: kopien og den lille verdenen — Manimo lesson scene. // Chapter 6 of itgk (Funksjoner, moduler og scope). The classic confusion: // "I changed it inside the function — why is my variable unchanged outside?" // The scene runs a live memory stage next to the code: the value 5 physically // flies from the global `n` box into the parameter `x` box of a freshly drawn // "dobler's little world" frame, doubles to 10 in there while `n` sits calm, // then 10 flies back into `svar` on return — and the frame evaporates, taking // `x` with it. // // Beats (placeholder timings — rewire-scene.js overwrites them after audio): // 0–10 Manimo hook // 10–22 Kode — program reveals + global frame with n and svar // 22–37 Kallet — frame draws, 5 flies n→x, x doubles (GENUINE MOTION) // 37–52 Retur — 10 flies x→svar, frame dies, print shows 5 10 (GENUINE MOTION) // 52–60 Takeaway // // Colour discipline: // chalk-100 code text, values // chalk-300 dimmed text, hints // amber-400 execution highlight, dobler frame, chip // amber-300 payoff / readouts // rose-400 (reserved — n-untouched emphasis uses calm chalk instead) // // Milestones inside the two motion beats are fractions of the sprite's actual // duration, so audio rewires keep the choreography aligned. const SCENE_DURATION = 67; const NARRATION = [ /* 0–10 */ 'Her er en felle nesten alle går i: du sender variabelen din inn i en funksjon, funksjonen endrer den — og etterpå er variabelen helt uendret. Hva skjedde?', /* 10–22 */ 'Funksjonen dobler tar imot et tall, ganger det med to, og returnerer resultatet. Under definisjonen setter vi n til fem, kaller funksjonen med n som argument, og skriver ut både n og svaret.', /* 22–37 */ 'Se på kallet. Funksjonen får sin egen lille verden, og verdien fem kopieres inn i parameteren x. Det er en kopi som reiser — ikke variabelen selv. Inne i verdenen dobles x til ti, mens n der ute ikke merker noen ting.', /* 37–52 */ 'Return sender verdien ti tilbake til den som kalte, og den lander i svar. Så er funksjonen ferdig — hele den lille verdenen forsvinner, med x i den. Utskriften viser fem og ti. n er urørt.', /* 52–60 */ 'Funksjonen får en kopi av verdien, ikke selve variabelen. Vil du ha noe ut av en funksjon, må du returnere det.', ]; const NARRATION_AUDIO = 'audio/funksjonskall-og-scope/scene.mp3'; // ─── The program ─────────────────────────────────────────────────────────── const CODE = [ 'def dobler(x):', // 1 ' x = x * 2', // 2 ' return x', // 3 '', // 4 'n = 5', // 5 'svar = dobler(n)', // 6 'print(n, svar)', // 7 ].join('\n'); // ─── Layout ──────────────────────────────────────────────────────────────── // Memory-stage anchors are absolute canvas coordinates so the flying chip can // lerp between exact slot centres. function layoutGeom(portrait) { if (portrait) { return { codeLeft: 96, codeTop: 200, codeFont: 23, frameX: 70, frameW: 580, frameH: 148, globalY: 620, doblerY: 818, slotN: { x: 106, y: 668 }, slotSvar: { x: 380, y: 668 }, slotX: { x: 106, y: 866 }, outX: 70, outY: 1010, outW: 580, slotW: 116, slotH: 56, }; } return { codeLeft: 96, codeTop: 180, codeFont: 25, frameX: 680, frameW: 510, frameH: 150, globalY: 160, doblerY: 372, slotN: { x: 716, y: 210 }, slotSvar: { x: 960, y: 210 }, slotX: { x: 716, y: 422 }, outX: 680, outY: 578, outW: 510, slotW: 120, slotH: 58, }; } function codePos(G) { return { position: 'absolute', left: G.codeLeft, top: G.codeTop, fontVariantLigatures: 'none' }; } function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; } // ─── Memory-stage pieces (DOM, absolutely positioned) ───────────────────── function MemFrame({ x, y, w, h, title, accent, opacity = 1 }) { return (
{title}
); } // A named slot: serif-italic name above a mono value box, at absolute canvas // coords (top-left of the box). function VarSlot({ x, y, w, h, name, value, flash, opacity = 1 }) { return (
{name}
{value}
); } // The travelling value: lerps between two slot centres on an eased path with // a little arc, visible only mid-flight. function FlyingChip({ from, to, t, value, slotW, slotH }) { if (t <= 0 || t >= 1) return null; const e = easeInOutCubic(t); const cx = from.x + slotW / 2 + (to.x - from.x) * e; const cy = from.y + slotH / 2 + (to.y - from.y) * e - Math.sin(Math.PI * e) * 36; return (
{value}
); } function OutputRow({ x, y, w, text, show }) { if (!show) return null; return (
utskrift {text}
); } // ─── Scene ───────────────────────────────────────────────────────────────── function Scene() { return ( ); } // ─── Beat 2: Kode ────────────────────────────────────────────────────────── function KodeBeat() { const portrait = usePortrait(); const G = layoutGeom(portrait); return ( <> Spørsmålet: hva skriver print ut — og hvorfor? ); } // ─── Beat 3: Kallet (GENUINE MOTION) ─────────────────────────────────────── function KalletBeat() { const { localTime, duration } = useSprite(); const portrait = usePortrait(); const G = layoutGeom(portrait); const T = Math.max(duration - 1, 1); const at = (f) => f * T; const frameIn = at(0.10); const flightStart = at(0.24); const flightEnd = at(0.38); const bodyHi = at(0.55); const calmN = at(0.74); const flightT = (localTime - flightStart) / (flightEnd - flightStart); const xValue = localTime >= bodyHi ? '10' : (flightT >= 1 ? '5' : '–'); const xFlash = (flightT >= 1 && localTime < flightEnd + 1.2) || (localTime >= bodyHi && localTime < bodyHi + 1.2); const line = localTime >= bodyHi ? 2 : 6; return ( <> {/* Global frame, always present */} {/* dobler's little world */} {localTime >= frameIn && ( <> )} {localTime >= flightStart && localTime < bodyHi && (
En kopi av verdien reiser inn i parameteren.
)} {localTime >= calmN && (
x ble 10 — men n der ute merker ingenting.
)} ); } // ─── Beat 4: Retur (GENUINE MOTION) ──────────────────────────────────────── function ReturBeat() { const { localTime, duration } = useSprite(); const portrait = usePortrait(); const G = layoutGeom(portrait); const T = Math.max(duration - 1, 1); const at = (f) => f * T; const flightStart = at(0.10); const flightEnd = at(0.26); const frameFade = at(0.42); const printHi = at(0.60); const outputAt = at(0.70); const flightT = (localTime - flightStart) / (flightEnd - flightStart); const svarValue = flightT >= 1 ? '10' : '–'; const svarFlash = flightT >= 1 && localTime < flightEnd + 1.2; const doblerOpacity = localTime >= frameFade ? 0 : 1; // return x → (chip lands) svar = dobler(n) → print: the highlight follows // the value so it's obvious WHERE the returned 10 lands. const line = localTime >= printHi ? 7 : (flightT >= 1 ? 6 : 3); return ( <> {localTime >= frameFade + 0.5 && localTime < outputAt && (
Den lille verdenen er borte — og x med den.
)} = outputAt}/> ); } // ─── Beat 5: Takeaway ────────────────────────────────────────────────────── function Takeaway() { const portrait = usePortrait(); return (
def · return Funksjonen får en kopi — ikke variabelen. inn: en kopi av verdien · ut: det du returnerer
); } // Expose narration to external tooling (TTS generation, subtitle export) window.sceneNarration = NARRATION; // ─── Mount ───────────────────────────────────────────────────────────────── function App() { return ( ); } ReactDOM.createRoot(document.getElementById('root')).render();