// Klassen som mal, objektet som tegning — Manimo lesson scene. // Chapter 14 of itgk (Objektorientering). The mental model: a class is the // blueprint, an object is one stamped copy with its own slots. The scene runs // a live memory diagram next to the code: a dashed "Hund (mal)" card holds the // labels but no values; when Hund("Rex", 4) is called, two argument chips fly // from the call site into a freshly-drawn rex object frame and land in its // navn/alder slots. The same thing happens for luna right next to rex. Then a // self arrow swings from the bjeff method body — first pointing at rex, // reading its navn — then over to luna, reading hers. // // Beats (placeholder timings — rewire-scene.js overwrites them after audio): // 0–10 Manimo hook // 10–22 Malen — code reveals + blueprint card with empty slots // 22–36 Stempler rex — two chips fly into rex's slots (GENUINE MOTION) // 36–48 Stempler luna — second frame appears, chips land (GENUINE MOTION) // 48–58 self peker — arrow swings rex → luna; print payoff (GENUINE MOTION) // 58–64 Takeaway // // Colour discipline: // chalk-100 code text, values // chalk-200 labels, name tags // chalk-300 dimmed text, hints // amber-400 execution highlight, rex frame, primary stamp // amber-300 payoff / readouts // teal-400 luna frame (second instance — visually distinct) // // Milestones inside motion beats are fractions of the sprite's actual duration // so audio rewires keep the choreography aligned. const SCENE_DURATION = 75; const NARRATION = [ /* 0–10 */ 'Du vil ha to ulike hunder med ulike navn og aldre — uten å skrive samme kode to ganger. En klasse hjelper oss her: én mal, mange objekter.', /* 10–22 */ 'Klassen Hund er som en mal. Den sier hvilke felter hver hund skal ha — et navn og en alder — og hvilke metoder den kan svare på, som bjeff. Selve malen lagrer ingen verdier ennå.', /* 22–36 */ 'Når vi skriver rex er lik Hund med Rex og fire, stempler malen ut et nytt objekt. Argumentene reiser inn i init og lander i selvets felter: navnet blir Rex, alderen blir fire.', /* 36–48 */ 'Vi gjør det samme én gang til. Luna og to lander i et helt nytt objekt med sine egne felter. Nå finnes to hunder side om side, hver med sin egen navnelapp og sin egen alder.', /* 48–58 */ 'Når vi sier rex punkt bjeff, kjører metoden — men selv peker på rex sitt objekt, og leser Rex fra rex sitt navnefelt. For luna punkt bjeff svinger selv over til Luna. Samme metode, ulike svar.', /* 58–64 */ 'Klassen er malen, objektet er en utgave som lever sitt eget liv, og selv peker alltid på dette objektet her.', ]; const NARRATION_AUDIO = 'audio/klasse-og-objekt/scene.mp3'; // ─── The program ─────────────────────────────────────────────────────────── const CODE = [ 'class Hund:', // 1 ' def __init__(self, navn, alder):', // 2 ' self.navn = navn', // 3 ' self.alder = alder', // 4 '', // 5 ' def bjeff(self):', // 6 ' return f"{self.navn} sier voff"',// 7 '', // 8 'rex = Hund("Rex", 4)', // 9 'luna = Hund("Luna", 2)', // 10 'print(rex.bjeff(), luna.bjeff())', // 11 ].join('\n'); // ─── Layout ──────────────────────────────────────────────────────────────── // Object frames are anchored absolutely so the flying chips can lerp into // exact slot centres. mal sits at the top of the right column, then rex and // luna stack below it (landscape: rex right of mal, luna right of rex in a // tighter horizontal layout would clip — so we keep mal top, rex left, luna // right of rex). function layoutGeom(portrait) { if (portrait) { return { codeLeft: 60, codeTop: 200, codeFont: 16, // mal card (blueprint) malX: 70, malY: 660, malW: 580, malH: 130, malNavnY: 700, malAlderY: 740, // rex object frame rexX: 70, rexY: 820, rexW: 280, rexH: 200, rexNavnSlot: { x: 96, y: 880 }, rexAlderSlot: { x: 96, y: 950 }, // luna object frame lunaX: 370, lunaY: 820, lunaW: 280, lunaH: 200, lunaNavnSlot: { x: 396, y: 880 }, lunaAlderSlot: { x: 396, y: 950 }, // chip launch point (just below mal card centre) launchPoint: { x: 290, y: 800 }, // output panel outX: 70, outY: 1060, outW: 580, outFont: 18, slotW: 230, slotH: 50, svgW: 720, svgH: 1280, // self arrow base (from "bjeff" line in mal card) selfBase: { x: 360, y: 770 }, }; } return { codeLeft: 64, codeTop: 160, codeFont: 18, // mal card sits top right malX: 640, malY: 150, malW: 580, malH: 130, malNavnY: 200, malAlderY: 240, // rex object frame bottom-left of right column rexX: 640, rexY: 320, rexW: 280, rexH: 200, rexNavnSlot: { x: 666, y: 380 }, rexAlderSlot: { x: 666, y: 450 }, // luna object frame bottom-right of right column lunaX: 940, lunaY: 320, lunaW: 280, lunaH: 200, lunaNavnSlot: { x: 966, y: 380 }, lunaAlderSlot: { x: 966, y: 450 }, // chip launch — just below mal card centre launchPoint: { x: 930, y: 300 }, // output panel bottom of right column outX: 640, outY: 555, outW: 580, outFont: 22, slotW: 228, slotH: 50, svgW: 1280, svgH: 720, // self arrow base (from bjeff in mal) selfBase: { x: 930, y: 270 }, }; } function codePos(G) { return { position: 'absolute', left: G.codeLeft, top: G.codeTop, fontVariantLigatures: 'none', maxWidth: G.codeLeft === 60 ? 600 : 560 }; } 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) ───────────────────── // The blueprint card — dashed border, label-only slots, method tag at bottom. function MalCard({ G, opacity = 1 }) { return (
Hund (mal)
navn: — alder: —
bjeff() metode
); } // An object frame — solid border (in `accent`), shows two filled slots. function ObjectFrame({ x, y, w, h, accent, title, navn, alder, navnFlash, alderFlash, opacity = 1 }) { return (
{title}
); } // A single labelled slot inside an object frame. (Outside the frame so it // can flash independently and the chip can target exact coords.) function ObjectSlot({ x, y, w, h, label, value, flash, opacity = 1 }) { return (
self.{label}
{value}
); } // The travelling chip: lerps from the launch point into the target slot // centre, on an eased arc, only visible mid-flight. function FlyingChip({ from, to, t, value, slotW, slotH, accent }) { if (t <= 0 || t >= 1) return null; const e = easeInOutCubic(t); const cx = from.x + (to.x + slotW / 2 - from.x) * e; const cy = from.y + (to.y + slotH / 2 - from.y) * e - Math.sin(Math.PI * e) * 36; return (
{value}
); } function OutputRow({ G, text, show }) { if (!show) return null; return (
utskrift {text}
); } function Caption({ G, children, show, dy = 0 }) { if (!show) return null; return (
{children}
); } // SVG overlay covering the full stage, for drawing the self arrow into the // active object's name slot. function ArrowOverlay({ G, children }) { return ( {children} ); } // ─── Scene ───────────────────────────────────────────────────────────────── function Scene() { return ( ); } // ─── Beat 2: Malen ───────────────────────────────────────────────────────── function MalenBeat() { const portrait = usePortrait(); const G = layoutGeom(portrait); return ( <> En mal — labels, ingen verdier ennå. ); } // ─── Beat 3: Stempler rex (GENUINE MOTION) ──────────────────────────────── function StempleRexBeat() { 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 navnLaunch = at(0.30); const navnLand = at(0.50); const alderLaunch = at(0.55); const alderLand = at(0.72); const captionAt = at(0.84); const navnT = (localTime - navnLaunch) / (navnLand - navnLaunch); const alderT = (localTime - alderLaunch) / (alderLand - alderLaunch); const navnFilled = navnT >= 1; const alderFilled = alderT >= 1; const navnFlash = navnFilled && localTime < navnLand + 1.2; const alderFlash = alderFilled && localTime < alderLand + 1.2; // Highlight line 9 (rex creation) then lines 2-4 (__init__) once the chips // start flying — same pattern as funksjonskall-og-scope. const line = localTime >= navnLaunch ? '2,3,4' : '9'; return ( <> {/* Mal card stays visible at the top */} {/* rex object frame draws in */} {localTime >= frameIn && ( <> )} {localTime >= captionAt && (
rex er stemplet ut.
)} ); } // ─── Beat 4: Stempler luna (GENUINE MOTION) ─────────────────────────────── function StempleLunaBeat() { 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.12); const navnLaunch = at(0.32); const navnLand = at(0.52); const alderLaunch = at(0.58); const alderLand = at(0.74); const captionAt = at(0.86); const navnT = (localTime - navnLaunch) / (navnLand - navnLaunch); const alderT = (localTime - alderLaunch) / (alderLand - alderLaunch); const navnFilled = navnT >= 1; const alderFilled = alderT >= 1; const navnFlash = navnFilled && localTime < navnLand + 1.2; const alderFlash = alderFilled && localTime < alderLand + 1.2; const line = localTime >= navnLaunch ? '2,3,4' : '10'; return ( <> {/* Mal card stays at the top, slightly dimmed */} {/* rex object frame from the previous beat, settled and full */} {/* luna object frame draws in */} {localTime >= frameIn && ( <> )} {localTime >= captionAt && (
To utgaver — uavhengige liv.
)} ); } // ─── Beat 5: Selv peker (GENUINE MOTION) ────────────────────────────────── function SelvPekerBeat() { const { localTime, duration } = useSprite(); const portrait = usePortrait(); const G = layoutGeom(portrait); const T = Math.max(duration - 1, 1); const at = (f) => f * T; const swingTo = at(0.42); // arrow swings from rex to luna const outputAt = at(0.72); // The self arrow target lerps from rex's navn slot to luna's navn slot. const swingT = clamp((localTime - swingTo) / 0.7, 0, 1); const tgtRex = { x: G.rexNavnSlot.x + G.slotW / 2, y: G.rexNavnSlot.y + G.slotH / 2 }; const tgtLuna = { x: G.lunaNavnSlot.x + G.slotW / 2, y: G.lunaNavnSlot.y + G.slotH / 2 }; const e = easeInOutCubic(swingT); const tx = tgtRex.x + (tgtLuna.x - tgtRex.x) * e; const ty = tgtRex.y + (tgtLuna.y - tgtRex.y) * e; const lookingAtLuna = swingT >= 0.5; return ( <> swingTo - 1.5} opacity={lookingAtLuna ? 0.55 : 1}/> {/* self arrow swings between targets */} self = outputAt}/> {localTime >= outputAt + 0.8 && (
Samme metode — ulike svar.
)} ); } // ─── Beat 6: Takeaway ────────────────────────────────────────────────────── function Takeaway() { const portrait = usePortrait(); return (
class · self Klassen er malen — objektet er utgaven. self peker på dette objektet her
); } // Expose narration to external tooling (TTS generation, subtitle export) window.sceneNarration = NARRATION; // ─── Mount ───────────────────────────────────────────────────────────────── function App() { return ( ); } ReactDOM.createRoot(document.getElementById('root')).render();