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
|
import { makeScene2D } from "@motion-canvas/2d";
import {
Direction,
all,
beginSlide,
createRef,
slideTransition,
} from "@motion-canvas/core";
import { PEOPLE, Person, PersonI } from "../components/person";
import { birthdayCardFn, valentineCardFn } from "./generalized";
import { CardI } from "./birthday_letters";
import { FunctionBox } from "../components/function_box";
export const cardGeneratorFor = (
person: PersonI,
type: string,
): (() => CardI) => {
const birthdayCardGenerator = () => birthdayCardFn(person);
const valentineCardGenerator = () => valentineCardFn(person);
switch (type) {
case "valentine":
return valentineCardGenerator;
case "birthday":
return birthdayCardGenerator;
}
throw new Error(type + " not implemented");
};
export const cardGeneratorForSource = `const cardGeneratorFor = (person: PersonI, type: string): (() => CardI) => {
const birthdayCardGenerator = () => birthdayCardFn(person); // closure
const valentineCardGenerator = () => valentineCardFn(person); // closure
switch (type) {
case "valentine":
return valentineCardGenerator;
case "birthday":
return birthdayCardGenerator;
}
throw new Error(type + " not implemented");
}`;
export default makeScene2D(function* (view) {
const box = createRef<FunctionBox>();
view.add(
<FunctionBox
arity={2}
ref={box}
fn={cardGeneratorFor}
source={cardGeneratorForSource}
outputFontSize={20}
/>,
);
yield* all(
box().reset(0.1),
box().showCode(0.5),
slideTransition(Direction.Left, 0.5),
);
yield* beginSlide("show code");
const [alan] = PEOPLE;
yield* box().setInputs(
[{ val: alan, node: <Person person={alan} /> }, { val: "valentine" }],
0.5,
);
yield* beginSlide("show inputs");
yield* box().hideCode(0.5);
yield* box().propogateInput(0.5);
yield* box().propogateOutput(0.5);
yield* beginSlide("create child function");
const child = box().getChild();
yield* child().showCode(0.5);
yield* beginSlide("show child function");
yield* child().hideCode(0.5);
yield* child().setInputs([{ val: "" }], 0.5);
yield* child().propogateInput(0.5);
yield* child().propogateOutput(0.5);
yield* beginSlide("propogate child function");
});
|
