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
|
import { Rect, Txt, makeScene2D } from "@motion-canvas/2d";
import {
Direction,
all,
beginSlide,
createRef,
slideTransition,
} from "@motion-canvas/core";
import { FunctionBox } from "../components/function_box";
import { theme } from "../theme";
const pureFib = `const pureFib = (n: number) => {
if (n <= 1)
return 1;
return pureFib(n - 1) + pureFib(n - 2);
};
pureFib;`;
const impureFibFunction = `window.cache = [1, 1];
const impureFib = (n: number) => {
while (cache.length <= n + 1)
cache.push(cache.at(-1) + cache.at(-2));
return cache[n];
};
impureFib;`;
const impureFactFunction = `const impureFact = (n: number): number => {
while (cache.length <= n)
cache.push(cache.length *
cache[cache.length - 1]);
return cache[n];
};
impureFact;`;
export default makeScene2D(function* (view) {
const impureFibFunctionBox = createRef<FunctionBox>();
const impureFactFunctionBox = createRef<FunctionBox>();
const pureFunctionBox = createRef<FunctionBox>();
view.add(
<Rect direction="row" gap={300} layout>
<Rect direction="column" alignItems="center" gap={20}>
<Txt fontSize={30} fontFamily={theme.font} fill={theme.text.hex}>
IMPURE
</Txt>
<FunctionBox
arity={1}
idlingText=""
workingText=""
source={impureFibFunction}
ref={impureFibFunctionBox}
/>
<FunctionBox
arity={1}
idlingText=""
workingText=""
source={impureFactFunction}
ref={impureFactFunctionBox}
/>
</Rect>
<Rect direction="column" alignItems="center" gap={20}>
<Txt fontSize={30} fontFamily={theme.font} fill={theme.text.hex}>
PURE
</Txt>
<FunctionBox
arity={1}
idlingText=""
workingText=""
source={pureFib}
ref={pureFunctionBox}
/>
</Rect>
</Rect>,
);
yield* slideTransition(Direction.Right);
yield* beginSlide("Pure vs Impure");
yield* all(
impureFibFunctionBox().showCode(0.5),
impureFactFunctionBox().showCode(0.5),
);
yield* impureFibFunctionBox().setInputs([{ val: 5 }], 0.2);
yield* beginSlide("Show FibImpure(5)");
yield* impureFibFunctionBox().propogateInput(0.2);
yield* impureFibFunctionBox().propogateOutput(0.2);
yield* beginSlide("FibImpure(5)");
yield* impureFactFunctionBox().setInputs([{ val: 5 }], 0.2);
yield* beginSlide("Show FactImpure(5)");
yield* impureFactFunctionBox().propogateInput(0.2);
yield* impureFactFunctionBox().propogateOutput(0.2);
yield* beginSlide("FactImpure(5)");
yield* impureFactFunctionBox().reset(0.15);
yield* impureFactFunctionBox().setInputs([{ val: 5 }], 0.15);
yield* beginSlide("FactImpure(5) Add 5");
yield* impureFactFunctionBox().propogateInput(0.2);
yield* impureFactFunctionBox().propogateOutput(0.2);
yield* beginSlide("FactImpure(5) Correct");
yield* all(
impureFibFunctionBox().reset(0.5),
impureFactFunctionBox().reset(0.5),
impureFibFunctionBox().hideCode(0.5),
pureFunctionBox().showCode(0.5),
);
yield* beginSlide("Show Fib Pure");
yield* pureFunctionBox().reset(0.15);
yield* all(
pureFunctionBox().setInputs([{ val: 5 }], 0.15),
impureFactFunctionBox().setInputs([{ val: 5 }], 0.15),
);
yield* beginSlide("Set Inputs");
yield* pureFunctionBox().propogateInput(0.2);
yield* pureFunctionBox().propogateOutput(0.2);
yield* impureFactFunctionBox().propogateInput(0.2);
yield* impureFactFunctionBox().propogateOutput(0.2);
yield* beginSlide("Compute Fib");
});
|
