diff options
| -rw-r--r-- | package-lock.json | 47 | ||||
| -rw-r--r-- | package.json | 10 | ||||
| -rw-r--r-- | script.md | 35 | ||||
| -rw-r--r-- | src/project.meta | 2 | ||||
| -rw-r--r-- | src/scenes/doctor.tsx | 55 | ||||
| -rw-r--r-- | src/scenes/first_box.tsx | 156 | ||||
| -rw-r--r-- | src/scenes/flirtingwithfunctions.tsx | 16 | ||||
| -rw-r--r-- | src/scenes/index.ts | 11 | ||||
| -rw-r--r-- | src/scenes/itinerary.meta | 3 | ||||
| -rw-r--r-- | src/scenes/me.tsx | 24 | ||||
| -rw-r--r-- | src/scenes/partone.tsx | 2 | ||||
| -rw-r--r-- | src/scenes/title.tsx | 4 |
12 files changed, 285 insertions, 80 deletions
diff --git a/package-lock.json b/package-lock.json index 76dfc14..4ccc7ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,13 +8,13 @@ "name": "compilinglambda", "version": "0.0.0", "dependencies": { - "@motion-canvas/2d": "^3.13.0", - "@motion-canvas/core": "^3.13.0", + "@motion-canvas/2d": "^3.14.0", + "@motion-canvas/core": "^3.14.0", "@motion-canvas/ffmpeg": "^1.1.0" }, "devDependencies": { - "@motion-canvas/ui": "^3.13.0", - "@motion-canvas/vite-plugin": "^3.13.0", + "@motion-canvas/ui": "^3.14.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", - "resolved": "https://registry.npmjs.org/@motion-canvas/2d/-/2d-3.13.0.tgz", - "integrity": "sha512-FrQumHi7wTsik27rHvQ9ZO8Uq4lmcMurEwGPkoCAb+cp+K4gLUhczLvrkXb14fCJ2Ie4QxClnGVfs7hYD4MGDw==", + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/@motion-canvas/2d/-/2d-3.14.1.tgz", + "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", - "resolved": "https://registry.npmjs.org/@motion-canvas/core/-/core-3.13.0.tgz", - "integrity": "sha512-W1mkJQs2XW4pDB1DkG9ptPv4EjrpQcYSRUdJW1wLT1UDqVcDtPrlCx3w2MM5cJmNZGl1DdJn9K5Uw12iri6jBA==", + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/@motion-canvas/core/-/core-3.14.1.tgz", + "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", - "resolved": "https://registry.npmjs.org/@motion-canvas/ui/-/ui-3.13.0.tgz", - "integrity": "sha512-ARZzuJELaYrpgs3InhcwU67ZxaWnX0OCLx4U2RMxjNWCo1yxBZ9B4ZGN8Ei2BGdUxLCVa9Rs3A+nTX7FbjLGtA==", + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/@motion-canvas/ui/-/ui-3.14.1.tgz", + "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", - "resolved": "https://registry.npmjs.org/@motion-canvas/vite-plugin/-/vite-plugin-3.13.0.tgz", - "integrity": "sha512-f/yfoeBsb5XmD4Ny0SMHAz9aycyvXVR48Lbj15iVllXRCgtbKjSfbTgeAp8zf2S6qSu/BnuhUrVuZ55QhVjtnQ==", + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/@motion-canvas/vite-plugin/-/vite-plugin-3.14.1.tgz", + "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", diff --git a/package.json b/package.json index f5a9521..8b20ec9 100644 --- a/package.json +++ b/package.json @@ -8,14 +8,14 @@ "build": "tsc && vite build" }, "dependencies": { - "@motion-canvas/core": "^3.13.0", - "@motion-canvas/2d": "^3.13.0", + "@motion-canvas/core": "^3.14.0", + "@motion-canvas/2d": "^3.14.0", "@motion-canvas/ffmpeg": "^1.1.0" }, "devDependencies": { - "@motion-canvas/ui": "^3.13.0", - "@motion-canvas/vite-plugin": "^3.13.0", + "@motion-canvas/ui": "^3.14.0", + "@motion-canvas/vite-plugin": "^3.14.0", "typescript": "^5.2.2", "vite": "^4.0.0" } -}
\ No newline at end of file +} @@ -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've been enjoying programs functionally for over 3 years; in LISP and Elixir mostly +- I love functional programming; 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 -you are finished talking, type RET twice. - +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. +> 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 answer no 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 ``` -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 -came out of nowhere. What does it do? +well that's not super helpful + +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 press a button, it returns one. When we feed it a two, it returns one. A three, two. A four, three. And so forth. +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? diff --git a/src/project.meta b/src/project.meta index c228504..9093235 100644 --- a/src/project.meta +++ b/src/project.meta @@ -4,7 +4,7 @@ "background": "rgb(30,30,46)", "range": [ 0, - null + 33.18333233333333 ], "size": { "x": 1920, 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"); }); |