1<!doctype html> 2 3<!-- 4 * ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 5 * FEAScript Website 6 * Lightweight Finite Element Simulation in JavaScript 7 * Version: 0.3.0 (RC) | https://feascript.com 8 * CC BY 4.0 License © 2023â2026 FEAScript 9 * ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 10--> 11 12<html> 13 <head> 14 <title>FEAScript: Advection-Diffusion with a Gaussian Source Term Tutorial</title> 15 <link rel="icon" type="image/x-icon" href="../assets/favicon.ico" /> 16 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 17 <meta 18 name="description" 19 content="This example demonstrates solving a one-dimensional advection-diffusion equation with a Gaussian source term using the FEAScript library. The problem shows how to model transport phenomena with both diffusion and advection mechanisms." 20 /> 21 <meta 22 name="keywords" 23 content="finite elements, fem, galerkin, computational mechanics, javascript, advection-diffusion, transport phenomena" 24 /> 25 <meta name="viewport" content="width=device-width" /> 26 <!-- Link to the CSS files --> 27 <link href="../feascript-website.css" rel="stylesheet" type="text/css" /> 28 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" /> 29 <!-- Import the Plotly.js library for plotting --> 30
30<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
30 31 <!-- Import MathJax for writing equations --> 32
32<script 33 id="MathJax-script" 34 async 35 src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" 36 ></script>
36 37 <!-- Import the run_prettify.js library for JavaScript code coloring --> 38
38<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
38 39 <!-- Import map: remap npm bare specifiers used in FEAScript source to CDN ESM builds --> 40
40<script type="importmap"> 41 { 42 "imports": { 43 "@stdlib/blas-base-daxpy": "https://cdn.jsdelivr.net/npm/@stdlib/[email protected]/+esm", 44 "@stdlib/blas-base-dcopy": "https://cdn.jsdelivr.net/npm/@stdlib/[email protected]/+esm", 45 "@stdlib/blas-base-ddot": "https://cdn.jsdelivr.net/npm/@stdlib/[email protected]/+esm", 46 "@stdlib/blas-base-dnrm2": "https://cdn.jsdelivr.net/npm/@stdlib/[email protected]/+esm", 47 "mathjs": "https://cdn.jsdelivr.net/npm/[email protected]/+esm" 48 } 49 } 50 </script>
50 51 </head> 52 53 <!-- Google tag (gtag.js) -->
vendor: 66 bytes, lines 53-54
53 54 <script async src="https://www.googletagmanager.com/gtag/js?id=
54G-1JPK0KLEC9
vendor: 14 bytes, lines 54-55
54"></script> 55
55<script> 56
vendor: 153 bytes, lines 56-62
56window.dataLayer = window.dataLayer || []; 57 function gtag() { 58 dataLayer.push(arguments); 59 } 60 gtag("js", new Date()); 61 62 gtag("config", "
62G-1JPK0KLEC9
vendor: 6 bytes, lines 62-63
62"); 63
63</script>
63 64 65 <body> 66 <h1 class="top"> 67 <a href="../index.html"> 68 <img 69 src="../assets/feascript-logo.png" 70 alt="FEAScript Logo" 71 id="responsive-logo" 72 style="vertical-align: middle" 73 /> 74 </a> 75 <div class="social-icons-top-right"> 76 <ul> 77 <li> 78 <a href="https://blog.feascript.com/" title="FEAScript blog"> 79 <img 80 src="../assets/blog-icon-feascript.png" 81 alt="Blog icon" 82 style="height: 18px; vertical-align: middle" 83 /> 84 </a> 85 </li> 86 <li> 87 <a href="https://www.youtube.com/@FEAScript" title="FEAScript YouTube"> 88 <img 89 src="../assets/youtube-icon-feascript.svg" 90 alt="YouTube icon" 91 style="height: 18px; vertical-align: middle" 92 /> 93 </a> 94 </li> 95 <li> 96 <a href="https://www.linkedin.com/company/feascript/" title="FEAScript LinkedIn"> 97 <img 98 src="../assets/linkedin-icon-feascript.png" 99 alt="LinkedIn icon" 100 style="height: 18px; vertical-align: middle" 101 /> 102 </a> 103 </li> 104 <li> 105 <a href="https://discord.gg/3DVjNcuW4f" title="FEAScript Discord"> 106 <img 107 src="../assets/discord-icon-feascript.png" 108 alt="Discord icon" 109 style="height: 18px; vertical-align: middle" 110 /> 111 </a> 112 </li> 113 <li> 114 <a href="https://github.com/FEAScript/FEAScript-core" title="FEAScript GitHub"> 115 <img 116 src="../assets/github-icon-feascript.png" 117 alt="GitHub icon" 118 style="height: 20px; vertical-align: middle" 119 /> 120 <span 121 id="github-stars" 122 style=" 123 font-size: 0.9em; 124 margin-left: 5px; 125 vertical-align: middle; 126 border: 1px solid #ddd; 127 border-radius: 4px; 128 padding: 1px 5px; 129 background-color: #f8f8f8; 130 " 131 ></span> 132 </a> 133 </li> 134 </ul> 135 </div> 136 </h1> 137 <h1>Advection-Diffusion with a Gaussian Source Term Tutorial</h1> 138 139 <ul id="menu"> 140 <li><a href="#mathematicalformulation">Mathematical Formulation</a></li> 141 <li><a href="#solvingwithfeascript">Solving with FEAScript</a></li> 142 <li><a href="#results">Results</a></li> 143 </ul> 144 145 <div class="highlight-container"> 146 <p> 147 In this tutorial, we address an advection-diffusion problem in a one-dimensional domain with a 148 Gaussian source term. This is a fundamental transport phenomenon that occurs in many fields including 149 fluid dynamics, heat transfer, and contaminant transport, where both diffusion and advection 150 mechanisms are important. 151 </p> 152 </div> 153 154 <h2 id="mathematicalformulation"><a name="Mathematical formulation"></a>Mathematical Formulation</h2> 155 <p> 156 The advection-diffusion equation is a partial differential equation that describes physical phenomena 157 where particles, energy, or other physical quantities are transferred inside a physical system due to 158 two processes: diffusion and advection. In one dimension, the steady-state equation is given by: 159 </p> 160 <p>\(\frac{d^2u}{dx^2} - 10 \frac{du}{dx} = 10 \cdot e^{-200 \cdot (x - 0.5)^2}\)</p> 161 <p> 162 This can be rewritten in the general form: \(\frac{d}{dx}\left(A(x)\frac{du}{dx}\right) + 163 B(x)\frac{du}{dx} + C(x)u = D(x)\) 164 </p> 165 <p>Where for our specific problem:</p> 166 <ul> 167 <li>\(A(x) = 1\) (diffusion coefficient)</li> 168 <li>\(B(x) = -10\) (advection coefficient)</li> 169 <li>\(C(x) = 0\) (no reaction term)</li> 170 <li>\(D(x) = 10 \cdot e^{-200 \cdot (x - 0.5)^2}\) (Gaussian source term centered at x = 0.5)</li> 171 </ul> 172 173 <p> 174 We apply Dirichlet boundary condition at the left end: \(u(0) = 1\) and Neumann boundary condition (zero 175 gradient) at the right end: \(\frac{du}{dx}(1) = 0\). These conditions represent a fixed concentration 176 at the inlet and free outflow at the outlet of our domain. The Gaussian source term acts as a localized 177 input at the center of the domain. The balance between diffusion (spreading) and advection (directed 178 transport) will determine how the solution behaves. 179 </p> 180 181 <h2 id="solvingwithfeascript"><a name="Solving with FEAScript"></a>Solving with FEAScript</h2> 182 <p> 183 Below is a demonstration of how to use the FEAScript library to solve this advection-diffusion problem 184 in your web browser. You only need a simple HTML page to run this example where the following code 185 snippets should be included. First, load the required external libraries: 186 </p> 187 <pre class="prettyprint"> 188<head> 189 <!-- ...head region... --> 190 <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script> 191 <!-- ...rest of head region... --> 192</head></pre 193 > 194 <p> 195 We should then define the problem parameters, such as the solver type, the geometry configuration, and 196 the boundary conditions. This is performed using JavaScript objects directly in the HTML file: 197 </p> 198 <pre class="prettyprint"> 199<body> 200 <!-- ...body region... --> 201 <script type="module"> 202 // Import FEAScript library 203 import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js"; 204 205 window.addEventListener("DOMContentLoaded", (event) => { 206 // Print FEAScript version in the console 207 printVersion(); 208 209 // Create and configure model 210 const model = new FEAScriptModel(); 211 model.setModelConfig("generalFormPDEScript", { 212 coefficientFunctions: { 213 // Equation d²u/dx² - 10 du/dx = 10 * exp(-200 * (x - 0.5)²) 214 A: (x) => 1, // Diffusion coefficient 215 B: (x) => -10, // Advection coefficient 216 C: (x) => 0, // Reaction coefficient 217 D: (x) => 10 * Math.exp(-200 * Math.pow(x - 0.5, 2)), // Source term 218 }, 219 }); 220 221 // Define mesh configuration 222 model.setMeshConfig({ 223 meshDimension: "1D", 224 elementOrder: "quadratic", 225 numElementsX: 20, 226 maxX: 1.0, 227 }); 228 229 // Define boundary conditions 230 model.addBoundaryCondition("0", ["constantValue", 1]); // Left boundary 231 model.addBoundaryCondition("1", "zeroGradient"); // Right boundary 232 233 // Solve 234 model.setSolverMethod("lusolve"); 235 const result = model.solve(); 236 237 // Plot results 238 plotSolution(model, result, "line", "resultsCanvas"); 239 }); 240 </script> 241 <!-- ...rest of body region... --> 242</body></pre 243 > 244 245 <p> 246 After solving the case, the results appear as a line plot. To visualize it, include an HTML container 247 where the plot will render: 248 </p> 249 <pre class="prettyprint"> 250<body> 251 <!-- ...body region... --> 252 <div id="resultsCanvas"></div> 253 <!-- ...rest of body region... --> 254</body></pre 255 > 256 <p> 257 The <code>"resultsCanvas"</code> is the id of the div where the plot will be rendered. This id is passed 258 as an argument to the <code>plotSolution</code> function to specify the target div for the plot. 259 </p> 260 261 <!-- Container element where the solution plot will be rendered --> 262 <h2 id="results"><a name="Results"></a>Results</h2> 263 264 <p> 265 Below is the 1D line plot of the computed solution to the advection-diffusion equation. This plot is
266 generated in real time using FEAScript. You can find a Node.js implementation of this tutorial in the 267 <a 268 href="https://github.com/FEAScript/FEAScript-core/tree/main/examples/generalFormPDEScript/advectionDiffusion1D" 269 >example directory</a 270 >. 271 </p> 272 273 <div id="resultsCanvas"></div> 274 275 <p> 276 The solution shows the characteristic behavior of advection-diffusion problems. The magnitude and spread 277 of the solution are determined by the balance between diffusion and advection. 278 </p> 279 280 <ul id="menu"> 281 <li><a href="https://feascript.com/index.html">Home</a></li> 282 <li><a href="https://feascript.com/#tutorials">All Tutorials</a></li> 283 </ul> 284 285
285<script type="module"> 286 // Import FEAScript library from GitHub 287 import { 288 FEAScriptModel, 289 plotSolution, 290 printVersion, 291 } from "https://core.feascript.com/dist/feascript.esm.js"; 292 // Import FEAScript library from a local directory 293 // import { FEAScriptModel, plotSolution, printVersion } from "../../FEAScript-core/src/index.js"; 294 295 window.addEventListener("DOMContentLoaded", () => { 296 // Print FEAScript version 297 console.log("FEAScript version:", printVersion); 298 299 // Create a new FEAScript model 300 const model = new FEAScriptModel(); 301 302 // Set solver configuration with coefficient functions 303 model.setModelConfig("generalFormPDEScript", { 304 coefficientFunctions: { 305 // Equation d²u/dx² - 10 du/dx = 10 * exp(-200 * (x - 0.5)²) 306 A: (x) => 1, // Diffusion coefficient 307 B: (x) => -10, // Advection coefficient 308 C: (x) => 0, // Reaction coefficient 309 D: (x) => 10 * Math.exp(-200 * Math.pow(x - 0.5, 2)), // Source term 310 }, 311 }); 312 313 // Define mesh configuration 314 model.setMeshConfig({ 315 meshDimension: "1D", 316 elementOrder: "quadratic", 317 numElementsX: 20, 318 maxX: 1.0, 319 }); 320 321 // Define boundary conditions 322 model.addBoundaryCondition("0", ["constantValue", 1]); // Left boundary, u(0) = 1 323 model.addBoundaryCondition("1", "zeroGradient"); // Right boundary, zero gradient (du/dx = 0) 324 325 // Set solver method 326 model.setSolverMethod("lusolve"); 327 328 // Solve the problem and get the solution 329 const result = model.solve(); 330 331 // Plot the solution as a 1D line plot 332 plotSolution(model, result, "line", "resultsCanvas"); 333 }); 334 </script>
334 335 336 <footer> 337 <p> 338 Contact: 339 <a href="mailto:[email protected]">[email protected]</a> 340 </p> 341 <p>© 2023-<span id="currentYear"></span> FEAScript</p> 342 </footer> 343
343<script> 344 document.getElementById("currentYear").innerHTML = new Date().getFullYear(); 345 346 // Fetch GitHub stars 347 fetch("https://api.github.com/repos/FEAScript/FEAScript-core") 348 .then((response) => response.json()) 349 .then((data) => { 350 const starCount = data.stargazers_count; 351 const starsElement = document.getElementById("github-stars"); 352 if (starsElement && starCount) { 353 starsElement.innerHTML = `â ${starCount}`; 354 } 355 }) 356 .catch((error) => console.error("Error fetching GitHub stars:", error)); 357 </script>
357 358 </body> 359</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.