Overview

Creeping flow in a 2D lid-driven cavity, multi-threaded.

This page demonstrates solving the 2D lid-driven cavity problem using FEAScript in a web worker for improved browser responsiveness. For the mathematical formulation and theory, see the basic tutorial.

Web Worker implementation

The code below shows how to use FEAScript with a web worker. The velocity field is decomposed and plotted as contour plots.

<body>
  <!-- ...body region... -->
  <script type="module">
    import {
      FEAScriptWorker,
      plotSolution,
      printVersion,
    } from "https://core.feascript.com/src/index.js";

    window.addEventListener("DOMContentLoaded", async () => {
      console.log("FEAScript version:", printVersion);

      // 1. Create the model in a web worker and select the physics
      const model = new FEAScriptWorker();
      await model.ping(); // Wait until the worker is ready
      await model.setModelConfig("creepingFlowScript", {
        coefficientFunctions: {
          viscosity: 1, // μ
        },
      });

      // 2. Define the mesh (creeping flow needs quadratic elements)
      await model.setMeshConfig({
        meshDimension: "2D",
        elementOrder: "quadratic",
        numElementsX: 12,
        numElementsY: 6,
        maxX: 4,
        maxY: 2,
      });

      // 3. Apply the boundary conditions
      await model.addBoundaryCondition("0", ["constantVelocity", 0, 0]); // Bottom wall
      await model.addBoundaryCondition("1", ["constantVelocity", 0, 0]); // Left wall
      await model.addBoundaryCondition("2", ["constantVelocity", 1, 0]); // Moving lid
      await model.addBoundaryCondition("3", ["constantVelocity", 0, 0]); // Right wall

      // 4. Solve
      await model.setSolverMethod("lusolve");
      const result = await model.solve();

      // 5. Plot the results
      const modelInfo = await model.getModelInfo();
      plotSolution(modelInfo, result, "contour", "velocityMagnitudeCanvas");
      plotSolution(modelInfo, result, "contour", "uVelocityCanvas", { field: "u" });
      plotSolution(modelInfo, result, "contour", "vVelocityCanvas", { field: "v" });

      // 6. Terminate the worker
      model.terminate();
    });
  </script>
  <!-- ...rest of body region... -->
</body>

Results

Below are the 2D contour plots of the computed velocity magnitude \(|\mathbf{u}| = \sqrt{u^2+v^2}\), horizontal velocity component \(u\), and vertical velocity component \(v\). These plots are generated in real time using FEAScript.

Solving...

Velocity magnitude

Horizontal velocity (\(u\))

Vertical velocity (\(v\))

Stay in the loop

Join the mailing list.

Receive new tutorials, project updates and news.