update

4 files changed, 127 insertions, 11 deletions

diff --git a/src/components/function_box.tsx b/src/components/function_box.tsx
index 43d3985..dc00a24 100644
--- a/src/components/function_box.tsx
+++ b/src/components/function_box.tsx
@@ -133,8 +133,13 @@ export class FunctionBox extends Node {
           </Node>
         </Rect>
 
-        <Rect direction={"column"} height={"100%"} alignItems={"end"}>
-          <Rect direction={"row"} alignItems={"center"} gap={10}>
+        <Rect
+          direction="column"
+          height={"100%"}
+          alignItems={"end"}
+          justifyContent="center"
+        >
+          <Rect direction="row" alignItems="center" gap={10}>
             <Line
               points={[]}
               stroke={theme.red.hex}
@@ -159,7 +164,7 @@ export class FunctionBox extends Node {
   public *resetInput(duration: number) {
     yield* all(
       ...this.inputs.map((x) =>
-        all(x.opacity(0, duration), x.fontSize(0, duration)),
+        all(x.opacity(1, duration), x.fontSize(this.inputFontSize, duration)),
       ),
       ...this.inputSegments.map((segment) =>
         all(segment.points([], duration), segment.opacity(1, duration)),
@@ -232,14 +237,13 @@ export class FunctionBox extends Node {
 
   public *propogateOutput(duration: number) {
     yield* all(
-      this.boxMoji().text(this.idlingText, duration),
       this.child()?.opacity(0.2, duration),
       this.output().opacity(0.2, duration),
+      this.output().fontSize(this.outputFontSize, duration),
       this.outputSegment().opacity(0, duration),
     );
 
     const output = this.function(...this.currentArgs.map((input) => input.val));
-
     switch (typeof output) {
       case "function":
         yield this.output().add(
@@ -271,6 +275,7 @@ export class FunctionBox extends Node {
     }
 
     yield* all(
+      this.boxMoji().text(this.idlingText, duration),
       this.outputSegment().points(
         [
           { x: 0, y: 0 },
diff --git a/src/scenes/index.ts b/src/scenes/index.ts
index d21da3b..8544e23 100644
--- a/src/scenes/index.ts
+++ b/src/scenes/index.ts
@@ -5,13 +5,15 @@ import flirtingwithfunctions from "./flirtingwithfunctions?scene";
 import doctor from "./doctor?scene";
 import first_box from "./first_box?scene";
 import hungry_partner from "./hungry_partner?scene";
+import pure_functions from "./pure_functions?scene";
 
 export const scenes = [
-  //  title,
-  //  me,
-  //  partone,
-  //  flirtingwithfunctions,
-  //  doctor,
-  // first_box,
+  title,
+  me,
+  partone,
+  flirtingwithfunctions,
+  doctor,
+  first_box,
   hungry_partner,
+  pure_functions,
 ];
diff --git a/src/scenes/pure_functions.meta b/src/scenes/pure_functions.meta
new file mode 100644
index 0000000..c012917
--- /dev/null
+++ b/src/scenes/pure_functions.meta
@@ -0,0 +1,5 @@
+{
+  "version": 0,
+  "timeEvents": [],
+  "seed": 1453873557
+}
\ No newline at end of file
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");
+});