Skip to content

Commit 0d9ccb0

Browse files
nikoschamnikoscham
committed
Add HTML examples for various simulations
1 parent df07391 commit 0d9ccb0

9 files changed

Lines changed: 435 additions & 4 deletions

File tree

‎examples/creepingFlowScript/README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ This directory contains Node.js examples demonstrating how to use the FEAScript
1111

1212
This example solves a 2D lid-driven cavity flow using the creeping flow solver with Taylor-Hood (Q2-Q1) elements. For detailed information on the model setup, refer to the corresponding [tutorial](https://feascript.com/tutorials/lid-driven-cavity-2d-creeping-flow.html) on the FEAScript website.
1313

14-
## Running the Examples
14+
## HTML Examples
15+
16+
Each example also includes an HTML variant (e.g., `lidDrivenCavity2DCreepingFlow.html`) that runs the same simulation in the browser with built-in visualization using Plotly.js. Simply open the HTML file in a web browser to run.
17+
18+
## Running the Node.js Examples
1519

1620
#### 1. Create package.json with ES module support:
1721

‎examples/creepingFlowScript/lidDrivenCavity2DCreepingFlow/lidDrivenCavity2DCreepingFlow.html‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
3+
<!--
4+
════════════════════════════════════════════════════════════════
5+
FEAScript Core Library
6+
Lightweight Finite Element Simulation in JavaScript
7+
Version: 0.2.0 | https://feascript.com
8+
MIT License © 2023–2026 FEAScript
9+
════════════════════════════════════════════════════════════════
10+
-->
11+
12+
<html>
13+
<head>
14+
<title>FEAScript Example: Lid-Driven Cavity 2D Creeping Flow</title>
15+
<meta charset="UTF-8" />
16+
<!-- Link to the CSS files -->
17+
<link href="https://feascript.com/feascript-website.css" rel="stylesheet" type="text/css" />
18+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
19+
<!-- Import the Math.js library for mathematical operations -->
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.12.0/math.min.js"></script>
21+
<!-- Import the Plotly.js library for plotting -->
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
23+
</head>
24+
25+
<body>
26+
<h2>Lid-Driven Cavity 2D Creeping Flow</h2>
27+
28+
<h3>Velocity Magnitude</h3>
29+
<div id="velocityMagnitudeCanvas"></div>
30+
31+
<h3>u-Velocity Component</h3>
32+
<div id="uVelocityCanvas"></div>
33+
34+
<h3>v-Velocity Component</h3>
35+
<div id="vVelocityCanvas"></div>
36+
37+
<script type="module">
38+
// Import FEAScript library
39+
import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
40+
// import { FEAScriptModel, plotSolution, printVersion } from "../../../src/index.js";
41+
42+
window.addEventListener("DOMContentLoaded", () => {
43+
console.log("FEAScript Version:", printVersion);
44+
45+
// Create a new FEAScript model
46+
const model = new FEAScriptModel();
47+
48+
// Select physics/PDE
49+
model.setModelConfig("creepingFlowScript");
50+
51+
// Define mesh configuration
52+
model.setMeshConfig({
53+
meshDimension: "2D",
54+
elementOrder: "quadratic",
55+
numElementsX: 12,
56+
numElementsY: 6,
57+
maxX: 4,
58+
maxY: 2,
59+
});
60+
61+
// Define boundary conditions
62+
model.addBoundaryCondition("0", ["constantVelocity", 0, 0]); // Bottom boundary
63+
model.addBoundaryCondition("1", ["constantVelocity", 0, 0]); // Left boundary
64+
model.addBoundaryCondition("2", ["constantVelocity", 1, 0]); // Top boundary
65+
model.addBoundaryCondition("3", ["constantVelocity", 0, 0]); // Right boundary
66+
67+
// Set solver method
68+
model.setSolverMethod("lusolve");
69+
70+
// Solve the problem
71+
const result = model.solve();
72+
73+
// Print results to console
74+
console.log(`Number of nodes in mesh: ${result.nodesCoordinates.nodesXCoordinates.length}`);
75+
console.log("Solution vector:", result.solutionVector);
76+
77+
// Extract velocity and pressure fields from the solution vector
78+
// DOF layout: [u₀…u_{N₂−1}, v₀…v_{N₂−1}, p₀…p_{N₁−1}]
79+
const totalNodesVelocity = model._creepingFlowMetadata.totalNodesVelocity;
80+
const solutionVector = result.solutionVector;
81+
const uVelocity = solutionVector.slice(0, totalNodesVelocity);
82+
const vVelocity = solutionVector.slice(totalNodesVelocity, 2 * totalNodesVelocity);
83+
const velocityMagnitude = uVelocity.map((u, i) => Math.sqrt(u * u + vVelocity[i] * vVelocity[i]));
84+
85+
// Plot velocity magnitude as a 2D contour plot
86+
plotSolution(
87+
model,
88+
{ solutionVector: velocityMagnitude, nodesCoordinates: result.nodesCoordinates },
89+
"contour",
90+
"velocityMagnitudeCanvas"
91+
);
92+
93+
// Plot u-velocity component as a 2D contour plot
94+
plotSolution(
95+
model,
96+
{ solutionVector: uVelocity, nodesCoordinates: result.nodesCoordinates },
97+
"contour",
98+
"uVelocityCanvas"
99+
);
100+
101+
// Plot v-velocity component as a 2D contour plot
102+
plotSolution(
103+
model,
104+
{ solutionVector: vVelocity, nodesCoordinates: result.nodesCoordinates },
105+
"contour",
106+
"vVelocityCanvas"
107+
);
108+
});
109+
</script>
110+
</body>
111+
</html>

‎examples/frontPropagationScript/README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ This directory contains Node.js examples demonstrating how to use the FEAScript
1010

1111
This example demonstrates solving an eikonal equation in a 2D domain to track the movement of a solidification interface. For detailed information on the model setup, refer to the corresponding [tutorial](https://feascript.com/tutorials/solidification-front-2d.html) in the FEAScript website.
1212

13-
## Running the Examples
13+
## HTML Examples
14+
15+
Each example also includes an HTML variant (e.g., `solidificationFront2D.html`) that runs the same simulation in the browser with built-in visualization using Plotly.js. Simply open the HTML file in a web browser to run.
16+
17+
## Running the Node.js Examples
1418

1519
#### 1. Create package.json with ES module support:
1620

‎examples/frontPropagationScript/solidificationFront2D/solidificationFront2D.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
3+
<!--
4+
════════════════════════════════════════════════════════════════
5+
FEAScript Core Library
6+
Lightweight Finite Element Simulation in JavaScript
7+
Version: 0.2.0 | https://feascript.com
8+
MIT License © 2023–2026 FEAScript
9+
════════════════════════════════════════════════════════════════
10+
-->
11+
12+
<html>
13+
<head>
14+
<title>FEAScript Example: Solidification Front 2D</title>
15+
<meta charset="UTF-8" />
16+
<!-- Link to the CSS files -->
17+
<link href="https://feascript.com/feascript-website.css" rel="stylesheet" type="text/css" />
18+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
19+
<!-- Import the Math.js library for mathematical operations -->
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.12.0/math.min.js"></script>
21+
<!-- Import the Plotly.js library for plotting -->
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
23+
</head>
24+
25+
<body>
26+
<h2>Solidification Front 2D</h2>
27+
28+
<!-- Container element where the solution plot will be rendered -->
29+
<div id="resultsCanvas"></div>
30+
31+
<script type="module">
32+
// Import FEAScript library
33+
import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
34+
// import { FEAScriptModel, plotSolution, printVersion } from "../../../src/index.js";
35+
36+
window.addEventListener("DOMContentLoaded", () => {
37+
console.log("FEAScript Version:", printVersion);
38+
39+
// Create a new FEAScript model
40+
const model = new FEAScriptModel();
41+
42+
// Select physics/PDE
43+
model.setModelConfig("frontPropagationScript");
44+
45+
// Define mesh configuration
46+
model.setMeshConfig({
47+
meshDimension: "2D",
48+
elementOrder: "quadratic",
49+
numElementsX: 12,
50+
numElementsY: 8,
51+
maxX: 4,
52+
maxY: 2,
53+
});
54+
55+
// Define boundary conditions
56+
model.addBoundaryCondition("0", ["constantValue", 0]); // Bottom boundary
57+
model.addBoundaryCondition("1", ["constantValue", 0]); // Left boundary
58+
model.addBoundaryCondition("2", ["zeroGradient"]); // Top boundary
59+
model.addBoundaryCondition("3", ["constantValue", 0]); // Right boundary
60+
61+
// Set solver method
62+
model.setSolverMethod("lusolve");
63+
64+
// Solve the problem
65+
const result = model.solve();
66+
67+
// Print results to console
68+
console.log(`Number of nodes in mesh: ${result.nodesCoordinates.nodesXCoordinates.length}`);
69+
console.log("Solution vector:", result.solutionVector);
70+
71+
// Plot the solution as a 2D contour plot
72+
plotSolution(model, result, "contour", "resultsCanvas");
73+
});
74+
</script>
75+
</body>
76+
</html>

‎examples/generalFormPDEScript/README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ This directory contains Node.js examples demonstrating how to use the FEAScript
1010

1111
This example demonstrates solving a one-dimensional advection-diffusion problem with a Gaussian source term. The problem models the transport of a substance under the effects of both diffusion and advection. For detailed information on the model setup, refer to the corresponding [tutorial](https://feascript.com/tutorials/advection-diffusion-1d.html) in the FEAScript website.
1212

13-
## Running the Examples
13+
## HTML Examples
14+
15+
Each example also includes an HTML variant (e.g., `advectionDiffusion1D.html`) that runs the same simulation in the browser with built-in visualization using Plotly.js. Simply open the HTML file in a web browser to run.
16+
17+
## Running the Node.js Examples
1418

1519
#### 1. Create package.json with ES module support:
1620

‎examples/generalFormPDEScript/advectionDiffusion1D/advectionDiffusion1D.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
3+
<!--
4+
════════════════════════════════════════════════════════════════
5+
FEAScript Core Library
6+
Lightweight Finite Element Simulation in JavaScript
7+
Version: 0.2.0 | https://feascript.com
8+
MIT License © 2023–2026 FEAScript
9+
════════════════════════════════════════════════════════════════
10+
-->
11+
12+
<html>
13+
<head>
14+
<title>FEAScript Example: Advection-Diffusion 1D</title>
15+
<meta charset="UTF-8" />
16+
<!-- Link to the CSS files -->
17+
<link href="https://feascript.com/feascript-website.css" rel="stylesheet" type="text/css" />
18+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
19+
<!-- Import the Math.js library for mathematical operations -->
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.12.0/math.min.js"></script>
21+
<!-- Import the Plotly.js library for plotting -->
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
23+
</head>
24+
25+
<body>
26+
<h2>Advection-Diffusion 1D</h2>
27+
28+
<!-- Container element where the solution plot will be rendered -->
29+
<div id="resultsCanvas"></div>
30+
31+
<script type="module">
32+
// Import FEAScript library
33+
import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
34+
// import { FEAScriptModel, plotSolution, printVersion } from "../../../src/index.js";
35+
36+
window.addEventListener("DOMContentLoaded", () => {
37+
console.log("FEAScript Version:", printVersion);
38+
39+
// Create a new FEAScript model
40+
const model = new FEAScriptModel();
41+
42+
// Select physics/PDE
43+
model.setModelConfig("generalFormPDEScript", {
44+
coefficientFunctions: {
45+
// Equation d²u/dx² - 10 du/dx = 10 * exp(-200 * (x - 0.5)²)
46+
A: (x) => 1, // Diffusion coefficient
47+
B: (x) => -10, // Advection coefficient
48+
C: (x) => 0, // Reaction coefficient
49+
D: (x) => 10 * Math.exp(-200 * Math.pow(x - 0.5, 2)), // Source term
50+
},
51+
});
52+
53+
// Define mesh configuration
54+
model.setMeshConfig({
55+
meshDimension: "1D",
56+
elementOrder: "quadratic",
57+
numElementsX: 20,
58+
maxX: 1.0,
59+
});
60+
61+
// Define boundary conditions
62+
model.addBoundaryCondition("0", ["constantValue", 1]); // Left boundary
63+
model.addBoundaryCondition("1", "zeroGradient"); // Right boundary
64+
65+
// Set solver method
66+
model.setSolverMethod("lusolve");
67+
68+
// Solve the problem
69+
const result = model.solve();
70+
71+
// Print results to console
72+
console.log(`Number of nodes in mesh: ${result.nodesCoordinates.nodesXCoordinates.length}`);
73+
console.log("Solution vector:", result.solutionVector);
74+
75+
// Plot the solution as a 1D line plot
76+
plotSolution(model, result, "line", "resultsCanvas");
77+
});
78+
</script>
79+
</body>
80+
</html>

‎examples/heatConductionScript/README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,11 @@ Implementation using a Gmsh-generated mesh for a rhomboid domain (the mesh file,
2828

2929
For detailed information on the model setup, refer to the corresponding [tutorial](https://feascript.com/tutorials/heat-conduction-2d-rhom-fin-gmsh.html) in the FEAScript website.
3030

31-
## Running the Examples
31+
## HTML Examples
32+
33+
Each example also includes an HTML variant (e.g., `heatConduction1DWall.html`, `heatConduction2DFin.html`) that runs the same simulation in the browser with built-in visualization using Plotly.js. Simply open the HTML file in a web browser to run.
34+
35+
## Running the Node.js Examples
3236

3337
#### 1. Create package.json with ES module support:
3438

‎examples/heatConductionScript/heatConduction1DWall/heatConduction1DWall.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
3+
<!--
4+
════════════════════════════════════════════════════════════════
5+
FEAScript Core Library
6+
Lightweight Finite Element Simulation in JavaScript
7+
Version: 0.2.0 | https://feascript.com
8+
MIT License © 2023–2026 FEAScript
9+
════════════════════════════════════════════════════════════════
10+
-->
11+
12+
<html>
13+
<head>
14+
<title>FEAScript Example: Heat Conduction 1D Wall</title>
15+
<meta charset="UTF-8" />
16+
<!-- Link to the CSS files -->
17+
<link href="https://feascript.com/feascript-website.css" rel="stylesheet" type="text/css" />
18+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
19+
<!-- Import the Math.js library for mathematical operations -->
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.12.0/math.min.js"></script>
21+
<!-- Import the Plotly.js library for plotting -->
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
23+
</head>
24+
25+
<body>
26+
<h2>Heat Conduction 1D Wall</h2>
27+
28+
<!-- Container element where the solution plot will be rendered -->
29+
<div id="resultsCanvas"></div>
30+
31+
<script type="module">
32+
// Import FEAScript library
33+
import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
34+
// import { FEAScriptModel, plotSolution, printVersion } from "../../../src/index.js";
35+
36+
window.addEventListener("DOMContentLoaded", () => {
37+
console.log("FEAScript Version:", printVersion);
38+
39+
// Create a new FEAScript model
40+
const model = new FEAScriptModel();
41+
42+
// Select physics/PDE
43+
model.setModelConfig("heatConductionScript");
44+
45+
// Define mesh configuration
46+
model.setMeshConfig({
47+
meshDimension: "1D",
48+
elementOrder: "linear",
49+
numElementsX: 10,
50+
maxX: 0.15,
51+
});
52+
53+
// Define boundary conditions
54+
model.addBoundaryCondition("0", ["convection", 1, 25]); // Left boundary
55+
model.addBoundaryCondition("1", ["constantTemp", 5]); // Right boundary
56+
57+
// Set solver method
58+
model.setSolverMethod("lusolve");
59+
60+
// Solve the problem
61+
const result = model.solve();
62+
63+
// Print results to console
64+
console.log(`Number of nodes: ${result.nodesCoordinates.nodesXCoordinates.length}`);
65+
console.log("Solution vector:", result.solutionVector);
66+
67+
// Plot the solution as a 1D line plot
68+
plotSolution(model, result, "line", "resultsCanvas");
69+
});
70+
</script>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)