With JavaFX’s animations and some Java code, you can translate obscure, dense mathematical theories into visualizations for you to explore more deeply.
Visualization is always a good way to learn things faster and make sense of conceptual things such as algorithms, mathematical formulas, or physical phenomena. You may have seen 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 UIs 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.
At 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.
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, 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) = the 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:
for 0 < x < a, 0 < y < b
Where the constant c has the units of velocity. It is given by:
Where τ is the tension per unit length, and ρ is mass density.
So if we continue our mathematics and apply our boundary conditions and some relaxations, we will reach to this formula:
Where:
Now we have a formula that we have no idea about! We only know that it shows how a rectangular membrane (a * b) vibrates. How do the parameters 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 to the scene! So how to visualize it?
Working with the JavaFX 3D API is a very hard task, especially if you are not familiar with 3D graphic rendering concepts. But there is always some library or framework that makes your job easy. In order to get familiar with FXyz, you should see the samples in this link and especially read this one.
Before we move further, You should change the source code of FXyz, because by default, FXyz plots are surface symmetric, which means that 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:
To:
Now we can develop our visualization.
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 code here.
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 come alive, we need JavaFX Animation:
This is where we say every 50 milliseconds, update the surface and render it again.
As you saw, I developed an Awesome JavaFX 3D visualization with the help of the FXyz library with few lines of code. I’ll give you a homework: visualize a Circular Membrane! If you want to see more JavaFX mathematical visualizations, you can check out KNTU PDE MathTools or ODE MathTools. You can see the full version of this visualization demo in this video:
