summaryrefslogtreecommitdiff
path: root/src/scenes
diff options
context:
space:
mode:
Diffstat (limited to 'src/scenes')
-rw-r--r--src/scenes/birthday_letters.meta5
-rw-r--r--src/scenes/birthday_letters.tsx213
-rw-r--r--src/scenes/index.ts10
-rw-r--r--src/scenes/sad_people.meta5
-rw-r--r--src/scenes/sad_people.tsx99
-rw-r--r--src/scenes/valentines_letters.meta5
-rw-r--r--src/scenes/valentines_letters.tsx122
7 files changed, 457 insertions, 2 deletions
diff --git a/src/scenes/birthday_letters.meta b/src/scenes/birthday_letters.meta
new file mode 100644
index 0000000..628ca8d
--- /dev/null
+++ b/src/scenes/birthday_letters.meta
@@ -0,0 +1,5 @@
+{
+ "version": 0,
+ "timeEvents": [],
+ "seed": 1594477027
+} \ No newline at end of file
diff --git a/src/scenes/birthday_letters.tsx b/src/scenes/birthday_letters.tsx
new file mode 100644
index 0000000..2a63360
--- /dev/null
+++ b/src/scenes/birthday_letters.tsx
@@ -0,0 +1,213 @@
+import { Layout, Txt, makeScene2D } from "@motion-canvas/2d";
+import {
+ Direction,
+ all,
+ beginSlide,
+ createRef,
+ makeRef,
+ slideTransition,
+ waitFor,
+} from "@motion-canvas/core";
+
+import { FunctionBox } from "../components/function_box";
+import { theme } from "../theme";
+import { PEOPLE, Person, PersonI } from "../components/person";
+
+const daysUntilNextBirthday = (birthDate: Date): number => {
+ const today = new Date();
+
+ const nextBirthday = new Date(
+ today.getFullYear(),
+ birthDate.getMonth(),
+ birthDate.getDate(),
+ );
+ if (today > nextBirthday) nextBirthday.setFullYear(today.getFullYear() + 1);
+
+ const timeDiff = nextBirthday.getTime() - today.getTime();
+ return Math.ceil(timeDiff / (1000 * 3600 * 24));
+};
+
+export interface CardI {
+ message: string;
+ deliverInDays: number;
+}
+
+export const birthdayCardsFor = (people: PersonI[]): CardI[] => {
+ const cards: CardI[] = [];
+
+ for (const person of people) {
+ const age = new Date().getFullYear() - person.birthday.getFullYear();
+ const ending =
+ ({ 1: "st", 2: "nd", 3: "rd" } as Record<number, string>)[
+ parseInt(Array.from(age.toString()).at(-1))
+ ] ?? "th";
+ const message =
+ `Happy ${age}${ending} birthday, ${person.name}!\n` +
+ "I can't believe it's already been a year!";
+
+ const deliverInDays = daysUntilNextBirthday(person.birthday);
+ cards.push({ deliverInDays, message });
+ }
+
+ return cards;
+};
+
+const birthdayCardsSrc = `export interface CardI {
+ message: string;
+ deliverInDays: number;
+}
+
+const birthdayCardsFor = (people: PersonI[]): CardI[] => {
+ const cards: CardI[] = [];
+
+ for (const person of people) {
+ const age = new Date().getFullYear() - person.birthday.getFullYear();
+ const ageEnding = (
+ { 1: "st", 2: "nd", 3: "rd" } as Record<number, string>
+ )[parseInt(Array.from(age.toString()).at(-1))] ?? "th";
+
+ const message =
+ \`Happy \${age}\${ageEnding} birthday, \${person.name}!\\n\` +
+ "I can't believe it's already been a year!";
+
+ const deliverInDays = daysUntilNextBirthday(person.birthday);
+ cards.push({ deliverInDays, message });
+ }
+
+ return cards;
+};`;
+
+export default makeScene2D(function* (view) {
+ const layout = createRef<Layout>();
+ const date = createRef<Txt>();
+ const functionBox = createRef<FunctionBox>();
+ const people: Person[] = [];
+ const peopleLayout: Layout[] = [];
+ const peopleText: Txt[] = [];
+
+ view.add(
+ <FunctionBox
+ ref={functionBox}
+ source={birthdayCardsSrc}
+ fn={birthdayCardsFor}
+ workingText="📝⚙"
+ outputFontSize={25}
+ ></FunctionBox>,
+ );
+
+ yield* all(slideTransition(Direction.Left), functionBox().showCode(0.75));
+ yield* functionBox().reset(0.1);
+
+ yield* beginSlide("Show code");
+
+ yield* functionBox().reset(0.1);
+ yield* all(
+ functionBox().hideCode(0.8),
+ functionBox().setInputs(
+ [
+ {
+ val: PEOPLE,
+ node: (
+ <Layout direction="column" gap={5} layout>
+ {PEOPLE.map((person) => (
+ <Person person={person} />
+ ))}
+ </Layout>
+ ),
+ },
+ ],
+ 0.8,
+ ),
+ );
+
+ yield* beginSlide("Show people");
+
+ yield* functionBox().propogateInput(0.6);
+ yield* functionBox().propogateOutput(0.6);
+ yield* beginSlide("Generate birthday cards");
+
+ yield* functionBox().opacity(0, 0.5);
+ functionBox().remove();
+
+ view.add(
+ <Layout opacity={0} ref={layout} direction="column" gap={15} layout>
+ <Txt
+ fontSize={30}
+ fontFamily={theme.font}
+ fill={theme.text.hex}
+ ref={date}
+ />
+
+ <Layout direction="row" gap={15}>
+ {PEOPLE.map((person, i) => (
+ <Layout
+ ref={makeRef(peopleLayout, i)}
+ alignItems="center"
+ direction="column"
+ gap={100}
+ >
+ <Person ref={makeRef(people, i)} person={person} />
+ <Txt
+ textAlign="center"
+ ref={makeRef(peopleText, i)}
+ fontSize={0}
+ fontFamily={theme.font}
+ fill={theme.text.hex}
+ />
+ </Layout>
+ ))}
+ </Layout>
+ </Layout>,
+ );
+ yield* layout().opacity(1, 0.5);
+
+ const cards = birthdayCardsFor(PEOPLE);
+
+ for (let i = 1; i <= 365 + 1; i++) {
+ const day = new Date(Date.now() + i * 24 * 60 * 60 * 1000);
+
+ yield* waitFor(0.02);
+ yield date().text(day.toDateString());
+
+ const peoplesBirthday = cards
+ .map((x, i) => [x, i] as [CardI, number])
+ .filter(([{ deliverInDays }]) => deliverInDays === i)
+ .map(([_, i]) => i);
+
+ yield* all(
+ ...peoplesBirthday.map((p) => {
+ const text = peopleText[p];
+ return all(
+ text.text("🗓️🎂\n" + cards[p].message, 0),
+ text.fontSize(20, 0.5),
+ );
+ }),
+ );
+
+ yield* all(
+ ...peoplesBirthday.map((p) => {
+ const layout = peopleLayout[p];
+ return layout.gap(0, 0.5);
+ }),
+ );
+
+ yield* all(
+ ...peoplesBirthday.map((p) => {
+ const person = people[p];
+ const text = peopleText[p];
+ return all(
+ text.opacity(0, 0.5),
+ text.fontSize(0, 0.5),
+ person.emit("🥳", 0.8, false),
+ );
+ }),
+ );
+ }
+
+ yield* beginSlide("See their reactions");
+ yield* all(
+ date().fontSize(0, 0.5),
+ date().opacity(0, 0.65),
+ ...people.map((person) => person.opacity(0, 0.5)),
+ );
+});
diff --git a/src/scenes/index.ts b/src/scenes/index.ts
index 8eab357..8b53e09 100644
--- a/src/scenes/index.ts
+++ b/src/scenes/index.ts
@@ -6,6 +6,9 @@ import doctor from "./doctor?scene";
import first_box from "./first_box?scene";
import hungry_partner from "./hungry_partner?scene";
import pure_functions from "./pure_functions?scene";
+import valentines_letters from "./valentines_letters?scene";
+import birthday_letters from "./birthday_letters?scene";
+import sad_people from "./sad_people?scene";
export const scenes = [
//title,
@@ -14,6 +17,9 @@ export const scenes = [
//flirtingwithfunctions,
//doctor,
//first_box,
- hungry_partner,
- pure_functions,
+ //hungry_partner,
+ //pure_functions,
+ //valentines_letters,
+ sad_people,
+ birthday_letters,
];
diff --git a/src/scenes/sad_people.meta b/src/scenes/sad_people.meta
new file mode 100644
index 0000000..37c43fe
--- /dev/null
+++ b/src/scenes/sad_people.meta
@@ -0,0 +1,5 @@
+{
+ "version": 0,
+ "timeEvents": [],
+ "seed": 867976792
+} \ No newline at end of file
diff --git a/src/scenes/sad_people.tsx b/src/scenes/sad_people.tsx
new file mode 100644
index 0000000..ccc0479
--- /dev/null
+++ b/src/scenes/sad_people.tsx
@@ -0,0 +1,99 @@
+import { Layout, Txt, makeScene2D } from "@motion-canvas/2d";
+import {
+ Direction,
+ all,
+ beginSlide,
+ createRef,
+ makeRef,
+ slideTransition,
+ waitFor,
+} from "@motion-canvas/core";
+import { theme } from "../theme";
+import { PEOPLE, Person } from "../components/person";
+import { CardI, birthdayCardsFor } from "./birthday_letters";
+
+export default makeScene2D(function* (view) {
+ const date = createRef<Txt>();
+ const people: Person[] = [];
+ const peopleLayout: Layout[] = [];
+ const peopleText: Txt[] = [];
+
+ view.add(
+ <Layout direction="column" gap={15} layout>
+ <Txt
+ fontSize={30}
+ fontFamily={theme.font}
+ fill={theme.text.hex}
+ ref={date}
+ />
+
+ <Layout direction="row" gap={15}>
+ {PEOPLE.map((person, i) => (
+ <Layout
+ ref={makeRef(peopleLayout, i)}
+ alignItems="center"
+ direction="column"
+ gap={100}
+ >
+ <Person ref={makeRef(people, i)} person={person} />
+ <Txt
+ textAlign="center"
+ ref={makeRef(peopleText, i)}
+ fontSize={0}
+ fontFamily={theme.font}
+ fill={theme.text.hex}
+ />
+ </Layout>
+ ))}
+ </Layout>
+ </Layout>,
+ );
+ yield* all(slideTransition(Direction.Right));
+
+ const cards = birthdayCardsFor(PEOPLE);
+
+ for (let i = 1; i <= 365 + 1; i++) {
+ const day = new Date(Date.now() + i * 24 * 60 * 60 * 1000);
+
+ yield* waitFor(0.01);
+ yield date().text(day.toDateString());
+
+ const peoplesBirthday = cards
+ .map((x, i) => [x, i] as [CardI, number])
+ .filter(([{ deliverInDays }]) => deliverInDays === i)
+ .map(([_, i]) => i);
+
+ yield* all(
+ ...peoplesBirthday.map((p) => {
+ const text = peopleText[p];
+ return all(text.text("🗓️🎂", 0), text.fontSize(50, 0.5));
+ }),
+ );
+
+ yield* all(
+ ...peoplesBirthday.map((p) => {
+ const layout = peopleLayout[p];
+ return layout.gap(0, 0.5);
+ }),
+ );
+
+ yield* all(
+ ...peoplesBirthday.map((p) => {
+ const person = people[p];
+ const text = peopleText[p];
+ return all(
+ text.opacity(0, 0.5),
+ text.fontSize(0, 0.5),
+ person.emit(":(", 0.8, false),
+ );
+ }),
+ );
+ }
+
+ yield* beginSlide("See their reactions");
+ yield* all(
+ date().fontSize(0, 0.5),
+ date().opacity(0, 0.65),
+ ...people.map((person) => person.opacity(0, 0.5)),
+ );
+});
diff --git a/src/scenes/valentines_letters.meta b/src/scenes/valentines_letters.meta
new file mode 100644
index 0000000..2eef586
--- /dev/null
+++ b/src/scenes/valentines_letters.meta
@@ -0,0 +1,5 @@
+{
+ "version": 0,
+ "timeEvents": [],
+ "seed": 3850509512
+} \ No newline at end of file
diff --git a/src/scenes/valentines_letters.tsx b/src/scenes/valentines_letters.tsx
new file mode 100644
index 0000000..8a7359d
--- /dev/null
+++ b/src/scenes/valentines_letters.tsx
@@ -0,0 +1,122 @@
+import { Layout, Txt, makeScene2D } from "@motion-canvas/2d";
+import {
+ Direction,
+ all,
+ beginSlide,
+ createRef,
+ makeRef,
+ slideTransition,
+} from "@motion-canvas/core";
+
+import { FunctionBox } from "../components/function_box";
+import { theme } from "../theme";
+import { PEOPLE, Person } from "../components/person";
+
+const valentineLetterGenerator = `
+interface PersonI {
+ name: string;
+ birthday: Date;
+ color: string;
+}
+
+(function valentinesLettersFor(people: PersonI[]) {
+ const letters: string[] = [];
+
+ for (const person of people) {
+ const letter = "Dear, " + person.name + "\\n"
+ + "Your smile lights up my world.\\n"
+ + "Happy Valentine's Day!";
+ letters.push(letter);
+ }
+
+ return letters;
+})`;
+
+export default makeScene2D(function* (view) {
+ const layout = createRef<Layout>();
+ const functionBox = createRef<FunctionBox>();
+ const people: Person[] = [];
+ const peopleLayout: Layout[] = [];
+ const peopleText: Txt[] = [];
+
+ view.add(
+ <FunctionBox
+ ref={functionBox}
+ source={valentineLetterGenerator}
+ workingText="📝⚙"
+ outputFontSize={25}
+ ></FunctionBox>,
+ );
+
+ yield* all(slideTransition(Direction.Left), functionBox().showCode(0.75));
+ yield* functionBox().reset(0.1);
+
+ yield* beginSlide("Show code");
+
+ yield* functionBox().reset(0.1);
+ yield* all(
+ functionBox().hideCode(0.8),
+ functionBox().setInputs(
+ [
+ {
+ val: PEOPLE,
+ node: (
+ <Layout direction="column" gap={5} layout>
+ {PEOPLE.map((person) => (
+ <Person person={person} />
+ ))}
+ </Layout>
+ ),
+ },
+ ],
+ 0.8,
+ ),
+ );
+
+ yield* beginSlide("Show people");
+
+ yield* functionBox().propogateInput(0.6);
+ yield* functionBox().propogateOutput(0.6);
+ yield* beginSlide("Generate valentines letters");
+
+ yield* functionBox().opacity(0, 0.5);
+ functionBox().remove();
+
+ view.add(
+ <Layout opacity={0} ref={layout} direction="row" gap={15} layout>
+ {PEOPLE.map((person, i) => (
+ <Layout
+ ref={makeRef(peopleLayout, i)}
+ alignItems="center"
+ direction="column"
+ gap={100}
+ >
+ <Person ref={makeRef(people, i)} person={person} />
+ <Txt
+ ref={makeRef(peopleText, i)}
+ fontSize={0}
+ fontFamily={theme.font}
+ fill={theme.text.hex}
+ />
+ </Layout>
+ ))}
+ </Layout>,
+ );
+ yield* layout().opacity(1, 0.5);
+
+ yield* all(...peopleText.map((text) => text.text("💌", 0)));
+ yield* all(...peopleText.map((text) => text.fontSize(50, 0.5)));
+ yield* all(...peopleLayout.map((layout) => layout.gap(0, 0.5)));
+ yield* all(
+ ...peopleText.map((text) =>
+ all(text.fontSize(0, 0.5), text.opacity(0, 0.5)),
+ ),
+ );
+
+ yield* beginSlide("Give people valentines letters");
+
+ yield* all(...people.map((person) => person.emit("😊", 0.5)));
+
+ yield* beginSlide("See their reactions");
+ yield* all(...people.map((person) => person.opacity(0, 0.5)));
+});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-09-20 22:17:18 +0000