more

8 files changed, 234 insertions, 37 deletions

diff --git a/src/scenes/doctor.tsx b/src/scenes/doctor.tsx
new file mode 100644
index 0000000..642b83e
--- /dev/null
+++ b/src/scenes/doctor.tsx
@@ -0,0 +1,55 @@
+import { Txt, makeScene2D } from "@motion-canvas/2d";
+import {
+  Direction,
+  beginSlide,
+  createRef,
+  slideTransition,
+  waitFor,
+} from "@motion-canvas/core";
+import { CodeBlock, insert } from "@motion-canvas/2d/lib/components/CodeBlock";
+import { theme } from "../theme";
+
+const conversation = `
+I am the psychotherapist.  Please, describe your problems.  Each time you are finished talking, type RET twice.
+> i need a valentine
+Why do you say you might want to have this valentine?
+> im lonely
+Are you lonely often?
+> sometimes
+Can you elaborate on that?
+> i need someone or something i can trust
+What makes you believe you need someone or something you can trust?
+> i want something that when i ask one question i'll get the same answer no matter what.
+Is it because when you ask one question you will get the same answerno matter what that you came to me?
+> yes
+I see...  Well, are you sure that this is so?
+> yes
+Yes, hmmm... so, do you really think this is so?
+> yes`
+  .split("\n")
+  .filter((x) => x.trim());
+
+export default makeScene2D(function* (view) {
+  const block = createRef<CodeBlock>();
+
+  yield view.add(
+    <CodeBlock
+      fontFamily={theme.font}
+      language="markdown"
+      ref={block}
+      fontSize={20}
+    ></CodeBlock>,
+  );
+
+  yield* slideTransition(Direction.Right);
+
+  let currentConversation = conversation[0] + "\n";
+  let id = 0;
+  for (const line of conversation.slice(1)) {
+    yield* block().edit(1.2, false)`${currentConversation}${insert(
+      "\n" + line + "\n",
+    )}`;
+    currentConversation += "\n" + line + "\n";
+    yield* beginSlide(line.split(" ").slice(0, 3).join(" ") + id.toString());
+  }
+});
diff --git a/src/scenes/first_box.tsx b/src/scenes/first_box.tsx
new file mode 100644
index 0000000..4927157
--- /dev/null
+++ b/src/scenes/first_box.tsx
@@ -0,0 +1,156 @@
+import {
+  Img,
+  Rect,
+  Node,
+  Video,
+  makeScene2D,
+  Txt,
+  Line,
+  LineSegment,
+} from "@motion-canvas/2d";
+import {
+  Direction,
+  beginSlide,
+  createRef,
+  map,
+  slideTransition,
+  tween,
+  all,
+  waitFor,
+} from "@motion-canvas/core";
+
+import { CodeBlock } from "@motion-canvas/2d/lib/components/CodeBlock";
+import { theme } from "../theme";
+
+const fibonacciFn = (n: number): number => {
+  if (n <= 2) {
+    return 1;
+  }
+  return fibonacciFn(n - 1) + fibonacciFn(n - 2);
+};
+
+const fibonacci = `
+const fibonacci = (n: number): number => {
+  if (n <= 2) {
+    return 1;
+  }
+  return fibonacci(n - 1) + fibonacci(n - 2);
+};
+`
+  .split("\n")
+  .filter((x) => x.trim())
+  .join("\n");
+
+export default makeScene2D(function* (view) {
+  const block = createRef<CodeBlock>();
+  const node = createRef<Node>();
+  const rect = createRef<Rect>();
+
+  const boxMoji = createRef<Txt>();
+  const inSegment = createRef<Line>();
+  const outSegment = createRef<Line>();
+  const input = createRef<Txt>();
+  const output = createRef<Txt>();
+
+  yield* view.add(
+    <>
+      <Rect
+        ref={rect}
+        radius={4}
+        stroke={theme.overlay0.hex}
+        fill={theme.crust.hex}
+        lineWidth={4}
+        padding={60}
+        layout
+      >
+        <Node ref={node} opacity={0}>
+          <CodeBlock
+            fontFamily={theme.font}
+            language="typescript"
+            ref={block}
+            fontSize={1}
+            code={fibonacci}
+          ></CodeBlock>
+        </Node>
+      </Rect>
+      <Txt fontFamily={theme.font} fill={theme.text.hex} ref={boxMoji}>
+        😴
+      </Txt>
+      <Line
+        points={[]}
+        ref={inSegment}
+        stroke={theme.green.hex}
+        lineWidth={8}
+        radius={40}
+        endArrow
+      ></Line>
+      <Line
+        points={[]}
+        ref={outSegment}
+        stroke={theme.red.hex}
+        lineWidth={8}
+        radius={40}
+        endArrow
+      ></Line>
+      <Txt
+        opacity={0}
+        fontFamily={theme.font}
+        fill={theme.text.hex}
+        ref={input}
+      ></Txt>
+      <Txt
+        opacity={0}
+        fontFamily={theme.font}
+        fill={theme.text.hex}
+        ref={output}
+      ></Txt>
+    </>,
+  );
+
+  yield boxMoji().position(rect().middle());
+  yield* slideTransition(Direction.Left);
+
+  yield* beginSlide("Black Box");
+
+  const padding = 100;
+  const left = rect().left();
+  const right = rect().right();
+  yield* all(
+    inSegment().points([left.addX(-padding), left], 0.5),
+    outSegment().points([right, right.addX(padding)], 0.5),
+  );
+  yield input().position(left.addX(-padding));
+  yield output().position(right);
+  for (const i of [1, 2, 3]) {
+    yield* all(
+      input().opacity(1, 0.5),
+      input().text(i.toString(), 0.5),
+      input().position(left.addX(-padding - 20), 0.5),
+    );
+
+    yield* beginSlide("Input " + i);
+
+    yield* input().position(left, 0.5);
+    yield* all(input().opacity(0, 0.2), boxMoji().text("👷‍♀️⚙️", 0.2));
+    yield* waitFor(0.5);
+
+    const result = fibonacciFn(i);
+    yield* all(
+      output().opacity(1, 0.5),
+      output().text(result.toString(), 0.5),
+      output().position(right, 0.5),
+    );
+
+    yield* all(boxMoji().text("😴", 0.2));
+
+    yield* beginSlide("Output " + i);
+  }
+
+  yield* all(
+    boxMoji().opacity(0, 0.2),
+    block().fontSize(30, 1),
+    node().opacity(1, 1),
+  );
+
+  yield* beginSlide("Revealing");
+});
diff --git a/src/scenes/flirtingwithfunctions.tsx b/src/scenes/flirtingwithfunctions.tsx
index f833ce9..7f5f9da 100644
--- a/src/scenes/flirtingwithfunctions.tsx
+++ b/src/scenes/flirtingwithfunctions.tsx
@@ -1,13 +1,5 @@
-import { Img, Layout, Txt, Video, makeScene2D } from "@motion-canvas/2d";
-import {
-  Direction,
-  beginSlide,
-  createRef,
-  map,
-  slideTransition,
-  tween,
-} from "@motion-canvas/core";
-import { theme } from "../theme";
+import { Img, Video, makeScene2D } from "@motion-canvas/2d";
+import { beginSlide, createRef, map, tween } from "@motion-canvas/core";
 import sad from "../../public/img/sad.mp4";
 import emacsmac from "../../public/img/emacsmac.jpg";
 
