CFD Online Logo CFD Online URL
www.cfd-online.com
[Sponsors]
Home > Forums > General Forums > Main CFD Forum

Introducing FEAScript: A JavaScript FEM Library

Register Blogs Members List Search Today's Posts Mark Forums Read

Like Tree1Likes
  • 1 Post By andy_

Reply
 
LinkBack Thread Tools Search this Thread Display Modes
Old   November 26, 2024, 07:19
Default Introducing FEAScript: A JavaScript FEM Library
  #1
Member
 
Nikos
Join Date: Aug 2012
Location: Greece
Posts: 30
Rep Power: 14
nikoscham is on a distinguished road
Hello everyone,

I’d like to share with you my project, FEAScript (Website | GitHub). FEAScript is a finite element simulation library written entirely in JavaScript. My aim with FEAScript is to make FEM simulations accessible directly from the browser, empowering users with minimal setup requirements. If you have basic programming skills and a browser, you’re ready to start experimenting!

Current Capabilities
FEAScript is still in its early stages of development, but it already provides:
- Solid heat conduction analysis: Solve steady-state heat conduction problems
- Visualization: Results can be visualized using plotly
- Documentation: Currently limited to a brief overview of FEM theory
You can explore example tutorials on the FEAScript website. For instance, check out this simulation of heat conduction in a 2D fin.

What’s Next?
As FEAScript evolves, I aim to:
- Add support for other physics (e.g., fluid flow, structural mechanics).
- Incorporate more numerical techniques and mesh generation tools (e.g., elliptic mesh generation capabilities)
- Improve API usability for easier integration with other tools.

If you find this project useful or promising, please consider giving it a ⭐ on GitHub. Your support helps increase the project’s visibility and attract collaborators. I’m also eager to hear your feedback, feature ideas, or suggestions for improvement.

I’ll keep this thread updated with new developments. Feel free to share your thoughts or reach out if you’d like to collaborate.

Looking forward to your feedback,
Nikos Chamakos

Last edited by nikoscham; December 4, 2024 at 04:10.
nikoscham is offline   Reply With Quote

Old   November 26, 2024, 12:20
Default
  #2
Senior Member
 
andy
Join Date: May 2009
Posts: 347
Rep Power: 18
andy_ is on a distinguished road
Quote:
Originally Posted by nikoscham View Post
I’m also eager to hear your feedback, feature ideas, or suggestions for improvement.

I’ll keep this thread updated with new developments. Feel free to share your thoughts or reach out if you’d like to collaborate.
It's good to see people having a go at different things but I am struggling to see advantages in the approach. An interactive web front end and back-end solver is fairly common and can be an appropriate solution in some circumstances but your approach is to do everything in the front-end?

Is the end result intended to be a webpage displaying the results? If the user wishes to change the input to specify a different problem they edit some json files and post them to the web somewhere to be picked up and processed by javascript in the browser? What is the advantage compared to solving and creating the plot locally and then posting it to a webpage. Not saying there aren't advantages just that I can't see them given the latter is fairly well developed these days.
andy_ is offline   Reply With Quote

Old   November 26, 2024, 15:42
Default
  #3
Member
 
Nikos
Join Date: Aug 2012
Location: Greece
Posts: 30
Rep Power: 14
nikoscham is on a distinguished road
Quote:
Originally Posted by andy_ View Post
It's good to see people having a go at different things but I am struggling to see advantages in the approach. An interactive web front end and back-end solver is fairly common and can be an appropriate solution in some circumstances but your approach is to do everything in the front-end?

Is the end result intended to be a webpage displaying the results? If the user wishes to change the input to specify a different problem they edit some json files and post them to the web somewhere to be picked up and processed by javascript in the browser? What is the advantage compared to solving and creating the plot locally and then posting it to a webpage. Not saying there aren't advantages just that I can't see them given the latter is fairly well developed these days.

Thank you for your feedback and for taking the time to engage with my project! You’ve raised some interesting points, and I’d be happy to elaborate on the advantages of FEAScript’s approach.

FEAScript is designed to run entirely in the front end for a few key reasons:

1. Minimal setup
Users don’t need to install back-end solvers, configure environments, or manage dependencies. All they need is a browser to start experimenting.

2. Educational tool
Educators can embed simulations in online courses or tutorials as simple URLs. Imagine a "JSFiddle" for finite elements. Users can tweak parameters and instantly see the results, encouraging interactive learning.

