more

package-lock.json

@@ -8,13 +8,13 @@
       "name": "compilinglambda",
       "version": "0.0.0",
       "dependencies": {
-        "@motion-canvas/2d": "^3.13.0",
+        "@motion-canvas/2d": "^3.14.0",
-        "@motion-canvas/core": "^3.13.0",
+        "@motion-canvas/core": "^3.14.0",
         "@motion-canvas/ffmpeg": "^1.1.0"
       },
       "devDependencies": {
-        "@motion-canvas/ui": "^3.13.0",
+        "@motion-canvas/ui": "^3.14.0",
-        "@motion-canvas/vite-plugin": "^3.13.0",
+        "@motion-canvas/vite-plugin": "^3.14.0",
         "typescript": "^5.2.2",
         "vite": "^4.0.0"
       }
@@ -587,20 +587,20 @@
       ]
     },
     "node_modules/@motion-canvas/2d": {
-      "version": "3.13.0",
+      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/@motion-canvas/2d/-/2d-3.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/@motion-canvas/2d/-/2d-3.14.1.tgz",
-      "integrity": "sha512-FrQumHi7wTsik27rHvQ9ZO8Uq4lmcMurEwGPkoCAb+cp+K4gLUhczLvrkXb14fCJ2Ie4QxClnGVfs7hYD4MGDw==",
+      "integrity": "sha512-9bwpp/3bbaXycK4yGY2pD1qyZuHmVcf+cgMAhw9Xu/QSMbElh68u5bguN6AXLpaRxAWWLu9lGtf6Pws7tRgv4g==",
       "dependencies": {
-        "@motion-canvas/core": "^3.13.0",
+        "@motion-canvas/core": "^3.14.1",
         "code-fns": "^0.8.2",
         "mathjax-full": "^3.2.2",
         "parse-svg-path": "^0.1.2"
       }
     },
     "node_modules/@motion-canvas/core": {
-      "version": "3.13.0",
+      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/@motion-canvas/core/-/core-3.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/@motion-canvas/core/-/core-3.14.1.tgz",
-      "integrity": "sha512-W1mkJQs2XW4pDB1DkG9ptPv4EjrpQcYSRUdJW1wLT1UDqVcDtPrlCx3w2MM5cJmNZGl1DdJn9K5Uw12iri6jBA==",
+      "integrity": "sha512-1rEys/mOa1WwUttAeHOQwDoLDcVNsFhNIO6YDVTzEGWYMGhHavEsVWdWD8YaDRbBkcHwd1uLKtIahyjERzBnjw==",
       "dependencies": {
         "@types/chroma-js": "^2.1.4",
         "chroma-js": "^2.4.2"
@@ -622,24 +622,25 @@
       }
     },
     "node_modules/@motion-canvas/ui": {
-      "version": "3.13.0",
+      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/@motion-canvas/ui/-/ui-3.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/@motion-canvas/ui/-/ui-3.14.1.tgz",
-      "integrity": "sha512-ARZzuJELaYrpgs3InhcwU67ZxaWnX0OCLx4U2RMxjNWCo1yxBZ9B4ZGN8Ei2BGdUxLCVa9Rs3A+nTX7FbjLGtA==",
+      "integrity": "sha512-6HLqzDnLUVyURGVl8hFvq6AOirlxz0ROnQlEgBiryRmdmJ/eSrZ3nVpxVCP2fp8AJ2f2KwHBNtwXyLv+xq1Uyw==",
       "dev": true,
       "dependencies": {
-        "@motion-canvas/core": "^3.13.0",
+        "@motion-canvas/core": "^3.14.1",
         "@preact/signals": "^1.2.1",
         "preact": "^10.19.2"
       }
     },
     "node_modules/@motion-canvas/vite-plugin": {
-      "version": "3.13.0",
+      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/@motion-canvas/vite-plugin/-/vite-plugin-3.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/@motion-canvas/vite-plugin/-/vite-plugin-3.14.1.tgz",
-      "integrity": "sha512-f/yfoeBsb5XmD4Ny0SMHAz9aycyvXVR48Lbj15iVllXRCgtbKjSfbTgeAp8zf2S6qSu/BnuhUrVuZ55QhVjtnQ==",
+      "integrity": "sha512-INkDrLmGRLwXlVrHSo7LMbORimYkxlE2DnBnuRdkHF6JeTxeUU+KtHTSW+vTg55cwEz2UykIIW2Tc0KicOU11Q==",
       "dependencies": {
         "fast-glob": "^3.3.1",
         "follow-redirects": "^1.15.2",
-        "mime-types": "^2.1.35"
+        "mime-types": "^2.1.35",
+        "source-map": "^0.6.1"
       },
       "peerDependencies": {
         "vite": "4.x || 5.x"
@@ -1147,6 +1148,14 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",

package.json

@@ -8,14 +8,14 @@
     "build": "tsc && vite build"
   },
   "dependencies": {
-    "@motion-canvas/core": "^3.13.0",
+    "@motion-canvas/core": "^3.14.0",
-    "@motion-canvas/2d": "^3.13.0",
+    "@motion-canvas/2d": "^3.14.0",
     "@motion-canvas/ffmpeg": "^1.1.0"
   },
   "devDependencies": {
-    "@motion-canvas/ui": "^3.13.0",
+    "@motion-canvas/ui": "^3.14.0",
-    "@motion-canvas/vite-plugin": "^3.13.0",
+    "@motion-canvas/vite-plugin": "^3.14.0",
     "typescript": "^5.2.2",
     "vite": "^4.0.0"
   }
-}
+}

