Final text and animations

Author: niosus

animation/projects/src/std_function/scenes/std_function.tsx

@@ -1,4 +1,4 @@
-import { makeScene2D, Code, LezerHighlighter, lines } from '@motion-canvas/2d';
+import { makeScene2D, Code, LezerHighlighter, lines, Node, Rect, Txt, Line } from '@motion-canvas/2d';
 import { all, createRef, waitFor } from '@motion-canvas/core';
 import { MyStyle } from '../../styles';
 import { parser as parser_cpp } from '@lezer/cpp';
@@ -118,6 +118,63 @@ export default makeScene2D(function* (view) {
     yield* centerOn(codeRef(), [lines(23, 23)], 1, 35);
     yield* waitFor(3);
 
+    const myFuncRect = createRef<Rect>();
+    const baseRect = createRef<Rect>();
+    const implRect = createRef<Rect>();
+    const tRect = createRef<Rect>();
+
+    const line1 = createRef<Line>();
+    const line2 = createRef<Line>();
+    const line3 = createRef<Line>();
+
+    view.add(
+        <Node y={0} scale={1.4}>
+            <Rect ref={myFuncRect} width={240} height={60} x={-505} fill="#2d2d2d" radius={10} opacity={0}>
+                <Txt text="~MyFunction()" fill="#eeeeee" fontFamily="Fira Mono" fontSize={24} />
+            </Rect>
+            <Line ref={line1} points={[[-375, 0], [-295, 0]]} stroke="#569CD6" lineWidth={4} endArrow end={0} />
+            <Rect ref={baseRect} width={260} height={60} x={-155} fill="#2d2d2d" radius={10} opacity={0}>
+                <Txt text="~CallableBase()" fill="#eeeeee" fontFamily="Fira Mono" fontSize={24} />
+            </Rect>
+            <Line ref={line2} points={[[-15, 0], [65, 0]]} stroke="#569CD6" lineWidth={4} endArrow end={0} />
+            <Rect ref={implRect} width={300} height={60} x={225} fill="#2d2d2d" radius={10} opacity={0}>
+                <Txt text="~CallableImpl<T>()" fill="#eeeeee" fontFamily="Fira Mono" fontSize={24} />
+            </Rect>
+            <Line ref={line3} points={[[385, 0], [465, 0]]} stroke="#569CD6" lineWidth={4} endArrow end={0} />
+            <Rect ref={tRect} width={150} height={60} x={550} fill="#2d2d2d" radius={10} opacity={0}>
+                <Txt text="~T()" fill="#eeeeee" fontFamily="Fira Mono" fontSize={24} />
+            </Rect>
+        </Node>
+    );
+
+    // 6. Destructors flow
+    yield* codeRef().opacity(0, 1);
+
+    yield* myFuncRect().opacity(1, 0.5);
+    yield* waitFor(0.5);
+    yield* line1().end(1, 0.5);
+    yield* baseRect().opacity(1, 0.5);
+    yield* waitFor(0.5);
+    yield* line2().end(1, 0.5);
+    yield* implRect().opacity(1, 0.5);
+    yield* waitFor(0.5);
+    yield* line3().end(1, 0.5);
+    yield* tRect().opacity(1, 0.5);
+    yield* waitFor(3);
+
+    yield* all(
+        tRect().opacity(0, 0.5),
+        line3().opacity(0, 0.5),
+        implRect().opacity(0, 0.5),
+        line2().opacity(0, 0.5),
+        baseRect().opacity(0, 0.5),
+        line1().opacity(0, 0.5),
+        myFuncRect().opacity(0, 0.5),
+    );
+
+    yield* centerOn(codeRef(), DEFAULT, 0, 20);
+    yield* codeRef().opacity(1, 1);
+
     yield* centerOn(codeRef(), DEFAULT, 1, 20);
     yield* waitFor(3);
 });

lectures/std_function.md

@@ -8,6 +8,8 @@
 - [Type Erasure (How it works under the hood)](#type-erasure-how-it-works-under-the-hood)
 - [Summary](#summary)
 
+<!-- Hey everyone. It has been a while since the last video, but I have a good reason for such a delay! Anyway, I finally found the time to record another video so let's dive in! -->
+
 Remember in one of our [previous lectures](lambdas.md) we looked at lambdas? We saw how they give us an easy and clean way to create function objects on the fly, saving us from writing boilerplate structs just to pass a callable - for example, a simple comparator or an operation to a standard algorithm.
 
 But what happens if we want to store these callables somewhere and call them at a later time? And what if we want these callables to be *anything* that behaves like a function, not just lambdas? 
@@ -343,8 +345,10 @@ Real `std::function` class is, of course, much more complex. It handles differen
 > ⚠️ Finally, it won't hurt to stress this again: you'll probably never need to implement your own type-erased wrapper. But it's good to know how it works under the hood. Who knows, maybe it'll come up in a job interview (like it did for me some years ago, looking at you, Misha)!
 
 ## Summary
-To sum up, `std::function` is a powerful tool when we need a generic, uniform way to store and pass around things that can be called. It bridges the gap between the static compile-time world of lambdas/functors and the dynamic runtime world of vectors of callbacks. All without defining common base classes for all of our callables! 
+To sum up, `std::function` is a powerful tool when we need a generic, uniform way to store and pass around things that can be called. It is extremely versatile, allowing to use any callable object with the same interface.
+
+However, with great power comes great responsibility (and potential heap allocations) as well as a potential runtime overhead due to the use of a vtable. 
 
-But remember, with great power comes great responsibility (and potential heap allocations). So we should probably use `std::function` for callbacks, event handlers, and storing tasks, but stick to templates when we need maximum performance on hot paths, unless we measured otherwise.
+So, as a rule of thumb, we should probably use `std::function` for callbacks, event handlers, and storing tasks, but stick to templates when we need maximum performance on hot paths, unless we measured otherwise.
 
 <!-- And that's it for now! Thanks a lot for watching and I'll catch you in the next video, bye! -->