3. Offline capability
Unlike many server-side, or cloud based solutions, FEAScript can work offline once loaded in the browser, making it convenient for quick testing or use in environments with limited connectivity.

You’re absolutely right that traditional client-server approaches are well-developed and remain powerful for large-scale or complex simulations. However, FEAScript is targeting accessible lightweight and interactive FEM rather than replacing established tools for high-performance computations.

Thanks again for your input. I really appreciate it! If you have additional thoughts or suggestions, I’d love to hear them.

Best regards,
Nikos
nikoscham is offline   Reply With Quote

Old   November 27, 2024, 05:25
Default
  #4
Senior Member
 
andy
Join Date: May 2009
Posts: 347
Rep Power: 18
andy_ is on a distinguished road
Quote:
Originally Posted by nikoscham View Post
I really appreciate it! If you have additional thoughts or suggestions, I’d love to hear them.
OK so is the idea more like educators authoring dynamic teaching web pages using something like quarto + observable (or equivalents) with the JS cells calling functions in your FEAScript js library. This might not be quite right though because it doesn't seem to involve json files and html? Unlike JSFiddle your example web page doesn't seem to be dynamic which I think is why I am struggling to work out the "spec" of what is being proposed.

Playing devils advocate, how would your proposed library improve on/differ from taking one of the zillions of exisinting FEA libraries, running it through empscripten and writing a few JS patches?
andy_ is offline   Reply With Quote

Old   November 27, 2024, 07:03
Default
  #5
Member
 
Nikos
Join Date: Aug 2012
Location: Greece
Posts: 30
Rep Power: 14
nikoscham is on a distinguished road
Quote:
Originally Posted by andy_ View Post
OK so is the idea more like educators authoring dynamic teaching web pages using something like quarto + observable (or equivalents) with the JS cells calling functions in your FEAScript js library. This might not be quite right though because it doesn't seem to involve json files and html? Unlike JSFiddle your example web page doesn't seem to be dynamic which I think is why I am struggling to work out the "spec" of what is being proposed.

Playing devils advocate, how would your proposed library improve on/differ from taking one of the zillions of exisinting FEA libraries, running it through empscripten and writing a few JS patches?
Thank you for your questions Andy. Let me answer:
FEAScript is indeed dynamic. You can try it yourself:
Go to the example case here. Save the HTML and the JSON files to your computer. Open the HTML, modify the JSON, refresh the page and see the updated results. You can modify e.g. the boundary conditions, the domain dimensions, the number of elements etc.

I want to clarify that hosting JSON files online is just one way to define inputs. You can also store the JSON files locally (along with the FEAScript library itself if you want) after enabling cross-origin resource sharing (CORS).

Regarding the Emscripten, according to my knowledge, no major FEA library has been successfully compiled to Wasm yet with full functionality. Compiling such complex software (such as Calculix for example) is theoretically possible, but challenges include extensive dependencies, file operations and performance limitations since threading, and hardware acceleration in general, may not be easily supported. On the other hand, FEAScript can provide a simpler and native solution for lightweight FEA applications directly in the browser. Additionally, a potential future enhancement could involve writing high-performance parts of FEAScript in Wasm, such as the linear system solvers, to improve efficiency where needed.

Best regards,
Nikos
nikoscham is offline   Reply With Quote

Old   November 27, 2024, 07:48
Default
  #6
Member
 
Nikos
Join Date: Aug 2012
Location: Greece
Posts: 30
Rep Power: 14
nikoscham is on a distinguished road
I've also included the 2D heat conduction example files from the GitHub repository in the attached zip file. This will allow everyone to easily run it.


Best regards,
Nikos

Update as of December 2024: The example attached here is now outdated. You can download the updated example files from the following URL: https://github.com/FEAScript/FEAScri...onduction2DFin
Attached Files
File Type: zip FEAScriptExampleSolidHeatTransfer01.zip (2.2 KB, 2 views)

Last edited by nikoscham; December 4, 2024 at 04:14.
nikoscham is offline   Reply With Quote

Old   November 27, 2024, 12:38
Default
  #7
Senior Member
 
andy
Join Date: May 2009
Posts: 347
Rep Power: 18
andy_ is on a distinguished road
Quote:
Originally Posted by nikoscham View Post
You can also store the JSON files locally (along with the FEAScript library itself if you want) after enabling cross-origin resource sharing (CORS).
People wanting to run FEA locally don't need to pickup the issues that come with using a browser and javascript. They can just run FEA packages normally, efficiently and flexibily using GUIs, matlab/python scripts, notebooks or whatever. If your approach is to be useful I suspect it will involve people authoring dynamic online FEA web pages where the author considers your javascript FEM library to be sufficient compared to picking up the task of getting a backend running, using web assembly or the like.

