Updated examples

Author: niosus

.gitignore

@@ -5,3 +5,5 @@
 *.a
 *.so
 *.o
+
+**/node_modules/

animation/parallelism/src/scenes/code.tsx

@@ -11,6 +11,7 @@ import { HighlightStyle } from '@codemirror/language';
 import { parser as parser_css } from '@lezer/css';
 import { parser as parser_cpp } from '@lezer/cpp';
 
+import blockingCode from '../lectures/parallelism.md?snippet=parallelism_blocking/main.cpp';
 import asyncCode from '../lectures/parallelism.md?snippet=parallelism_async/main.cpp';
 import algorithmsCode from '../lectures/parallelism.md?snippet=parallelism_algorithms/main.cpp';
 import tbbCode from '../lectures/parallelism.md?snippet=parallelism_raw_tbb/main.cpp';
@@ -37,7 +38,6 @@ const MyStyle = HighlightStyle.define([
     { tag: tags.arithmeticOperator, color: '#D16969' }, // VSCode Arithmetic Operator color
 ]);
 
-const CssHighlighter = new LezerHighlighter(parser_css, MyStyle);
 const CppHighlighter = new LezerHighlighter(parser_cpp, MyStyle);
 
 function* centerOn(
@@ -117,20 +117,40 @@ export default makeScene2D(function* (view) {
 
     const duration = 1.0;
 
+    // 0. Blocking
+    yield* codeRef().code(blockingCode, 0);
+    yield* centerOn(codeRef(), DEFAULT, 0, 15);
+    yield* waitFor(duration);
+
+    // Focus on loading an image
+    yield* centerOn(codeRef(), lines(14, 24), duration, 30);
+    yield* waitFor(duration);
+    yield* centerOn(codeRef(), lines(21, 21), duration, 30);
+    yield* waitFor(duration);
+    yield* centerOn(codeRef(), DEFAULT, duration, 20);
+    yield* waitFor(duration);
+
     // 1. std::async Background Task
-    yield* codeRef().code(asyncCode, 0);
+    yield* codeRef().code(asyncCode, duration);
+    yield* centerOn(codeRef(), DEFAULT, duration, 15);
+    yield* waitFor(duration);
+
+    // Focus on loading an image
+    yield* centerOn(codeRef(), lines(14, 24), duration, 30);
+    yield* waitFor(duration);
+    yield* centerOn(codeRef(), lines(21, 21), duration, 30);
     yield* waitFor(duration);
 
     // Focus on std::async
-    yield* centerOn(codeRef(), lines(28, 30), duration, 25);
+    yield* centerOn(codeRef(), lines(26, 30), duration, 30);
     yield* waitFor(duration);
 
     // Focus on future polling
-    yield* centerOn(codeRef(), lines(34, 42), duration, 25);
+    yield* centerOn(codeRef(), lines(32, 42), duration, 30);
     yield* waitFor(duration);
 
     // Focus on getting
-    yield* centerOn(codeRef(), lines(45, 47), duration, 25);
+    yield* centerOn(codeRef(), lines(43, 47), duration, 30);
     yield* waitFor(duration);
 
     // 2. Parallel Algorithms

animation/parallelism/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "extends": "@motion-canvas/2d/tsconfig.project.json",
   "compilerOptions": {
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "target": "es2020",
+    "downlevelIteration": true
   },
-  "include": ["src"]
-}
+  "include": [
+    "src"
+  ]
+}

lectures/parallelism.md

@@ -39,7 +39,45 @@ With that out of the way, one of the safest way to do concurrency in modern C++
 
 If we have such a heavy task to run, we can use [`std::async`](https://en.cppreference.com/w/cpp/thread/async.html). This function takes a callable (like a [lambda](lambdas.md)) and a [launch policy](https://en.cppreference.com/w/cpp/thread/launch.html), and runs it asynchronously, potentially on a background thread. It returns a `std::future`, which is basically a promise similar to "I don't have the result now, but I will in the *future*."
 
-For the sake of example, let's say our application needs to load a massive image from disk, but we also want to keep the UI responsive and draw a progress bar:
+For the sake of example, let's say our application needs to load a massive image from disk (which we will here simulate by sleeping for 5 seconds) but we also want to keep the UI responsive and draw a loading spinner. Let's first see what happens if we just load the image on the main thread:
+
+<!--
+`CPP_SETUP_START`
+$PLACEHOLDER
+`CPP_SETUP_END`
+`CPP_COPY_SNIPPET` parallelism_blocking/main.cpp
+`CPP_RUN_CMD` CWD:parallelism_blocking c++ -std=c++17 main.cpp
+-->
+```cpp
+#include <chrono>
+#include <iostream>
+#include <string>
+#include <thread>
+
+struct Image {
+  std::string data = "massive_8k_image_data";
+};
+
+Image LoadMassiveImage() {
+  // Pretend this takes a long time to load a massive image.
+  std::this_thread::sleep_for(std::chrono::milliseconds(5000));
+  return Image{};
+}
+
+int main() {
+  std::cout << "Loading massive image..." << std::flush;
+  // 😱 The main thread is completely frozen here for 5 seconds.
+  // We can't update any UI, draw a spinner, or do anything else!
+  const Image img = LoadMassiveImage();
+  std::cout << " Done!\n";
+  std::cout << "Image loaded successfully!\n";
+  return 0;
+}
+```
+
+When we run this, the application just prints "Loading massive image..." and then hangs for 5 full seconds with no sign of life. The main thread is completely blocked. There is no way for us to draw a spinner or update any other UI element while the image is loading. To the user, the application looks frozen — and that's because it *is* frozen.
+
+Let's fix this! We can use `std::async` to kick off the heavy `LoadMassiveImage` function on a background thread, freeing the main thread to update the UI. While we're at it, let's encapsulate our spinner logic into a reusable `Spinner` class:
 
 <!--
 `CPP_SETUP_START`
@@ -50,19 +88,17 @@ $PLACEHOLDER
 -->
 ```cpp
 #include <array>
+#include <atomic>
 #include <chrono>
 #include <future>
 #include <iostream>
 #include <string>
 #include <thread>
 
 namespace {
-constexpr std::size_t kSpinnerSize = 10;
-constexpr std::chrono::milliseconds kLoadTime = std::chrono::milliseconds(5000);
-constexpr std::chrono::milliseconds kPollInterval = std::chrono::milliseconds(100);
-const std::array<std::string, kSpinnerSize> kSpinner = {
-    "⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"};
-} // namespace
+constexpr std::chrono::milliseconds kLoadTime{5000};
+constexpr std::chrono::milliseconds kSpinInterval{100};
+}  // namespace
 
 struct Image {
   std::string data = "massive_8k_image_data";
@@ -74,37 +110,64 @@ Image LoadMassiveImage() {
   return Image{};
 }
 
+class Spinner {
+ public:
+  void Start(const std::string& message) {
+    message_ = message;
+    spinning_ = true;
+    spin_thread_ = std::thread([this] { Spin(); });
+  }
+
+  void Stop(const std::string& done_message) {
+    spinning_ = false;
+    if (spin_thread_.joinable()) { spin_thread_.join(); }
+    std::cout << "\r" << done_message << "\n";
+  }
+
+ private:
+  void Spin() {
+    constexpr std::array<const char*, 10> kFrames = {
+        "⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"};
+    int idx = 0;
+    while (spinning_) {
+      std::cout << "\r" << kFrames[idx] << " " << message_ << std::flush;
+      idx = (idx + 1) % kFrames.size();
+      std::this_thread::sleep_for(kSpinInterval);
+    }
+  }
+
+  std::string message_;
+  std::atomic<bool> spinning_{false};
+  std::thread spin_thread_;
+};
+
 int main() {
   // 🚀 Kick off the heavy task in the background.
   // std::launch::async forces it to run in a new thread.
   std::future<Image> future_image =
       std::async(std::launch::async, LoadMassiveImage);
 
-  int spinner_idx = 0;
+  // ⏳ Start the spinner on the main thread while we wait.
+  Spinner spinner;
+  spinner.Start("Loading massive image...");
 
-  // ⏳ While the future is not ready, keep updating our "UI".
-  while (future_image.wait_for(kPollInterval) !=
-         std::future_status::ready) {
-    // This is our "UI" thread, which is free to do other work
-    // while the image is loading in the background.
-    std::cout << "\r" << kSpinner[spinner_idx] << " Loading massive image..."
-              << std::flush;
-    spinner_idx = (spinner_idx + 1) % kSpinner.size();
-  }
-
-  // ✅ Clear the spinner and get the result!
-  std::cout << "\r✅ Loading massive image... Done!\n";
+  // Wait for the result (blocks main thread, but the spinner
+  // keeps animating on its own thread).
   const Image img = future_image.get();
+
+  // ✅ Stop the spinner and show the result!
+  spinner.Stop("✅ Loading massive image... Done!");
   std::cout << "Image loaded successfully!\n";
   return 0;
 }
 ```
 
 Here, we do the following:
-1. We use `std::async` to start the heavy `LoadMassiveImage` function on a background thread, which returns a `std::future` that holds a promise of a result.
-2. We use `wait_for` with a short timeout to check if the task is finished without blocking the main thread. 
-3. We execute UI logic (the loading spinner in our case) in the main thread while the background thread is busy.
-4. We call `.get()` to synchronize and retrieve the final `Image` data once the task is ready.
+1. We first see that loading a massive image *without* parallelism completely freezes the main thread — no spinner, no UI updates, nothing.
+2. We fix that by using `std::async` to start the heavy `LoadMassiveImage` function on a background thread, which returns a `std::future` that holds a promise of the result.
+3. We encapsulate the spinner animation in a `Spinner` class that runs on its own thread, using `std::atomic<bool>` for thread-safe signaling.
+4. We call `.get()` on the future to wait for and retrieve the final `Image` data, while the spinner keeps animating independently.
+5. Once the image is loaded, we call `spinner.Stop()` to cleanly shut down the animation thread and display the final message.
 
 
 ### Execution Strategies (`std::launch`)