Read More‎ > ‎

Finite Element Method Simulation of the Eiffel-Tower Running in the Mobile 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. You may start the application under

Expected Result - Mobile

This application is developed for mobile devices. It takes the device orientation data from you phone and simulates the impact of gravity to the finite element simulation.


When you rotate the device the graphic is rotated and re-scaled. 


Expected Result - Desktop

A desktop browser shows additionally a small Dat.GUI control to manually change the orientation. This is especially helpful during development.


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 system of linear equations that is an approximation of the real physical behavior.  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. 

The following five 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.

  • One Linear Spring in 1-Dimension

    where u is the displacement, F is the resulting force and k is the spring constant that depends on the springs's material and construction.
    A simple spring has just one equation (1). 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, nothing complete new. 

  • One Linear Spring in 2-Dimensions

    where u is the displacement component, F is the resulting force component and k is the spring constant that depends on the springs's material, construction and orientation. 

    The same in matrix notation:

    or shorter

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

  • Three Linear Springs in 2-Dimensions 

    where u is the displacement vector, F is the resulting force vector and Ks is the stiffness matrix for the three springs system that depends on the springs's material, construction and orientation of the springs. 

    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. 

  • Solid Triangle in 2-Dimensions 

    where u is the displacement vector, F is the resulting force vector and Ks is the stiffness matrix for the three springs system that depends on the springs's material, construction and geometry of the triangle. 
    A triangle has six linear equations and the stiffness matrix is more complex. It is dependent on the material and geometry. 

    Now there a just one additional things to do.
  • Combine Many Solid Triangles to a System Stiffness Matrix. 

    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 displacements can be expressed as forces. In FEM you will have always mixed linear equations.


The implementation is based on SVG and Google Web Toolkit. It has been developed with GWT 2.7.0 and App Engine SDK 1.9.23. The complete source code is available on GitHub. The code was developed with Java 7 - Eclipse Luna Service Release 2 (4.4.2). 

Project Structure

To compile and test all the sources you will need a Google AppEngine project. If you are not familiar with Google AppEngine projects, you may read chapter 'Preparations to get a Web Applications Starter Project' from the article How to get User Information with OAuth2 in a GWT and Google AppEngine Java Application?'

Here GWT helps to translate the Java code for the FEM Simulation into JavaScript, which is then executed in the browser. 

Tested Configurations

The page has been tested with the following browsers on Windows 7:
  • Chrome 44 (~8 FPS)
  • Firefox 38 (~8 FPS)
  • Internet Explorer 11 (~6 FPS)
and on mobile devices:
  • Samsung Galaxy S6 (~8 FPS)
  • iPhone 6 (~8 FPS)
  • iPad 2 (~1.5 FPS)
  • iPhone 4 (~0.5 FPS)

Find Code on GitHub


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
 1.2  Jul 12, 2015  Markus Sprunck   Migration from paper.js to SVG rendering
 1.3  Jul 29, 2015  Markus Sprunck  New version with better performance and Eiffel-Tower model
 1.4  Jul 30, 2015  Markus Sprunck  Improve description and update pictures

Sponsored Link