// Grunn og dyp kopi: hva deler kopien fortsatt? — Manimo lesson scene.
// Chapter 8 of itgk (Lister og tupler), a depth companion to liste-referanser.
// Once the student knows that `b = a` shares the row, the next confusion is:
// `b = a.copy()` SHOULD give a real copy — and for flat lists it does. But if
// the list contains other lists, only the outer frame is fresh; the inner
// rows are shared. Mutate `a[0][0]` and both a and b flip in lockstep.
// `copy.deepcopy(a)` is the actual fix. The scene shows three matrix cards
// (a, b, c) — a shared-inner bracket between a and b, no link for c — and
// the genuine motion is two cells flipping together in beat 3, then only one
// flipping in beat 4.
//
// Beats (placeholder timings — rewire-scene.js overwrites them after audio):
// 0– 9 Manimo hook
// 9–22 nestetData — a draws, b draws beside it, shared bracket links them
// 22–37 sjokket — a[0][0]=99 flips BOTH a's and b's (0,0) cells (GENUINE MOTION)
// 37–55 dypKopi — c materialises independent, then a[0][0]=100 flips only a (GENUINE MOTION)
// 55–65 Takeaway
//
// Colour discipline:
// chalk-100 code text, primary values
// chalk-200 cell name (idle), bracket text
// chalk-300 dimmed text, hints, footer
// amber-400 a card accent, beat-3 mutation pulse (matches a)
// amber-300 payoff / output / takeaway
// rose-400 shared-inner bracket (the surprise)
// teal-400 b card (shallow copy), c card (deep copy) — both copies
// teal-300 c "safe" emphasis
//
// Milestones inside motion beats are fractions of the sprite's actual
// duration, so audio rewires keep the choreography aligned.
//
// NOTE (Norwegian narration): generate-audio.js routes language: "no" scenes
// to ElevenLabs eleven_turbo_v2_5 with language_code "no" and voice Liam —
// multilingual_v2 reads bokmål as Danish.
const SCENE_DURATION = 70;
const NARRATION = [
/* 0– 9 */ 'Du har lært at funksjonen list bygger en kopi av ei liste. Men hva om lista inneholder en annen liste? Da er det ikke alltid så enkelt som det ser ut.',
/* 9–22 */ 'a er en liste med to lister inni: en og to, så tre og fire. Når vi kaller metoden copy på a, lages en ny ytre liste. Men inne i den lever de samme pekerne — så b og a deler de to indre listene.',
/* 22–37 */ 'Vi endrer det første tallet i den første indre lista til nittini. Det er jo bare én indre liste der — så når vi skriver ut, viser både a og b nittini på samme plass. Metoden copy var ikke nok.',
/* 37–55 */ 'Funksjonen deepcopy fra modulen copy lager nye kopier på alle nivåer. c får sine egne indre lister. Når vi nå setter det første tallet i a til hundre, ser bare a endringen. c er trygg.',
/* 55–65 */ 'Copy gir deg en ny ytre liste. Deepcopy gir deg nye lister hele veien ned. Lager du en kopi av en nesta liste, må du tenke på hvor dypt det skal kopieres.',
];
const NARRATION_AUDIO = 'audio/grunn-vs-dyp-kopi/scene.mp3';
// ─── The program ───────────────────────────────────────────────────────────
const CODE = [
'import copy', // 1
'a = [[1, 2], [3, 4]]', // 2
'b = a.copy()', // 3
'a[0][0] = 99', // 4
'print(a, b)', // 5
'', // 6
'c = copy.deepcopy(a)', // 7
'a[0][0] = 100', // 8
'print(a, c)', // 9
].join('\n');
// ─── Layout ────────────────────────────────────────────────────────────────
function layoutGeom(portrait) {
if (portrait) {
return {
codeLeft: 64, codeTop: 200, codeFont: 21,
// Three matrix cards stacked vertically in portrait
cardW: 200, cardH: 168,
aX: 100, aY: 540,
bX: 420, bY: 540,
cX: 420, cY: 540, // c overlays b's position (b fades out in beat 4)
// Output panel
outX: 60, outY: 760, outW: 600, outFont: 18,
svgW: 720, svgH: 1280,
sharedX: 320, sharedY: 624, // shared-inner bracket midpoint (between a and b)
sharedVertical: false,
};
}
return {
codeLeft: 56, codeTop: 180, codeFont: 22,
cardW: 200, cardH: 168,
aX: 480, aY: 200,
bX: 760, bY: 200,
cX: 1040, cY: 200,
outX: 480, outY: 410, outW: 720, outFont: 22,
svgW: 1280, svgH: 720,
sharedX: 690, sharedY: 284, // between a and b
sharedVertical: false,
};
}
function codePos(G) {
return { position: 'absolute', left: G.codeLeft, top: G.codeTop, fontVariantLigatures: 'none' };
}
// ─── Matrix card ───────────────────────────────────────────────────────────
// Renders a labelled card showing a 2D list as a 2x2 grid of cells. Each cell
// flashes amber when its "(r,c)" key is present in `flashCells`. `accent`
// drives the card frame colour ("amber" | "teal" | "rose").
function MatrixCard({ x, y, w, h, name, rows, flashCells, accent = 'amber', opacity = 1, appearDelay = 0 }) {
const accentColor =
accent === 'amber' ? 'var(--amber-400)' :
accent === 'teal' ? 'var(--teal-400)' :
accent === 'rose' ? 'var(--rose-400)' :
'rgba(232,220,193,0.30)';
const tintColor =
accent === 'amber' ? 'var(--amber-300)' :
accent === 'teal' ? 'var(--teal-300)' :
accent === 'rose' ? 'var(--rose-300)' :
'var(--chalk-300)';
return (
{/* label */}
);
}
// ─── Shared-inner bracket ──────────────────────────────────────────────────
// A dashed bracket spanning the gap between a and b cards, with a centred
// "samme indre" label. Pulses rose when `pulse` is true.
function SharedBracket({ G, show, pulse }) {
if (!show) return null;
const color = pulse ? 'var(--rose-400)' : 'rgba(232,220,193,0.55)';
const labelColor = pulse ? 'var(--rose-300)' : 'var(--chalk-300)';
// Two arms reach from the gap centre out to each card's inner edge.
const portrait = G.svgW === 720;
if (portrait) {
// Portrait: a and b are horizontal neighbours; bracket is a horizontal bar between them
const armY = G.aY + (G.cardH - 30) / 2 + 22;
const cx = G.sharedX;
const aRight = G.aX + G.cardW;
const bLeft = G.bX;
return (
);
}
// Landscape: a and b are horizontal neighbours; bracket runs horizontally
const armY = G.aY + (G.cardH - 30) / 2 + 22;
const cx = G.sharedX;
const aRight = G.aX + G.cardW;
const bLeft = G.bX;
return (
);
}
function OutputRow({ G, text, show, fontSize }) {
if (!show) return null;
return (
utskrift{text}
);
}
function Caption({ G, children, show, dy = 0 }) {
if (!show) return null;
return (
Det ytre er en ny liste — de indre rader deler de fortsatt.
);
}
// ─── Beat 3: sjokket (GENUINE MOTION) ──────────────────────────────────────
function SjokketBeat() {
const { localTime, duration } = useSprite();
const portrait = usePortrait();
const G = layoutGeom(portrait);
const T = Math.max(duration - 1, 1);
const at = (f) => f * T;
const mutateAt = at(0.18);
const printAt = at(0.50);
const line = localTime >= printAt ? 5 : 4;
// Both a's (0,0) and b's (0,0) flip in lockstep after the mutation event
const flashed = localTime >= mutateAt && localTime < mutateAt + 1.4;
const valueChanged = localTime >= mutateAt;
const aRows = [[valueChanged ? 99 : 1, 2], [3, 4]];
const bRows = aRows; // they share the inner list
const flashCells = flashed ? new Set(['0,0']) : new Set();
const bracketPulse = localTime >= mutateAt && localTime < mutateAt + 1.6;
return (
<>
= printAt}
fontSize={portrait ? 17 : 20}/>
= at(0.74)}>
Begge ser endringen — de deler den indre rada.
);
}
// ─── Beat 4: dypKopi (GENUINE MOTION) ──────────────────────────────────────
function DypKopiBeat() {
const { localTime, duration } = useSprite();
const portrait = usePortrait();
const G = layoutGeom(portrait);
const T = Math.max(duration - 1, 1);
const at = (f) => f * T;
const cAppear = at(0.10);
const mutateAt = at(0.42);
const printAt = at(0.68);
let line = 7;
if (localTime >= mutateAt) line = 8;
if (localTime >= printAt) line = 9;
// b fades away in this beat to make room for c (visual narrative: we've
// moved on from b — now we compare a against c).
const bOpacity = Math.max(0, 1 - (localTime - at(0.02)) / 0.6);
const aValueChanged = localTime >= mutateAt; // a[0][0] becomes 100
const aRows = [[aValueChanged ? 100 : 99, 2], [3, 4]];
// c was snapshotted from a BEFORE the second mutation, so c keeps 99 always
const cRows = [[99, 2], [3, 4]];
const aFlash = aValueChanged && localTime < mutateAt + 1.4 ? new Set(['0,0']) : new Set();
return (
<>
{bOpacity > 0.02 && (
)}
{/* Shared bracket between a and b dims out with b */}
{bOpacity > 0.4 && }
{localTime >= cAppear && (
)}
= printAt}
fontSize={portrait ? 17 : 20}/>