Updated animation

Author: niosus

animation/parallelism/package-lock.json

@@ -17,7 +17,7 @@
   "devDependencies": {
     "@motion-canvas/ui": "^3.16.0",
     "@motion-canvas/vite-plugin": "^3.15.1",
-    "typescript": "^5.2.2",
+    "typescript": "^5.9.3",
     "vite": "^4.0.0"
   }
 }

animation/parallelism/package.json

@@ -325,40 +325,10 @@ public:
         std::cout << "ImageProcessor is shutting down.\\n";
     }
 
-private:
-    void ProcessImages(std::stop_token stoken, int worker_id);
-
-    std::queue<TinyImage> image_queue_;
-    std::mutex cout_mutex_; 
-    std::mutex queue_mutex_;
-    std::condition_variable_any cv_; // C++20 feature: supports stop_token seamlessly
-    std::vector<std::jthread> workers_;
-};`;
-
-    yield* all(
-        codeRef().code(jthread_2, duration),
-        codeRef().fontSize(15, duration),
-        codeRef().y(-100, duration),
-    );
-    yield* waitFor(duration);
-
-    // Focus constructor and submit
-    yield* all(
-        codeRef().selection(lines(27, 45), duration),
-        codeRef().fontSize(22, duration),
-        codeRef().y(200, duration),
-    );
-    yield* waitFor(duration);
-
-    const jthread_3 = jthread_1 + `\n
-class ImageProcessor {
-// ...
 private:
     void ProcessImages(std::stop_token stoken, int worker_id) {
-        
         while (true) {
             TinyImage img;
-            
             {
                 std::unique_lock<std::mutex> lock(queue_mutex_);
                 // Wait until there's work to do, or we are told to stop.
@@ -380,7 +350,6 @@ private:
             } // The lock is automatically released here!
             
             img.Process();
-            
             {
                 std::lock_guard<std::mutex> cout_lock(cout_mutex_);
                 std::cout << "Worker " << worker_id << " processed image " << img.id << "!\\n";
@@ -395,24 +364,38 @@ private:
     std::vector<std::jthread> workers_;
 };`;
 
+    yield* all(
+        codeRef().code(jthread_2, duration),
+        codeRef().fontSize(15, duration),
+        codeRef().y(-100, duration),
+    );
+    yield* waitFor(duration);
+
+    // Focus constructor and submit
+    yield* all(
+        codeRef().selection(lines(24, 43), duration),
+        codeRef().fontSize(22, duration),
+        codeRef().y(400, duration), // Move up to see top of block
+    );
+    yield* waitFor(duration);
+
     yield* all(
         codeRef().selection(DEFAULT, duration),
-        codeRef().fontSize(18, duration),
-        codeRef().y(-300, duration),
-        codeRef().code(jthread_3, duration),
+        codeRef().fontSize(15, duration),
+        codeRef().y(-100, duration),
     );
     yield* waitFor(duration);
 
-    // Focus on the locking and cv
+    // Focus on the locking and cv in ProcessImages
     yield* all(
-        codeRef().selection(lines(33, 51), duration),
+        codeRef().selection(lines(58, 67), duration),
         codeRef().fontSize(22, duration),
-        codeRef().y(500, duration),
+        codeRef().y(-1000, duration), // Move down to see bottom part
     );
     yield* waitFor(duration);
 
     // Wait with main
-    const jthread_4 = jthread_3 + `\n
+    const jthread_3 = jthread_2 + `\n
 int main() {
     ImageProcessor processor(4);
     
@@ -429,28 +412,28 @@ int main() {
 
     yield* all(
         codeRef().selection(DEFAULT, duration),
-        codeRef().fontSize(18, duration),
-        codeRef().y(-400, duration),
-        codeRef().code(jthread_4, duration),
+        codeRef().fontSize(15, duration),
+        codeRef().y(-500, duration),
+        codeRef().code(jthread_3, duration),
     );
     yield* waitFor(duration);
 
     yield* all(
-        codeRef().selection(lines(68, 80), duration),
+        codeRef().selection(lines(86, 97), duration),
         codeRef().fontSize(22, duration),
-        codeRef().y(450, duration),
+        codeRef().y(-1600, duration), // Scroll all the way down to main
     );
     yield* waitFor(duration);
 
-    // 5. Thread Pool C++17 Equivalent
+    // 5. Thread Pool C++17 Equivalent (Morphing from C++20)
     yield* all(
         codeRef().selection(DEFAULT, duration),
-        codeRef().fontSize(20, duration),
-        codeRef().y(0, duration),
-        codeRef().code('', duration),
+        codeRef().fontSize(15, duration),
+        codeRef().y(-400, duration),
     );
+    yield* waitFor(duration);
 
-    const cpp17_1 = `\
+    const cpp17_1 = jthread_1 + `\n
 class ImageProcessor {
 public:
     ImageProcessor(int num_workers) {
@@ -462,6 +445,14 @@ public:
         }
     }
 
+    void Submit(TinyImage img) {
+        {
+            std::lock_guard<std::mutex> lock(queue_mutex_);
+            image_queue_.push(std::move(img));
+        }
+        cv_.notify_one(); 
+    }
+
     void Shutdown() {
         {
             std::lock_guard<std::mutex> cout_lock(cout_mutex_);
@@ -487,28 +478,11 @@ public:
     ~ImageProcessor() {
         Shutdown(); // Ensure cleanup happens even if user forgets to call Shutdown
     }
-// ...
-};`;
-
-    yield* codeRef().code(cpp17_1, duration);
-    yield* waitFor(duration);
 
-    // Focus on shutdown logic
-    yield* all(
-        codeRef().selection(lines(11, 31), duration),
-        codeRef().fontSize(22, duration),
-        codeRef().y(150, duration),
-    );
-    yield* waitFor(duration);
-
-    const cpp17_2 = `\
-class ImageProcessor {
-// ...
 private:
     void ProcessImages(int worker_id) {
         while (true) {
             TinyImage img;
-            
             {
                 std::unique_lock<std::mutex> lock(queue_mutex_);
                 // Wait until there's work to do, or we are told to stop.
@@ -529,6 +503,10 @@ private:
             }
             
             img.Process();
+            {
+                std::lock_guard<std::mutex> cout_lock(cout_mutex_);
+                std::cout << "Worker " << worker_id << " processed image " << img.id << "!\\n";
+            }
         }
     }
 
@@ -538,38 +516,58 @@ private:
     std::condition_variable cv_;
     bool done_producing_ = false;
     std::vector<std::thread> workers_;
-};`;
+};\n
+int main() {
+    ImageProcessor processor(4);
+    
+    for (int i = 1; i <= 15; ++i) {
+        processor.Submit(TinyImage{i});
+    }
+
+    return 0;
+    // Destructor fires here, joining everything!
+}`;
+
+    // Morph the C++20 thread pool cleanly into the C++17 one!
+    yield* codeRef().code(cpp17_1, duration);
+    yield* waitFor(duration);
+
+    // Focus on shutdown logic
+    yield* all(
+        codeRef().selection(lines(43, 63), duration),
+        codeRef().fontSize(22, duration),
+        codeRef().y(0, duration),
+    );
+    yield* waitFor(duration);
 
     yield* all(
         codeRef().selection(DEFAULT, duration),
-        codeRef().fontSize(18, duration),
-        codeRef().y(-150, duration),
-        codeRef().code(cpp17_2, duration),
+        codeRef().fontSize(15, duration),
+        codeRef().y(-400, duration),
     );
     yield* waitFor(duration);
 
     // Focus CV condition
     yield* all(
-        codeRef().selection(lines(9, 12), duration),
+        codeRef().selection(lines(74, 77), duration),
         codeRef().fontSize(25, duration),
-        codeRef().y(300, duration),
+        codeRef().y(-600, duration),
     );
     yield* waitFor(duration);
 
     // Focus on the data members changing
     yield* all(
-        codeRef().selection(lines(30, 35), duration),
+        codeRef().selection(lines(97, 103), duration),
         codeRef().fontSize(22, duration),
-        codeRef().y(-50, duration),
+        codeRef().y(-1300, duration),
     );
     yield* waitFor(duration);
 
     // Finally wrap it out
     yield* all(
         codeRef().selection(DEFAULT, duration),
         codeRef().fontSize(20, duration),
-        codeRef().y(0, duration),
-        codeRef().code('', duration),
+        codeRef().y(-300, duration),
     );
     yield* waitFor(duration);