@@ -17,8 +9,8 @@ export default makeScene2D(function* (view) {
   const startX = 1200;
   const endX = 300;
 
-  view.add(<Video width={300} ref={vid} src={sad} x={0} />);
-  view.add(<Img width={200} ref={img} src={emacsmac} x={startX} />);
+  yield view.add(<Video width={300} ref={vid} src={sad} x={0} />);
+  yield view.add(<Img width={200} ref={img} src={emacsmac} x={startX} />);
 
   yield vid().play();
   yield vid().loop(true);
diff --git a/src/scenes/index.ts b/src/scenes/index.ts
index 7ed001e..ffce8a4 100644
--- a/src/scenes/index.ts
+++ b/src/scenes/index.ts
@@ -2,5 +2,14 @@ import title from "./title?scene";
 import me from "./me?scene";
 import partone from "./partone?scene";
 import flirtingwithfunctions from "./flirtingwithfunctions?scene";
+import doctor from "./doctor";
+import first_box from "./first_box";
 
-export const scenes = [title, me, partone, flirtingwithfunctions];
+export const scenes = [
+  title,
+  me,
+  partone,
+  flirtingwithfunctions,
+  doctor,
+  first_box,
+];
diff --git a/src/scenes/itinerary.meta b/src/scenes/itinerary.meta
deleted file mode 100644
index 0e33e3f..0000000
--- a/src/scenes/itinerary.meta
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "version": 0
-}
\ No newline at end of file
diff --git a/src/scenes/me.tsx b/src/scenes/me.tsx
index 00f3914..1557c6c 100644
--- a/src/scenes/me.tsx
+++ b/src/scenes/me.tsx
@@ -1,11 +1,5 @@
 import { Node, Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
-import {
-  beginSlide,
-  createRef,
-  waitFor,
-  all,
-  fadeTransition,
-} from "@motion-canvas/core";
+import { beginSlide, createRef, all } from "@motion-canvas/core";
 
 import me from "../../public/img/me.jpg";
 import { theme } from "../theme";
@@ -16,7 +10,7 @@ export default makeScene2D(function* (view) {
   const layout = createRef<Layout>();
   const src = createRef<Txt>();
 
-  view.add(
+  yield view.add(
     <>
       <Layout
         layout
@@ -29,26 +23,20 @@ export default makeScene2D(function* (view) {
       >
         <Node ref={node} opacity={0}>
           <Txt fontFamily={theme.font} fill={theme.text.hex}>
-            Hello!
-          </Txt>
-          <Txt fontFamily={theme.font} fill={theme.text.hex}>
             My name is Elizabeth{" "}
             <Txt fontFamily={theme.font} fill={theme.teal.hex}>
               (@simponic)
             </Txt>
-            .
           </Txt>
           <Txt fontFamily={theme.font} fill={theme.text.hex}>
-            {"=>"} I {"<3"} Functional Programming λ.
+            {"=>"} I {"<3"} Functional Programming λ
           </Txt>
           <Txt fontFamily={theme.font} fill={theme.text.hex}>
-            {"=>"} I've been a student networking{"\n"}software engineer here at
-            USU
-            {"\n"}
-            for over 1.5 years.
+            {"=>"} I'm a soon to be SDE at {"\n"} AWS in Seattle.
           </Txt>
           <Txt fontFamily={theme.font} fill={theme.text.hex}>
-            {"=>"} I'm an SDE at AWS starting{"\n"}soon in Seattle.
+            {"=>"} 20, president of FSLC from {"\n  "} 2021 - 2024, grad this
+            semester
           </Txt>
         </Node>
       </Layout>
diff --git a/src/scenes/partone.tsx b/src/scenes/partone.tsx
index aaf0187..dd78ad0 100644
--- a/src/scenes/partone.tsx
+++ b/src/scenes/partone.tsx
@@ -3,7 +3,7 @@ import { Direction, beginSlide, slideTransition } from "@motion-canvas/core";
 import { theme } from "../theme";
 
 export default makeScene2D(function* (view) {
-  view.add(
+  yield view.add(
     <Layout layout direction="column" alignItems="center">
       <Txt fontFamily={theme.font} fontSize={100} fill={theme.text.hex}>
         Part One
diff --git a/src/scenes/title.tsx b/src/scenes/title.tsx
index 775e9ec..47b6c11 100644
--- a/src/scenes/title.tsx
+++ b/src/scenes/title.tsx
@@ -5,7 +5,7 @@ import { theme } from "../theme";
 import xkcd from "../../public/img/xkcd.png";
 
 export default makeScene2D(function* (view) {
-  yield view.add(
+  view.add(
     <>
       <Layout
         layout
@@ -30,7 +30,7 @@ export default makeScene2D(function* (view) {
           #2453
         </Txt>
       </Layout>
-    </>
+    </>,
   );
   yield* beginSlide("Title");
 });