update

1 files changed, 104 insertions, 0 deletions

diff --git a/src/scenes/pure_functions.tsx b/src/scenes/pure_functions.tsx
new file mode 100644
index 0000000..c7e1f35
--- /dev/null
+++ b/src/scenes/pure_functions.tsx
@@ -0,0 +1,104 @@
+import { Node, 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 pureFunction = `const pureFib = (n: number) => {
+  if (n <= 1) {
+    retun 1;
+  }
+  return fib(n - 1) + fib(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={pureFunction}
+          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.05);
+  yield* beginSlide("Show FibImpure(5)");
+
+  yield* impureFibFunctionBox().propogateInput(0.05);
+  yield* impureFibFunctionBox().propogateOutput(0.05);
+  yield* beginSlide("FibImpure(5)");
+
+  yield* impureFactFunctionBox().setInputs([{ val: 5 }], 0.05);
+  yield* beginSlide("Show FactImpure(5)");
+
+  yield* impureFactFunctionBox().propogateInput(0.05);
+  yield* impureFactFunctionBox().propogateOutput(0.05);
+  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.05);
+  yield* impureFactFunctionBox().propogateOutput(0.05);
+  yield* beginSlide("FactImpure(5) Correct");
+});