If it was my project I would consider replacing editing json files (a data exchange format) with javascript (a scripting language) or possibly a gui. I would also consider making the posted examples dynamic rather than hoping users will download the files and install firefox in order to run the example (which worked). Unless github doesn't want this?
andy_ is offline   Reply With Quote

Old   November 27, 2024, 14:13
Default
  #8
Member
 
Nikos
Join Date: Aug 2012
Location: Greece
Posts: 30
Rep Power: 14
nikoscham is on a distinguished road
Initially, I would like to thank you for running the example and providing feedback that it worked!

Quote:
Originally Posted by andy_ View Post
People wanting to run FEA locally don't need to pickup the issues that come with using a browser and javascript. They can just run FEA packages normally, efficiently and flexibily using GUIs, matlab/python scripts, notebooks or whatever.
Imagine a situation where you want to run simulations but don’t have administrative rights on your work's computer. Every time you need to install software, apply an update, or even add a Python library, you have to open a ticket with IT, wait for their response, and then for them to install it for you. This is my case. Wouldn't it be useful to have a FEM library that doesn’t require any installation? Since all operating systems come with a browser, you could run simulations directly and even build web applications for your customers, if needed. Doesn’t that sound practical? Of course, I’m not suggesting that MATLAB, Python scripts, notebooks, or other tools aren’t useful - they’re incredibly valuable. However, FEAScript can be an additional solution for situations like the one I’ve described.

Quote:
Originally Posted by andy_ View Post
If your approach is to be useful I suspect it will involve people authoring dynamic online FEA web pages where the author considers your javascript FEM library to be sufficient compared to picking up the task of getting a backend running, using web assembly or the like.
Yes, dynamic online FEA web-pages could indeed become a major use case for FEAScript.

Quote:
Originally Posted by andy_ View Post
If it was my project I would consider replacing editing json files (a data exchange format) with javascript (a scripting language) or possibly a gui.
Initially, I started with a pure JavaScript approach that didn’t rely on any input files. However, I wanted to clearly separate user input from the JavaScript library. The current approach uses pre-made HTML and JSON files, allowing users to quickly get started and run simulations with minimal setup. I also foresee scenarios where users may need to provide entire geometries or meshes. In such cases, relying solely on a JavaScript workflow would be impractical, as structured input formats like JSON are much better suited for managing complex data. While incorporating a JavaScript-only workflow remains an option, it would likely be limited to simpler simulation cases. A GUI is on my roadmap for the future, but for now, my primary focus is on building and refining the core library.

Quote:
Originally Posted by andy_ View Post
I would also consider making the posted examples dynamic rather than hoping users will download the files and install firefox in order to run the example (which worked). Unless github doesn't want this?
I assume by "dynamic," you mean adding elements like buttons, sliders, and other interactive components. I chose not to make the examples dynamic because that would limit the library's capabilities. I envision FEAScript as a versatile toolkit that allows users to create whatever they need, whether that’s a web application or something different. Making the examples dynamic with buttons etc (and thus tailored to a single case or style) would, in my opinion, restrict user flexibility. Until a GUI is developed, I prefer to provide these minimal examples to keep things straightforward while still showcasing the library's potential.

As for Firefox I mentioned Firefox simply because it’s the browser I use, but you can use any browser you prefer! Instructions for enabling CORS can easily be found online for all major browsers (e.g. for Chrome, Edge, Safari). Also you can use an extension that simplifies the process. Many extensions are available for all major browsers. To clarify, these settings are only necessary when the JSON files are stored locally. If you host the JSON files online, you can run the examples on virtually any platform with a browser - I have run FEAScript on my smart TV .

Best regards,
Nikos

Last edited by nikoscham; November 28, 2024 at 02:26.
nikoscham is offline   Reply With Quote

Old   November 28, 2024, 05:19
Default
  #9
Senior Member
 
andy
Join Date: May 2009
Posts: 347
Rep Power: 18
andy_ is on a distinguished road
Quote:
Originally Posted by nikoscham View Post
Wouldn't it be useful to have a FEM library that doesn’t require any installation?
Not really given the investment in time and knowledge required to use FEM libraries.

