1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
import { Img, Layout, makeScene2D } from "@motion-canvas/2d";
import {
Direction,
beginSlide,
createRef,
slideTransition,
all,
} from "@motion-canvas/core";
import {
CodeBlock,
edit,
insert,
lines,
} from "@motion-canvas/2d/lib/components/CodeBlock";
import amogusSus from "../../public/amogus.png";
const cardBuilder = `const buildCards = (
people: PersonI[],
cardGenerator: (person: PersonI) => CardI,
): CardI[] => {
const cards: CardI[] = [];
for (const person of people) {
const card = cardGenerator(person);
cards.push(card);
}
return cards;
};`;
export default makeScene2D(function* (view) {
const layout = createRef<Layout>();
const buildCards = createRef<CodeBlock>();
const amogus = createRef<Img>();
view.add(
<Layout ref={layout} layout direction="row" gap={0}>
<CodeBlock
fontSize={25}
language="typescript"
ref={buildCards}
code={cardBuilder}
/>
<Img ref={amogus} src={amogusSus} opacity={0} width={0} height={0} />
</Layout>,
);
yield* slideTransition(Direction.Right);
yield* beginSlide("show buildCards");
yield* buildCards().selection([...lines(6), ...lines(8)], 0.75);
yield* all(
amogus().width(300, 0.5),
amogus().height(400, 0.5),
amogus().opacity(1, 0.5),
layout().gap(100, 0.5),
);
yield* beginSlide("show side effects");
yield* all(
buildCards().edit(1.2)`const buildCards = (
people: PersonI[],
cardGenerator: (person: PersonI) => CardI,
): CardI[] => {${insert(`
if (people.length === 0) {
return [];
}
`)}
const cards: CardI[] = [];
for (const person of people) {
const card = cardGenerator(person);
cards.push(card);
}
return cards;
};`,
amogus().width(0, 0.3),
amogus().height(0, 0.3),
layout().gap(0, 0.3),
);
yield* beginSlide("base case");
yield* buildCards().edit(1.2)`const buildCards = (
people: PersonI[],
cardGenerator: (person: PersonI) => CardI,
): CardI[] => {
if (people.length === 0) {
return [];
}
${edit(
"const cards: CardI[] = [];",
`const person = people[0];
const card = cardGenerator(person);`,
)}
for (const person of people) {
const card = cardGenerator(person);
cards.push(card);
}
return cards;
};`;
yield* beginSlide("first card");
yield* buildCards().edit(1.2)`const buildCards = (
people: PersonI[],
cardGenerator: (person: PersonI) => CardI,
): CardI[] => {
if (people.length === 0) {
return [];
}
const person = people[0];
const card = cardGenerator(person);
${edit(
`for (const person of people) {
const card = cardGenerator(person);
cards.push(card);
}`,
`const restPeople = people.slice(1);
const cards = [card].concat(buildCards(restPeople, cardGenerator));`,
)}
return cards;
};`;
yield* beginSlide("recursion");
});
|
