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
|
import { Layout, Txt, makeScene2D } from "@motion-canvas/2d";
import {
Direction,
all,
beginSlide,
createRef,
makeRef,
slideTransition,
} from "@motion-canvas/core";
import { FunctionBox } from "../components/function_box";
import { theme } from "../theme";
import { PEOPLE, Person } from "../components/person";
const valentineLetterGenerator = `
interface PersonI {
name: string;
birthday: Date;
color: string;
}
(function valentinesLettersFor(people: PersonI[]) {
const letters: string[] = [];
for (const person of people) {
const letter = "Dear, " + person.name + "\\n"
+ "Your smile lights up my world.\\n"
+ "Happy Valentine's Day!";
letters.push(letter);
}
return letters;
})`;
export default makeScene2D(function* (view) {
const layout = createRef<Layout>();
const functionBox = createRef<FunctionBox>();
const people: Person[] = [];
const peopleLayout: Layout[] = [];
const peopleText: Txt[] = [];
view.add(
<FunctionBox
ref={functionBox}
source={valentineLetterGenerator}
workingText="📝⚙"
outputFontSize={25}
></FunctionBox>,
);
yield* all(slideTransition(Direction.Left), functionBox().showCode(0.75));
yield* functionBox().reset(0.1);
yield* beginSlide("Show code");
yield* functionBox().reset(0.1);
yield* all(
functionBox().hideCode(0.8),
functionBox().setInputs(
[
{
val: PEOPLE,
node: (
<Layout direction="column" gap={5} layout>
{PEOPLE.map((person) => (
<Person person={person} />
))}
</Layout>
),
},
],
0.8,
),
);
yield* beginSlide("Show people");
yield* functionBox().propogateInput(0.6);
yield* functionBox().propogateOutput(0.6);
yield* beginSlide("Generate valentines letters");
yield* functionBox().opacity(0, 0.5);
functionBox().remove();
view.add(
<Layout opacity={0} ref={layout} direction="row" gap={15} layout>
{PEOPLE.map((person, i) => (
<Layout
ref={makeRef(peopleLayout, i)}
alignItems="center"
direction="column"
gap={100}
>
<Person ref={makeRef(people, i)} person={person} />
<Txt
ref={makeRef(peopleText, i)}
fontSize={0}
fontFamily={theme.font}
fill={theme.text.hex}
/>
</Layout>
))}
</Layout>,
);
yield* layout().opacity(1, 0.5);
yield* all(...peopleText.map((text) => text.text("💌", 0)));
yield* all(...peopleText.map((text) => text.fontSize(50, 0.5)));
yield* all(...peopleLayout.map((layout) => layout.gap(0, 0.5)));
yield* all(
...peopleText.map((text) =>
all(text.fontSize(0, 0.5), text.opacity(0, 0.5)),
),
);
yield* beginSlide("Give people valentines letters");
yield* all(...people.map((person) => person.emit("😊", 0.5)));
yield* beginSlide("See their reactions");
yield* all(...people.map((person) => person.opacity(0, 0.5)));
});
|
