summaryrefslogtreecommitdiff
path: root/src/scenes
diff options
context:
space:
mode:
Diffstat (limited to 'src/scenes')
-rw-r--r--src/scenes/birthday_letters.tsx10
-rw-r--r--src/scenes/generalized.meta5
-rw-r--r--src/scenes/generalized.tsx212
-rw-r--r--src/scenes/index.ts6
4 files changed, 226 insertions, 7 deletions
diff --git a/src/scenes/birthday_letters.tsx b/src/scenes/birthday_letters.tsx
index 2a63360..8fe7990 100644
--- a/src/scenes/birthday_letters.tsx
+++ b/src/scenes/birthday_letters.tsx
@@ -13,13 +13,13 @@ import { FunctionBox } from "../components/function_box";
import { theme } from "../theme";
import { PEOPLE, Person, PersonI } from "../components/person";
-const daysUntilNextBirthday = (birthDate: Date): number => {
+export const daysUntilNextDate = (date: Date): number => {
const today = new Date();
const nextBirthday = new Date(
today.getFullYear(),
- birthDate.getMonth(),
- birthDate.getDate(),
+ date.getMonth(),
+ date.getDate(),
);
if (today > nextBirthday) nextBirthday.setFullYear(today.getFullYear() + 1);
@@ -45,7 +45,7 @@ export const birthdayCardsFor = (people: PersonI[]): CardI[] => {
`Happy ${age}${ending} birthday, ${person.name}!\n` +
"I can't believe it's already been a year!";
- const deliverInDays = daysUntilNextBirthday(person.birthday);
+ const deliverInDays = daysUntilNextDate(person.birthday);
cards.push({ deliverInDays, message });
}
@@ -70,7 +70,7 @@ const birthdayCardsFor = (people: PersonI[]): CardI[] => {
\`Happy \${age}\${ageEnding} birthday, \${person.name}!\\n\` +
"I can't believe it's already been a year!";
- const deliverInDays = daysUntilNextBirthday(person.birthday);
+ const deliverInDays = daysUntilNextDate(person.birthday);
cards.push({ deliverInDays, message });
}
diff --git a/src/scenes/generalized.meta b/src/scenes/generalized.meta
new file mode 100644
index 0000000..46b4f46
--- /dev/null
+++ b/src/scenes/generalized.meta
@@ -0,0 +1,5 @@
+{
+ "version": 0,
+ "timeEvents": [],
+ "seed": 3138224359
+} \ No newline at end of file
diff --git a/src/scenes/generalized.tsx b/src/scenes/generalized.tsx
new file mode 100644
index 0000000..67cbb31
--- /dev/null
+++ b/src/scenes/generalized.tsx
@@ -0,0 +1,212 @@
+import { Layout, Txt, makeScene2D } from "@motion-canvas/2d";
+import {
+ Direction,
+ all,
+ beginSlide,
+ createRef,
+ slideTransition,
+} from "@motion-canvas/core";
+
+import { FunctionBox } from "../components/function_box";
+import { PEOPLE, Person, PersonI } from "../components/person";
+import { CardI, daysUntilNextDate } from "./birthday_letters";
+
+const valentineCardFn = (person: PersonI): CardI => {
+ const valentinesDay = new Date("02/14/2024");
+ const message =
+ `Dear, ${person.name}\n.` +
+ "Your smile lights up my world.\n" +
+ "Happy Valentine's Day!";
+ const deliverInDays = daysUntilNextDate(valentinesDay);
+ return { message, deliverInDays };
+};
+
+const birthdayCardFn = (person: PersonI): CardI => {
+ 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 = daysUntilNextDate(person.birthday);
+ return { deliverInDays, message };
+};
+
+const valentineCardGenerator = `const valentineCardGenerator = (person: PersonI): CardI => {
+ const valentinesDay = new Date("02/14/2024");
+ const message =
+ \`Dear, \${person.name}\\n.\` +
+ "Your smile lights up my world.\\n" +
+ "Happy Valentine's Day!";
+ const deliverInDays = daysUntilNextDate(valentinesDay);
+ return { message, deliverInDays };
+};`;
+
+const birthdayCardGenerator = `const birthdayCardGenerator = (person: PersonI): CardI => {
+ 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 = daysUntilNextDate(person.birthday);
+ return { deliverInDays, message };
+}`;
+
+const cardBuilder = `const buildCards = (
+ people: PersonI[],
+ cardGenerator: (person: PersonI) => CardI,
+): CardI[] => {
+ const cards: CardI[] = [];
+
+ for (const person of people) {
+ const card = cardGenerator(person);
+ cards.push(card);
+ }
+
+ return cards;
+};
+buildCards;`;
+
+export default makeScene2D(function* (view) {
+ const valentineFunctionBox = createRef<FunctionBox>();
+ const birthdayFunctionBox = createRef<FunctionBox>();
+ const cardBuilderBox = createRef<FunctionBox>();
+ const layout = createRef<Layout>();
+
+ view.add(
+ <Layout direction="row" gap={200} ref={layout} layout>
+ <Layout direction="column" alignItems="center" gap={20}>
+ <FunctionBox
+ ref={valentineFunctionBox}
+ source={valentineCardGenerator}
+ fn={valentineCardFn}
+ idlingText="❤️"
+ workingText="📝⚙"
+ outputFontSize={15}
+ ></FunctionBox>
+ <FunctionBox
+ ref={birthdayFunctionBox}
+ source={birthdayCardGenerator}
+ fn={birthdayCardFn}
+ idlingText="🎂"
+ workingText="📝⚙"
+ outputFontSize={15}
+ ></FunctionBox>
+ </Layout>
+ <Layout direction="column" gap={20}>
+ <FunctionBox
+ ref={cardBuilderBox}
+ source={cardBuilder}
+ idlingText="🏭"
+ workingText="📝⚙"
+ outputFontSize={15}
+ arity={2}
+ ></FunctionBox>
+ </Layout>
+ </Layout>,
+ );
+
+ yield* all(
+ slideTransition(Direction.Left),
+ ...[valentineFunctionBox, birthdayFunctionBox, cardBuilderBox].map((x) =>
+ x().reset(0.1),
+ ),
+ );
+
+ yield* beginSlide("show all functions");
+
+ yield* all(
+ ...[valentineFunctionBox, birthdayFunctionBox].map((x) =>
+ x().showCode(0.5),
+ ),
+ );
+
+ yield* beginSlide("show generator functions");
+
+ const [p1, p2, p3, p4] = PEOPLE;
+ yield* all(
+ ...[valentineFunctionBox, birthdayFunctionBox].map((x) =>
+ x().hideCode(0.5),
+ ),
+ );
+ yield* all(
+ ...[valentineFunctionBox, birthdayFunctionBox].map((x) =>
+ x().setInputs([{ val: p2, node: <Person person={p2} /> }], 0.5),
+ ),
+ );
+
+ yield* beginSlide("show inputs");
+
+ yield* all(
+ ...[valentineFunctionBox, birthdayFunctionBox].map((x) =>
+ x().propogateInput(0.5),
+ ),
+ );
+ yield* all(
+ ...[valentineFunctionBox, birthdayFunctionBox].map((x) =>
+ x().propogateOutput(0.5),
+ ),
+ );
+ yield* beginSlide("make cards");
+
+ yield* all(
+ ...[valentineFunctionBox, birthdayFunctionBox].map((x) => x().reset(0.5)),
+ cardBuilderBox().showCode(0.5),
+ );
+
+ yield* beginSlide("hide cards, show card generator");
+
+ yield* cardBuilderBox().setInputs(
+ [
+ {
+ val: [p1, p2],
+ node: (
+ <Layout direction="row" gap={20}>
+ <Person person={p1} />
+ <Person person={p2} />
+ </Layout>
+ ),
+ },
+ { val: valentineCardFn, node: valentineFunctionBox() },
+ ],
+ 0.5,
+ );
+ yield* beginSlide("input function to function");
+
+ yield* cardBuilderBox().hideCode(0.5);
+ yield* cardBuilderBox().propogateInput(0.5);
+ yield* cardBuilderBox().propogateOutput(0.5);
+
+ yield* beginSlide("build valentines cards");
+
+ yield* all(layout().gap(0, 0.5), cardBuilderBox().reset(0.5));
+ yield* cardBuilderBox().setInputs(
+ [
+ {
+ val: [p2, p3, p4],
+ node: (
+ <Layout direction="row" gap={20}>
+ <Person person={p2} />
+ <Person person={p3} />
+ <Person person={p4} />
+ </Layout>
+ ),
+ },
+ { val: birthdayCardFn, node: birthdayFunctionBox() },
+ ],
+ 0.5,
+ );
+ yield* beginSlide("show birthday cards input");
+
+ yield* cardBuilderBox().propogateInput(0.5);
+ yield* cardBuilderBox().propogateOutput(0.5);
+
+ yield* beginSlide("build cards");
+});
diff --git a/src/scenes/index.ts b/src/scenes/index.ts
index 8b53e09..6f09c88 100644
--- a/src/scenes/index.ts
+++ b/src/scenes/index.ts
@@ -9,6 +9,7 @@ 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";
+import generalized from "./generalized?scene";
export const scenes = [
//title,
@@ -20,6 +21,7 @@ export const scenes = [
//hungry_partner,
//pure_functions,
//valentines_letters,
- sad_people,
- birthday_letters,
+ //sad_people,
+ //birthday_letters,
+ generalized,
];
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-09-21 10:15:18 +0000