Read More‎ > ‎

Finite Element Method Simulation Running in the Browser and Uses Device Orientation


The example application demonstrates the implementation of a minimal Finite Element Method (FEM) Simulation running in a web browser and uses device orientation signals. This works on mobile devices (see Figure 1 and 2).  You may find the application under http://mobile-fem-example.appspot.comThe implementation is based on paper.js and Google Web Toolkit. It has been developed with GWT 2.5 and App Engine SDK 1.7.3. It's tested with Chrome Browser under iOS and Android.

Expected Result

Mobile Browser

Web applications on different mobile devices with different browsers are a real mess. There are dozens of different layouts and case differentiation needed.  In this case the device orientation is quite easy. Especially on Android every browser behaves a little bit different. 

 Figure 1: Chrome Android
 Figure 2: Chrome iOS

Desktop Browser

You may also test the application in a desktop browser. In this case a small gui enables the manual input of the device orientation. In figure 3 the control is marked in red color.

Figure 3: Chrome Desktop rotate X-Axis or Y-Axis

Finite Element Method Basics

If you are familiar with the basics you may skip this chapter. In principle FEM is quite simple. All is about creating a large linear equation system that is an approximation of the real physical behavior. The following four steps show a simplified view of what happens in structural mechanics - starting with a simple spring and ending with a solid triangular element for FEM.

 Figure 4: Simple spring follows one linear equation

A simple spring has just one equation. The resulting force is linear dependent from the displacement. This is true as long the displacement is small compared with the size of the spring. 

Wikipedia says "In 1676 British physicist Robert Hooke discovered the principle behind springs' action, that the force it exerts is proportional to its extension, now called Hooke's law." [1] So this is not really new.

 Figure 5: The 2D spring has two linear equation

The same spring in two dimensions needs two linear equations. The important point here is that the equations can also expressed with matrices. This makes it easier to because you avoid to write a lot equations.

  Figure 4: Three springs have six linear equations and the stiffness matrix has just a filled diagonal.

Putting now three springs together to a triangle leads to six linear equations, because you have now tree points with two degrees of freedom. The stiffness matrix of this system is very simple, each node sums up the stiffness components from two springs.

  Figure 5: A triangle has six linear equations and the stiffness matrix is more complex.

A solid triangular has the same equations just the element stiffness matrix looks different. It is dependent on the material and geometry.

Now there a just two additional things to do.
  • Collect all the single element stiffness matrices of each single triangle to one large system stiffness matrix. In most of the cases this will be a banded matrix. Also determine the system with some displacement constraints and forces.
  • Rearrange the equations so that the known forces can be expressed as displacements. In FEM you will have always mixed linear equations.
A lot of real world problems can easily be reduced to two dimensions, but it is not difficult for you to extend this code also to three dimensional numerical tasks. Even if you are not familiar with physics - it makes fun to create own models and just playing with it.

Lessons Learned

  • Web applications on different mobile devices with different browsers are difficult to handle. There are dozens of different layouts and case differentiation needed.
  • The rendering on canvas is quite slow with larger models. A better solution would be WebGL. 


Find Code on GitHub

The code was developed with Java 7 (Eclipse Mars). 

Change History

 Revision  Date  Author  Description
 1.0  May 16, 2013  Markus Sprunck   first version
 1.1 Jul 6, 2015 Markus Sprunck  update to Java 7, GWT 2.7 and Appengine SDK 1.9.23

Sponsored Link