add animation

This commit is contained in:
Elizabeth Hunt 2024-02-02 13:17:24 -07:00
parent 29dc79359a
commit 7d822f2ba2
Signed by: simponic
GPG Key ID: 52B3774857EB24B1
10 changed files with 78 additions and 24 deletions

BIN
public/img/emacsmac.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 724 KiB

BIN
public/img/sad.mp4 Normal file

Binary file not shown.

18
script.md Normal file
View File

@ -0,0 +1,18 @@
About Me
===
"For the new faces, I'm Elizabeth, or simponic on the discord..."
Part One
===
"But you didn't come here to meet me; and we don't have much time to get through everything. So let's start. Part one: Flirting With Functions!"
Flirting With Functions
===
Tomorrow's Valentine's day, but you don't have a Valentine!
Desparate to find one, you turn to your computer and open Emacs and open "m-x doctor".

View File

@ -0,0 +1,5 @@
{
"version": 0,
"timeEvents": [],
"seed": 487503470
}

View File

@ -0,0 +1,33 @@
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 sad from "../../public/img/sad.mp4";
import emacsmac from "../../public/img/emacsmac.jpg";
export default makeScene2D(function* (view) {
const vid = createRef<Video>();
const img = createRef<Img>();
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} />);
vid().loop(true);
vid().play();
yield* beginSlide("No Valentine");
yield* tween(4.2, (val) => {
img().position.x(map(startX, endX, val));
});
yield* beginSlide("Going To The Doctor");
});

View File

@ -1,5 +1,6 @@
import title from "./title?scene"; import title from "./title?scene";
import me from "./me?scene"; import me from "./me?scene";
import itinerary from "./itinerary?scene"; import partone from "./partone?scene";
import flirtingwithfunctions from "./flirtingwithfunctions?scene";
export const scenes = [title, me, itinerary]; export const scenes = [flirtingwithfunctions, title, me, partone];

View File

@ -1,5 +1,3 @@
{ {
"version": 0, "version": 0
"timeEvents": [],
"seed": 2742200033
} }

View File

@ -39,16 +39,16 @@ export default makeScene2D(function* (view) {
. .
</Txt> </Txt>
<Txt fontFamily={theme.font} fill={theme.text.hex}> <Txt fontFamily={theme.font} fill={theme.text.hex}>
I love 😍 {"=>"} I {"<3"} Functional Programming λ.
</Txt> </Txt>
<Txt fontFamily={theme.font} fill={theme.text.hex}> <Txt fontFamily={theme.font} fill={theme.text.hex}>
{"=>"} Common LISP {"=>"} I've been a student networking{"\n"}software engineer here at
USU
{"\n"}
for over 1.5 years.
</Txt> </Txt>
<Txt fontFamily={theme.font} fill={theme.text.hex}> <Txt fontFamily={theme.font} fill={theme.text.hex}>
{"=>"} Elixir {"=>"} I'm an SDE at AWS starting{"\n"}soon in Seattle.
</Txt>
<Txt fontFamily={theme.font} fill={theme.text.hex}>
{"=>"} Functional Programming
</Txt> </Txt>
</Node> </Node>
</Layout> </Layout>
@ -56,12 +56,12 @@ export default makeScene2D(function* (view) {
<Txt opacity={0} ref={src} fontFamily={theme.font} fill={theme.green.hex}> <Txt opacity={0} ref={src} fontFamily={theme.font} fill={theme.green.hex}>
git.simponic.xyz/simponic/compiling-the-lambda-calculus git.simponic.xyz/simponic/compiling-the-lambda-calculus
</Txt> </Txt>
</> </>,
); );
yield img().fill(img().getColorAtPoint(0)); yield img().fill(img().getColorAtPoint(0));
const diff = 370; const diff = 380;
yield* all( yield* all(
img().size([450, 450], 1), img().size([450, 450], 1),
img().radius(50, 1), img().radius(50, 1),
@ -70,7 +70,7 @@ export default makeScene2D(function* (view) {
node().opacity(1, 1), node().opacity(1, 1),
layout().position.x(diff, 1), layout().position.x(diff, 1),
src().opacity(1, 1), src().opacity(1, 1),
src().position.y(275, 1) src().position.y(290, 1),
); );
yield* beginSlide("About Me"); yield* beginSlide("About Me");

5
src/scenes/partone.meta Normal file
View File

@ -0,0 +1,5 @@
{
"version": 0,
"timeEvents": [],
"seed": 2742200033
}

View File

@ -1,11 +1,5 @@
import { Layout, Txt, makeScene2D } from "@motion-canvas/2d"; import { Layout, Txt, makeScene2D } from "@motion-canvas/2d";
import { import { Direction, beginSlide, slideTransition } from "@motion-canvas/core";
Direction,
beginSlide,
fadeTransition,
slideTransition,
waitFor,
} from "@motion-canvas/core";
import { theme } from "../theme"; import { theme } from "../theme";
export default makeScene2D(function* (view) { export default makeScene2D(function* (view) {
@ -15,11 +9,11 @@ export default makeScene2D(function* (view) {
Part One Part One
</Txt> </Txt>
<Txt fontFamily={theme.font} fill={theme.text.hex}> <Txt fontFamily={theme.font} fill={theme.text.hex}>
Exploring the Functional Programming World Flirting With Functions
</Txt> </Txt>
</Layout> </Layout>,
); );
yield* slideTransition(Direction.Right); yield* slideTransition(Direction.Right);
yield* beginSlide("hi"); yield* beginSlide("Part One");
}); });