diff options
Diffstat (limited to 'src')
| -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 |
9 files changed, 235 insertions, 38 deletions
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"); }); |