Quote:
Originally Posted by nikoscham View Post
Since all operating systems come with a browser, you could run simulations directly and even build web applications for your customers, if needed. Doesn’t that sound practical?
Not really given the subject is an FEM library rather than, say, a plotting library.

Quote:
Originally Posted by nikoscham View Post
Yes, dynamic online FEA web-pages could indeed become a major use case for FEAScript.
Not sure about the major but it is a case where an online javascript FEM library might have an advantage to offset the disadvantages compared to existing FEM libraries.

Quote:
Originally Posted by nikoscham View Post
Initially, I started with a pure JavaScript approach that didn’t rely on any input files. However, I wanted to clearly separate user input from the JavaScript library. The current approach uses pre-made HTML and JSON files, allowing users to quickly get started and run simulations with minimal setup. I also foresee scenarios where users may need to provide entire geometries or meshes. In such cases, relying solely on a JavaScript workflow would be impractical, as structured input formats like JSON are much better suited for managing complex data. While incorporating a JavaScript-only workflow remains an option, it would likely be limited to simpler simulation cases. A GUI is on my roadmap for the future, but for now, my primary focus is on building and refining the core library.
Asking users to edit data format files rather than scripts and/or GUIs is making their life difficult for no good reason. This doesn't mean json can't be used to store data just that it is generally a poor idea to use it as user input. Perhaps look at how a project like threejs handles meshes for guidance given this is close to what you are looking to do.

Quote:
Originally Posted by nikoscham View Post
I assume by "dynamic," you mean adding elements like buttons, sliders, and other interactive components.
No. I expected changing a 4 to a 6 in the user input section on the web page to regenerate the plot either instantly, after a refresh or after a pressing a recalculate button. Instead the user is required to copy files to their computer, edit data format files, change permissions in their browser and point their browser at files on their computer. I wouldn't be surprised if I am only the only person who has taken the trouble to do this given the (unnecessary?) effort

Quote:
Originally Posted by nikoscham View Post
I prefer to provide these minimal examples to keep things straightforward while still showcasing the library's potential.
But you aren't showcasing the potential if a user changes a 4 to a 6 and nothing happens. The majority are likely to leave at this point because this kind of behaviour is normal and expected from an online javascript engine. It certainly baffled me for a while but perhaps that doesn't mean much. Expectations are likely to be different for an offline javascript library.

Quote:
Originally Posted by nikoscham View Post
As for Firefox I mentioned Firefox simply because it’s the browser I use, but you can use any browser you prefer!
You gave instructions for firefox. I judged it quicker to install firefox and follow your recipe than read up on how to change the settings for my browser given I have no interest in learning about the details of browser security settings. Installing local browsers and FEM packages is a non-issue for most people with an interest in FEM libraries.
nikoscham likes this.
andy_ is offline   Reply With Quote

Old   November 28, 2024, 11:41
Default
  #10
Member
 
Nikos
Join Date: Aug 2012
Location: Greece
Posts: 30
Rep Power: 14
nikoscham is on a distinguished road
Quote:
Originally Posted by andy_ View Post
Not really given the investment in time and knowledge required to use FEM libraries.



Not really given the subject is an FEM library rather than, say, a plotting library.



Not sure about the major but it is a case where an online javascript FEM library might have an advantage to offset the disadvantages compared to existing FEM libraries.



Asking users to edit data format files rather than scripts and/or GUIs is making their life difficult for no good reason. This doesn't mean json can't be used to store data just that it is generally a poor idea to use it as user input. Perhaps look at how a project like threejs handles meshes for guidance given this is close to what you are looking to do.



No. I expected changing a 4 to a 6 in the user input section on the web page to regenerate the plot either instantly, after a refresh or after a pressing a recalculate button. Instead the user is required to copy files to their computer, edit data format files, change permissions in their browser and point their browser at files on their computer. I wouldn't be surprised if I am only the only person who has taken the trouble to do this given the (unnecessary?) effort



But you aren't showcasing the potential if a user changes a 4 to a 6 and nothing happens. The majority are likely to leave at this point because this kind of behaviour is normal and expected from an online javascript engine. It certainly baffled me for a while but perhaps that doesn't mean much. Expectations are likely to be different for an offline javascript library.



You gave instructions for firefox. I judged it quicker to install firefox and follow your recipe than read up on how to change the settings for my browser given I have no interest in learning about the details of browser security settings. Installing local browsers and FEM packages is a non-issue for most people with an interest in FEM libraries.

Initially I want to thank you for your time and feedback. I really appreciate it!



