Finalize std::async and thread pool animations

Author: niosus

animation/projects/src/parallelism/scenes/why_not_others.tsx

@@ -60,7 +60,7 @@ export default makeScene2D(function* (view) {
                             justifyContent={'center'}
                             clip={true}
                         >
-                            <Txt ref={osOverheadText} text="OS Overhead (Create Thread)" fill="#FFF" fontSize={24} fontWeight={600} opacity={0} />
+                            <Txt ref={osOverheadText} text="OS overhead (create thread)" fill="#FFF" fontSize={24} fontWeight={600} opacity={0} />
                         </Rect>
                         <Rect
                             ref={taskBox}
@@ -71,7 +71,7 @@ export default makeScene2D(function* (view) {
                             justifyContent={'center'}
                             clip={true}
                         >
-                            <Txt ref={taskText} text="Invert" fill="#1E1E1E" fontSize={24} fontWeight={600} opacity={0} />
+                            <Txt ref={taskText} text="Invert" fill="#1E1E1E" fontFamily={"Fira Mono"} fontSize={24} fontWeight={600} opacity={0} />
                         </Rect>
                     </Rect>
                 </Node>
@@ -90,7 +90,7 @@ export default makeScene2D(function* (view) {
         timelineContainer().opacity(1, duration),
         incomingImage().y(-150, duration),
         incomingImage().scale(0.8, duration),
-        titleText().text("std::async Execution Timeline", duration) // Animate writing the text
+        titleText().text("std::async execution timeline", duration) // Animate writing the text
     );
     yield* waitFor(0.5);
 
@@ -114,121 +114,168 @@ export default makeScene2D(function* (view) {
 
     // --- Part 2: Standard Algorithms ---
     const algoContainer = createRef<Node>();
-    const vectorBox = createRef<Rect>();
-    const algoBox = createRef<Rect>();
-    const waitingTxt = createRef<Txt>();
-    const questionTxt = createRef<Txt>();
+
+    // Components
+    const vectorBuffer = createRef<Rect>();
+    const algoBlock = createRef<Rect>();
+
+    // Texts
+    const algoStatusText = createRef<Txt>();
+    const explanationTextLine1 = createRef<Txt>();
+    const explanationTextLine2 = createRef<Txt>();
+    const streamingText = createRef<Txt>();
 
     yield view.add(
         <Node ref={algoContainer} opacity={0}>
-            <Txt text="std::vector<Image>" fill="#FFF" fontSize={32} fontWeight={600} y={-300} />
-            <Rect
-                ref={vectorBox}
-                width={800}
-                height={140}
-                radius={16}
-                stroke={'#868E96'}
-                lineWidth={4}
-                y={-200}
+            <Txt text="std::execution::par / raw TBB" fill="#4DABF7" fontSize={48} fontWeight={700} y={-350} textAlign={'center'} />
+            <Txt text="When do we begin?" fill="#ADB5BD" fontSize={28} fontWeight={600} y={-290} textAlign={'center'} />
+
+            <Layout
                 layout={true}
                 direction={'row'}
                 alignItems={'center'}
-                padding={20}
-                gap={20}
-            >
-                {/* We'll spawn images here */}
-                <Txt ref={questionTxt} text="Size: ???" fill="#868E96" fontSize={32} fontWeight={600} position={[0, 0]} isPositionedAbsolute={true} />
-            </Rect>
-
-            <Rect
-                ref={algoBox}
-                width={800}
-                height={300}
-                radius={16}
-                fill={'#343A40'}
-                stroke={'#4DABF7'}
-                lineWidth={4}
-                y={150}
-                alignItems={'center'}
                 justifyContent={'center'}
-                layout={true}
-                direction={'column'}
-                gap={20}
+                gap={80}
+                y={50}
             >
-                <Txt text="std::for_each ( std::execution::par )" fill="#4DABF7" fontSize={36} fontWeight={700} />
-                <Txt text="or raw TBB" fill="#4DABF7" fontSize={28} fontWeight={600} opacity={0.8} />
-                <Txt ref={waitingTxt} text="Waiting for all ??? images..." fill="#FFD43B" fontSize={28} fontWeight={600} marginTop={40} />
-            </Rect>
+                {/* Vector Buffer */}
+                <Layout layout={true} direction={'column'} alignItems={'center'} gap={20}>
+                    <Txt text="std::vector<Image>" fill="#FFF" fontSize={28} fontWeight={400} fontFamily={"Fira Mono"} />
+                    <Rect
+                        ref={vectorBuffer}
+                        width={300}
+                        height={400}
+                        radius={16}
+                        fill={'#2C2E33'}
+                        stroke={'#868E96'}
+                        lineWidth={4}
+                        clip={true}
+                        layout={true}
+                        direction={'column'}
+                        alignItems={'center'}
+                        justifyContent={'flex-start'}
+                        padding={20}
+                        gap={0} // Gap is 0 to fluidly animate insertion margins instead
+                    >
+                        <Txt ref={streamingText} text="Streaming in..." fill="#868E96" fontSize={24} fontWeight={600} margin={['auto', 0, 20, 0]} />
+                    </Rect>
+                </Layout>
+
+                {/* Arrow */}
+                <Txt text="➔" fill="#868E96" fontSize={64} fontWeight={700} />
+
+                {/* Algo Block */}
+                <Layout layout={true} direction={'column'} alignItems={'center'} gap={20}>
+                    <Txt text="Algorithm execution" fill="#FFF" fontSize={28} fontWeight={600} />
+                    <Rect
+                        ref={algoBlock}
+                        width={300}
+                        height={400}
+                        radius={16}
+                        fill={'#343A40'}
+                        stroke={'#495057'}
+                        lineWidth={4}
+                        layout={true}
+                        direction={'column'}
+                        alignItems={'center'}
+                        justifyContent={'center'}
+                        padding={20}
+                        gap={20}
+                    >
+                        <Txt text="⚙️" fontSize={80} opacity={0.5} />
+                        <Txt ref={algoStatusText} text="Blocked" fill="#FF6B6B" fontSize={36} fontWeight={700} />
+                        <Layout layout={true} direction={'column'} alignItems={'center'} gap={5}>
+                            <Txt ref={explanationTextLine1} text="Waiting for buffer" fill="#ADB5BD" fontSize={24} fontWeight={600} textAlign={'center'} />
+                            <Txt ref={explanationTextLine2} text="to be complete..." fill="#ADB5BD" fontSize={24} fontWeight={600} textAlign={'center'} />
+                        </Layout>
+                    </Rect>
+                </Layout>
+            </Layout>
         </Node>
     );
 
     yield* algoContainer().opacity(1, duration);
     yield* waitFor(0.5);
 
     // Stream images in
-    for (let i = 0; i < 5; i++) {
+    for (let i = 0; i < 3; i++) {
         const newImg = createRef<Rect>();
-        vectorBox().add(
+        vectorBuffer().insert(
             <Rect
                 ref={newImg}
-                width={100}
-                height={100}
-                radius={16}
+                width={200}
+                height={0} // Start at 0 height to animate insertion
+                margin={[0, 0, 0, 0]} // Start at 0 margin
+                radius={12}
                 fill={'#495057'}
                 stroke={'#ADB5BD'}
-                lineWidth={4}
+                lineWidth={2}
                 alignItems={'center'}
                 justifyContent={'center'}
                 opacity={0}
-                scale={0}
-                zIndex={10}
+                scale={0.8}
+                clip={true} // Keep text inside while height is growing
             >
-                <Txt text="🖼️" fill="#FFF" fontSize={64} />
-            </Rect>
+                <Txt text={`🖼️ Image ${i + 1}`} fill="#FFF" fontSize={32} />
+            </Rect>,
+            0
         );
 
         yield* all(
+            newImg().height(80, 0.4),
+            newImg().margin([0, 0, 10, 0], 0.4), // Fluidly add the gap
             newImg().opacity(1, 0.4),
-            newImg().scale(1, 0.4),
-            questionTxt().opacity(0, 0.4) // Hide the "Size: ???" once images start coming
+            newImg().scale(1, 0.4)
         );
-        yield* waitFor(0.3);
+        yield* waitFor(0.4);
     }
 
-    yield* waitFor(1.0);
+    yield* waitFor(0.5);
 
+    // Highlight the problem
+    explanationTextLine1().text("Images are streaming!");
+    explanationTextLine2().text("When to start processing?");
     yield* all(
-        waitingTxt().text("Still waiting... how many more?", 0.5),
-        waitingTxt().fill("#FF6B6B", 0.5)
+        algoBlock().stroke('#FF6B6B', 0.5),
+        algoBlock().shadowBlur(20, 0.5),
+        algoBlock().shadowColor('rgba(255, 107, 107, 0.3)', 0.5),
+        algoStatusText().scale(1.2, 0.5),
+        explanationTextLine1().fill("#FFF", 0.5),
+        explanationTextLine2().fill("#FFF", 0.5)
     );
 
-    yield* waitFor(1.5);
+    yield* waitFor(1.0);
 
-    // One more image arrives randomly late
-    const lateImg = createRef<Rect>();
-    vectorBox().add(
+    // Animate another image arriving while it's blocked
+    const newImg = createRef<Rect>();
+    vectorBuffer().insert(
         <Rect
-            ref={lateImg}
-            width={100}
-            height={100}
-            radius={16}
+            ref={newImg}
+            width={200}
+            height={0} // Start at 0 height
+            margin={[0, 0, 0, 0]} // Start at 0 margin
+            radius={12}
             fill={'#495057'}
             stroke={'#ADB5BD'}
-            lineWidth={4}
+            lineWidth={2}
             alignItems={'center'}
             justifyContent={'center'}
             opacity={0}
-            scale={0}
-            zIndex={10}
+            scale={0.8}
+            clip={true}
         >
-            <Txt text="🖼️" fill="#FFF" fontSize={64} />
-        </Rect>
+            <Txt text="🖼️ Image 4" fill="#FFF" fontSize={32} />
+        </Rect>,
+        0
     );
 
     yield* all(
-        lateImg().opacity(1, 0.4),
-        lateImg().scale(1, 0.4)
+        newImg().height(80, 0.4),
+        newImg().margin([0, 0, 10, 0], 0.4),
+        newImg().opacity(1, 0.4),
+        newImg().scale(1, 0.4)
     );
+
     yield* waitFor(1.5);
 
     // Fade out

lectures/parallelism.md

@@ -399,7 +399,7 @@ So now we know how to kick off long-running tasks and how to use parallel algori
 
 Not quite. Imagine instead of one huge image, like in the previous example, we receive a stream of thousands tiny images that all need their colors inverted.  
 
-Our previous approaches are not well-suited for this. The `std::async` approach is too heavy. Spawning a brand new async task for every single tiny image would be devastating to performance, as every task would need a thread, and the OS overhead of creating a thread costs more computing time than actually inverting our tiny image. At the same time, the parallel versions of standard algorithms or even using raw TBB are a poor fit too, as they would need a complete vector of images to start processing, but here our images are streaming in one by one!
+Our previous approaches are not well-suited for this. The `std::async` approach is too heavy. Spawning a brand new async task for every single tiny image would be devastating to performance, as every task would need a thread, and the OS overhead of creating a thread costs more computing time than actually inverting our tiny image. At the same time, the parallel versions of standard algorithms or even using raw TBB are a poor fit too, as they work well when we provide them a bunch of available data. But our images are streaming one by one? How many should we pass? Is 3 enough? 4? More?
 
 Instead, we can use a different paradigm that is used quite often in real life: a **thread pool** working on a **concurrent queue** that stores the data. In this paradigm, at the thread pool creation, we spawn a fixed number of threads (typically derived from the number of CPU cores we have), have them sleep in the background, and wake them up to process data from the queue, which is designed to work correctly when multiple threads read and write to it at the same time.  
 <!-- TODO: add a diagram here -->