Nonsense Mathematics to Awesome Visualization

Visualization is always a good way to learn things faster and make sense from conceptual things such as algorithms, mathematical formulas or physical phenomena. You may saw a lot of visualizations created by JavaScript and some other tools other than Java. Surely, they were more beautiful in comparison with Applets or Swing-based applications. That was true in the era before JavaFX!
Nowadays, you can create fancier UI with JavaFX more easily. In this post, I am going to show you how to convert an abstract mathematical formula to an awesome JavaFX 3D visualization.


In JavaOne 2013, Michael Hoffer explained his awesome 3D visualization. At that time, It seemed a hard task for me to create program likes that, but It was lightened my mind that It is possible to create such a things with JavaFX.

None Sense Theory:

The vibration of a string of a Guitar is an example of one-dimensional vibration. Playing drum is an example of two-dimensional vibration. Mathematics explains both of them in detail, but let me show a simpler example, Rectangular Membrane!
I am not good at theories and formulas, so, for the sake of simplicity hopefully(!) I am not going to explain the mathematical details of this phenomena. If you are interested, you can read this link for further information.

We let u(x, y, t) = deflection of a membrane from equilibrium at position (x, y) and time t.
For a fixed t, the surface z = u(x, y, t) gives the shape of the membrane at time t. Under ideal assumptions (e.g. uniform membrane density, uniform tension, no resistance to motion, small deflection, etc.) one can show that u satisfies the two-dimensional wave equation:

\(u_{tt} = c^2 \nabla ^2u = c^2(u_{xx} + u_{yy})\)  for 0 < x < a, 0 < y < b

where the constant c has the units of velocity. It is given by :

\(c^2 = \frac{\tau}{\rho}\)

where τ is the tension per unit length, and ρ is mass density.

None Sense Formula:

So if we continue our mathematics and apply our boundary conditions and some relaxations we will reach to this formula:

\(u_{mn}(x, y, t) = X_{m}(x)Y_{n}(y)T_{mn}(t) = \sinµ_{m}x\times\sinν_{n}y\times(B_{mn}cosλ_{mn}t + B_{mn}^{*}sinλ_{mn}t)\)


\(µ_{m} =\frac{mπ}{a}, ν_{n} =\frac{nπ}{b} , λ_{mn} = c\sqrt{µ_{m}^2 + ν_{n}^2}\)

The Awesome Visualization:

Now we have a formula that we have no idea about it! we only know that it shows how a rectangular memberane (a * b) vibrates. How parameter c, m or n affects the vibration? It’s not hard to answer this question using pure mathematics, but that wouldn’t make any sense for those who are not good with theories!
That’s where visualization came into the scene! So how to visualize it?

FXyz3D: A JavaFX 3D Visualization Library:

Working with JavaFX 3D API is a very hard task, especially if you are not familiar with 3D graphic rendering concepts. But always there is some library or framework that makes your job easy. In order to get familiar with FXyz you should see the samples in this link, especially read this one.
Before we move further, You should change the source code of FXyz, because by default FXyz plot surface symmetric, which means if you want to plot a surface 2 (x-axis from 0 to 2) by 3 (y-axis from 0 to 3) it will plot for you 4 (x-axis from -2 to 2) by 6 (y-axis from -3 to 3) so you should edit the following code:


Now we can develop our visualization.

Program Code:

I tried to write the code in the simplest form. If you want to change the parameters and run the program you can find the source codes here.

Code Explanation:

This part of the code is the initialization of 3D cameras and angles, please don’t afraid if you are not familiar with Camera, CameraTransformer, … just edit/comment some lines and parameters to see how it affects the program. The most important thing is SurfacePlotMesh.
In order to plot our surface, we need to provide a Function2D<Point2D, Number> for SurfacePlotMesh. with our little modification in FXyz core, we are drawing our plot from [0 to a] in the x-axis and from [0 to b] in the y-axis. Other parameters used for rendering the surface.

This is where the surface Function2D is generating. I just convert our mathematic formula to Java code.
Our visualization depends on time, so in order to make our visualization alive we need JavaFX Animation:

This is where we say every 50 milliseconds update the surface and render it again.

Final Words:

As you saw, I developed an Awesome JavaFX 3D visualization with the help of FXyz library with few lines of code. I give you a homework: visualize Circular Membrane!
If you want to see more JavaFX mathematical visualization you can see KNTU PDE MathTools or ODE MathTools

You can see the full version of this visualization demo in this video:

3 thoughts on “Nonsense Mathematics to Awesome Visualization

Leave a Reply

Your email address will not be published. Required fields are marked *