The main concern you raised is the JSON input format. After giving this more thought, I must admit you are right. JSON might not be the a user-friendly format. Based on your feedback and further investigation, I’ve decided to shift to JavaScript workflow, i.e. offering a JavaScript API that allows users to directly interact with the library's functions. I believe this approach will significantly improve usability. Now, it’s time to dive into coding!


Best regards,
Nikos
nikoscham is offline   Reply With Quote

Old   December 4, 2024, 14:55
Default
  #11
Member
 
Nikos
Join Date: Aug 2012
Location: Greece
Posts: 30
Rep Power: 14
nikoscham is on a distinguished road
Quote:
Originally Posted by andy_ View Post
Asking users to edit data format files rather than scripts and/or GUIs is making their life difficult for no good reason. This doesn't mean json can't be used to store data just that it is generally a poor idea to use it as user input. Perhaps look at how a project like threejs handles meshes for guidance given this is close to what you are looking to do.
Hi Andy,

Thank you again for your valuable feedback. I have transformed the library to support a JavaScript API workflow. This should eliminate the previous issues with JSON input format and provide a more interactive and user-friendly experience. Here’s a live example to demonstrate the new functionality. You can now directly edit the script in the browser without needing to handle separate files or browser configurations. You can modify the elementOrder (linear or quadratic), numElementsX, numElementsY, maxX, maxY as well as the boundary conditions.

FEAScript alpha version is on its way (I hope) soon!

Best regards,
Nikos
nikoscham is offline   Reply With Quote

Old   December 5, 2024, 06:34
Default
  #12
Senior Member
 
andy
Join Date: May 2009
Posts: 347
Rep Power: 18
andy_ is on a distinguished road
Quote:
Originally Posted by nikoscham View Post
I have transformed the library to support a JavaScript API workflow. This should eliminate the previous issues with JSON input format and provide a more interactive and user-friendly experience. Here’s a live example to demonstrate the new functionality. You can now directly edit the script in the browser without needing to handle separate files or browser configurations. You can modify the elementOrder (linear or quadratic), numElementsX, numElementsY, maxX, maxY as well as the boundary conditions.
Not sure my point got across. What was expected was that the web page would either present a gui with the input parameters (i.e. a dynamic web page) or a box containing a small script assigning the input numbers to variables (e.g. python/js/... notebooks). Changing the input values on the web page would redraw the output plot on the web page instantly, after a refresh of the web page or clicking an update button.

The reason is that writing numerical solvers in something other than Fortran, C and perhaps C++ depending on the amount boilerplate is generally a poor idea because the support (e.g. BLAS, MPI, OpenMP, etc...) is weak and the program will run slowly which matters for numerical solvers in the way it doesn't for many other tasks performed on a computer.

On the other hand writing the pre/post processing in Fortran, C and C++ can be a poor choice given the higher level support and libraries available in other languages. For a few smaller cases it may sometimes make sense for the tail to wag the dog and shift the solver into pre/post processing. In the case of a javascript FE solver the only reasonable usage case I can see is interactive web pages containing small teaching examples. Personally I wouldn't write a javascript solver to address this and instead woutld either use a backend to an existing solver or transpile an existing solver. Nonetheless if a proven js FE solver existed I can see a few people authoring material to support the teaching of FEA possibly using it. I cannot see it being used as a local app like vscode because it will be slow and bloated in comparison with the many existing FEA solvers. I could be wrong though because what is technically reasonable in terms of code is only a part of what can lead to success.
andy_ is offline   Reply With Quote

Reply

Tags
fem, finite elements, galerkin method, javascript, simulation

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are On


Similar Threads
Thread Thread Starter Forum Replies Last Post
Introducing the combined Poisson-Boltzmann-Ohmic Library for rheoTool in OpenFOAM saicharan662000@gmail.com OpenFOAM Running, Solving & CFD 0 August 13, 2024 12:53
Rheolef, a free C++ FEM library for solving PDE : version 6.0 is out ! saramito Main CFD Forum 1 February 22, 2019 01:11
decomposePar is missing a library whk1992 OpenFOAM Pre-Processing 8 March 7, 2015 07:53
Rheolef 6.2: an efficient FEM C++ finite element library for solving PDE saramito Main CFD Forum 0 July 2, 2012 10:58
Rheolef 6.1: an efficient FEM C++ finite element library for solving PDE saramito Main CFD Forum 0 May 17, 2012 03:01


All times are GMT -4. The time now is 12:25.