|
| 1 | +import { makeScene2D, Code, LezerHighlighter, lines, Node, Rect, Txt, Line } from '@motion-canvas/2d'; |
| 2 | +import { all, createRef, waitFor } from '@motion-canvas/core'; |
| 3 | +import { MyStyle } from '../../styles'; |
| 4 | +import { parser as parser_cpp } from '@lezer/cpp'; |
| 5 | +import { DEFAULT } from '@motion-canvas/core/lib/signals'; |
| 6 | +import { centerOn } from '../../utils'; |
| 7 | + |
| 8 | +import templateCode from '@lectures/std_function.md?snippet=std_function/template_button.cpp'; |
| 9 | +import stdFunctionCode from '@lectures/std_function.md?snippet=std_function/std_function_button.cpp'; |
| 10 | +import multiButtonCode from '@lectures/std_function.md?snippet=std_function/multi_button.cpp'; |
| 11 | +import typeErasureCode from '@lectures/std_function.md?snippet=std_function/type_erasure.cpp'; |
| 12 | + |
| 13 | +const CppHighlighter = new LezerHighlighter(parser_cpp, MyStyle); |
| 14 | + |
| 15 | +export default makeScene2D(function* (view) { |
| 16 | + const codeRef = createRef<Code>(); |
| 17 | + |
| 18 | + view.add( |
| 19 | + <Code |
| 20 | + ref={codeRef} |
| 21 | + fontSize={26} |
| 22 | + fontFamily={'Fira Mono'} |
| 23 | + highlighter={CppHighlighter} |
| 24 | + code={templateCode} |
| 25 | + /> |
| 26 | + ); |
| 27 | + |
| 28 | + // Initial delay |
| 29 | + yield* waitFor(1); |
| 30 | + |
| 31 | + // 1. Template Button |
| 32 | + yield* centerOn(codeRef(), lines(3, 4), 1, 40); // template <typename Callback> |
| 33 | + yield* waitFor(3); |
| 34 | + |
| 35 | + yield* centerOn(codeRef(), [lines(16, 16), lines(6, 7)], 1, 40); // Callback on_click_; |
| 36 | + yield* waitFor(3); |
| 37 | + |
| 38 | + yield* centerOn(codeRef(), [lines(16, 16), lines(6, 7), lines(9, 12)], 1, 40); // Callback on_click_; |
| 39 | + yield* waitFor(3); |
| 40 | + |
| 41 | + yield* centerOn(codeRef(), [lines(24, 25)], 1, 40); // std::vector<Button> buttons; |
| 42 | + yield* waitFor(3); |
| 43 | + |
| 44 | + yield* centerOn(codeRef(), [lines(24, 24), lines(22, 22)], 1, 40); // std::vector<Button> buttons; |
| 45 | + yield* waitFor(3); |
| 46 | + |
| 47 | + yield* centerOn(codeRef(), [lines(25, 25), lines(19, 19)], 1, 40); // std::vector<Button> buttons; |
| 48 | + yield* waitFor(3); |
| 49 | + |
| 50 | + yield* centerOn(codeRef(), [lines(27, 28)], 1, 40); // std::vector<Button> buttons; |
| 51 | + yield* waitFor(3); |
| 52 | + |
| 53 | + // 3. std::function Button |
| 54 | + yield* codeRef().code(templateCode, 0); |
| 55 | + yield* centerOn(codeRef(), DEFAULT, 0, 24); |
| 56 | + yield* waitFor(1); |
| 57 | + yield* codeRef().code(stdFunctionCode, 1); |
| 58 | + yield* waitFor(1); |
| 59 | + |
| 60 | + yield* centerOn(codeRef(), lines(7, 7), 1, 40); // explicit Button(std::string name, std::function<void()> callback) |
| 61 | + yield* waitFor(1); |
| 62 | + |
| 63 | + yield* centerOn(codeRef(), [lines(7, 8), lines(17, 17)], 1, 40); // explicit Button(std::string name, std::function<void()> callback) |
| 64 | + yield* waitFor(3); |
| 65 | + |
| 66 | + yield* centerOn(codeRef(), lines(22, 48), 1, 40); // std::function<void()> on_click_; |
| 67 | + yield* waitFor(3); |
| 68 | + |
| 69 | + yield* centerOn(codeRef(), lines(28, 30), 1, 40); // std::vector<Button> buttons{play_button, quit_button}; |
| 70 | + yield* waitFor(3); |
| 71 | + |
| 72 | + // 4. MultiButton |
| 73 | + yield* codeRef().code(stdFunctionCode, 0); |
| 74 | + yield* centerOn(codeRef(), DEFAULT, 0, 22); |
| 75 | + yield* waitFor(1); |
| 76 | + yield* codeRef().code(multiButtonCode, 1); |
| 77 | + yield* waitFor(1); |
| 78 | + |
| 79 | + yield* centerOn(codeRef(), [lines(7, 8)], 1, 30); |
| 80 | + yield* waitFor(0.5); |
| 81 | + yield* centerOn(codeRef(), [lines(7, 8), lines(19, 19)], 1, 30); |
| 82 | + yield* waitFor(3); |
| 83 | + |
| 84 | + yield* centerOn(codeRef(), [lines(25, 28), lines(30, 30)], 1, 30); |
| 85 | + yield* waitFor(1); |
| 86 | + |
| 87 | + yield* centerOn(codeRef(), [lines(12, 14)], 1, 30); |
| 88 | + yield* waitFor(3); |
| 89 | + |
| 90 | + |
| 91 | + yield* centerOn(codeRef(), DEFAULT, 1, 22); |
| 92 | + yield* waitFor(3); |
| 93 | + |
| 94 | + yield* centerOn(codeRef(), [lines(13, 13)], 1, 35); |
| 95 | + yield* waitFor(3); |
| 96 | + |
| 97 | + // 5. Type Erasure |
| 98 | + yield* centerOn(codeRef(), DEFAULT, 0, 20); |
| 99 | + yield* codeRef().code(typeErasureCode, 0); |
| 100 | + yield* waitFor(1); |
| 101 | + |
| 102 | + yield* centerOn(codeRef(), lines(3, 3), 1, 32); |
| 103 | + yield* waitFor(1); |
| 104 | + yield* centerOn(codeRef(), [lines(13, 18), lines(28, 28)], 1, 32); |
| 105 | + yield* waitFor(1); |
| 106 | + |
| 107 | + yield* centerOn(codeRef(), lines(19, 27), 1, 36); |
| 108 | + yield* waitFor(1); |
| 109 | + yield* centerOn(codeRef(), [lines(19, 27), lines(5, 8)], 1, 35); |
| 110 | + yield* waitFor(3); |
| 111 | + |
| 112 | + yield* centerOn(codeRef(), lines(30, 42), 1, 36); |
| 113 | + yield* waitFor(3); |
| 114 | + yield* centerOn(codeRef(), lines(10, 10), 1, 36); |
| 115 | + yield* waitFor(1); |
| 116 | + yield* centerOn(codeRef(), [lines(16, 16)], 1, 35); |
| 117 | + yield* waitFor(1); |
| 118 | + yield* centerOn(codeRef(), [lines(23, 23)], 1, 35); |
| 119 | + yield* waitFor(3); |
| 120 | + |
| 121 | + const myFuncRect = createRef<Rect>(); |
| 122 | + const baseRect = createRef<Rect>(); |
| 123 | + const implRect = createRef<Rect>(); |
| 124 | + const tRect = createRef<Rect>(); |
| 125 | + |
| 126 | + const line1 = createRef<Line>(); |
| 127 | + const line2 = createRef<Line>(); |
| 128 | + const line3 = createRef<Line>(); |
| 129 | + |
| 130 | + view.add( |
| 131 | + <Node y={0} scale={1.4}> |
| 132 | + <Rect ref={myFuncRect} width={240} height={60} x={-505} fill="#2d2d2d" radius={10} opacity={0}> |
| 133 | + <Txt text="~MyFunction()" fill="#eeeeee" fontFamily="Fira Mono" fontSize={24} /> |
| 134 | + </Rect> |
| 135 | + <Line ref={line1} points={[[-375, 0], [-295, 0]]} stroke="#569CD6" lineWidth={4} endArrow end={0} /> |
| 136 | + <Rect ref={baseRect} width={260} height={60} x={-155} fill="#2d2d2d" radius={10} opacity={0}> |
| 137 | + <Txt text="~CallableBase()" fill="#eeeeee" fontFamily="Fira Mono" fontSize={24} /> |
| 138 | + </Rect> |
| 139 | + <Line ref={line2} points={[[-15, 0], [65, 0]]} stroke="#569CD6" lineWidth={4} endArrow end={0} /> |
| 140 | + <Rect ref={implRect} width={300} height={60} x={225} fill="#2d2d2d" radius={10} opacity={0}> |
| 141 | + <Txt text="~CallableImpl<T>()" fill="#eeeeee" fontFamily="Fira Mono" fontSize={24} /> |
| 142 | + </Rect> |
| 143 | + <Line ref={line3} points={[[385, 0], [465, 0]]} stroke="#569CD6" lineWidth={4} endArrow end={0} /> |
| 144 | + <Rect ref={tRect} width={150} height={60} x={550} fill="#2d2d2d" radius={10} opacity={0}> |
| 145 | + <Txt text="~T()" fill="#eeeeee" fontFamily="Fira Mono" fontSize={24} /> |
| 146 | + </Rect> |
| 147 | + </Node> |
| 148 | + ); |
| 149 | + |
| 150 | + // 6. Destructors flow |
| 151 | + yield* codeRef().opacity(0, 1); |
| 152 | + |
| 153 | + yield* myFuncRect().opacity(1, 0.5); |
| 154 | + yield* waitFor(0.5); |
| 155 | + yield* line1().end(1, 0.5); |
| 156 | + yield* baseRect().opacity(1, 0.5); |
| 157 | + yield* waitFor(0.5); |
| 158 | + yield* line2().end(1, 0.5); |
| 159 | + yield* implRect().opacity(1, 0.5); |
| 160 | + yield* waitFor(0.5); |
| 161 | + yield* line3().end(1, 0.5); |
| 162 | + yield* tRect().opacity(1, 0.5); |
| 163 | + yield* waitFor(3); |
| 164 | + |
| 165 | + yield* all( |
| 166 | + tRect().opacity(0, 0.5), |
| 167 | + line3().opacity(0, 0.5), |
| 168 | + implRect().opacity(0, 0.5), |
| 169 | + line2().opacity(0, 0.5), |
| 170 | + baseRect().opacity(0, 0.5), |
| 171 | + line1().opacity(0, 0.5), |
| 172 | + myFuncRect().opacity(0, 0.5), |
| 173 | + ); |
| 174 | + |
| 175 | + yield* centerOn(codeRef(), DEFAULT, 0, 20); |
| 176 | + yield* codeRef().opacity(1, 1); |
| 177 | + |
| 178 | + yield* centerOn(codeRef(), DEFAULT, 1, 20); |
| 179 | + yield* waitFor(3); |
| 180 | +}); |
0 commit comments