script.md

@@ -3,10 +3,13 @@ About Me
 
 "For the new faces, I'm Elizabeth, or simponic on the discord..."
 
-- I'm 20 years old, graduating this semester once I'm done with my final general class I missed on my grad plan (2credits only, ugh)
+- I love functional programming; I've been enjoying programs functionally for over 3 years; in LISP and Elixir mostly
-- I've been enjoying programs functionally for over 3 years; in LISP and Elixir mostly
+- Soon to be SDE at AWS
+- I'm 20 years old, graduating this semester once I'm done with my final general class I missed on my grad plan (2credits only, ugh, ask me after if you want to hear the bureacracy)
 - I was president of the USU Linux club from 2021 - 2024
 
+Of course this presentation is open source at the link you see on the board.
+
 
 Part One
 ===
@@ -20,33 +23,29 @@ Tomorrow's Valentine's day, but you realize; you don't have a Valentine!
 Desparate to make yourself feel better, you turn to your computer and open Emacs, querying "m-x doctor".
 
 ```
-I am the psychotherapist.  Please, describe your problems.  Each time
+I am the psychotherapist.  Please, describe your problems.  Each time you are finished talking, type RET twice.
-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.
-> i want something that when i ask one question i'll get the
+Is it because when you ask one question you will get the same answer no matter what that you came to me?
-> same answer no matter what.
+> yes
+I see...  Well, are you sure that this is so?
+> yes
+Yes, hmmm... so, do you really think this is so?
+> yes
 ```
 
-What could exist out there that provides this? Let's put a pin in that; it looks like we have a black box here that
+well that's not super helpful
-came out of nowhere. What does it do?
 
-When we feed it a one and press a button, it returns one. When we feed it a two, it returns one. A three, two. A four, three. And so forth. 
+It looks like we have a black box here that came out of nowhere. What does it do?
+
+When we feed it a one and put it at this arrow, it returns one. When we feed it a two, it returns one. A three, two. A four, three. And so forth. 
 No matter how many times we put a number in it gives me the same answer; we're all in love with it already.
 
 So we're ready to start getting to know this so called "function". Where could our curiosity take us?

src/project.meta

@@ -4,7 +4,7 @@
     "background": "rgb(30,30,46)",
     "range": [
       0,
-      null
+      33.18333233333333
     ],
     "size": {
       "x": 1920,

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());
+  }
+});

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");
+});

src/scenes/flirtingwithfunctions.tsx

@@ -1,13 +1,5 @@
-import { Img, Layout, Txt, Video, makeScene2D } from "@motion-canvas/2d";
+import { Img, Video, makeScene2D } from "@motion-canvas/2d";
-import {
+import { beginSlide, createRef, map, tween } from "@motion-canvas/core";
-  Direction,
-  beginSlide,
-  createRef,
-  map,
-  slideTransition,
-  tween,
-} from "@motion-canvas/core";
-import { theme } from "../theme";
 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} />);
+  yield 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(<Img width={200} ref={img} src={emacsmac} x={startX} />);
 
   yield vid().play();
   yield vid().loop(true);

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,
+];

src/scenes/itinerary.meta

@@ -1,3 +0,0 @@
-{
-  "version": 0
-}

src/scenes/me.tsx

@@ -1,11 +1,5 @@
 import { Node, Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
-import {
+import { beginSlide, createRef, all } from "@motion-canvas/core";
-  beginSlide,
-  createRef,
-  waitFor,
-  all,
-  fadeTransition,
-} 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
@@ -28,27 +22,21 @@ export default makeScene2D(function* (view) {
         y={-10}
       >
         <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
+            {"=>"} I'm a soon to be SDE at {"\n"} AWS in Seattle.
-            USU
-            {"\n"}
-            for over 1.5 years.
           </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>

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

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");
 });