Animating a 3D Graph by Continuously Plotting Arrays (Surface/Mesh Plot)

This VCSSL program plots coordinate values stored in arrays on a 3D graph and continuously updates the plot to create an animation. It's a short and simple sample code, perfect as a base for modifications or reuse.

» Related page: 3D Graph Plotting in Java

Sponsored Link

---

How to Use

Download and Extract

At first, click the "Download" button at the above of the title of this page by your PC (not smartphone). A ZIP file will be downloaded.

Then, please extract the ZIP file. On general environment (Windows®, major Linux distributions, etc.), you can extract the ZIP file by selecting "Extract All" and so on from right-clicking menu.

» If the extraction of the downloaded ZIP file is stopped with security warning messages...

Execute this Program

Next, open the extracted folder and execute this VCSSL program.

For Windows

Double-click the following batch file to execute:

For Linux, etc.

Execute "VCSSL.jar" on the command-line terminal as follows:

» If the error message about non-availability of "java" command is output...

After Launching

When launched, the 3D graph window will open and animate the graph using sample coordinate data.

To change the plotted content, modify the part of the code where the coordinate arrays are updated (inside the inner "for" loop).

Code

Now, let's walk through the code. This program is written in VCSSL.

Full Code

Here�fs the complete code:

In short, the first part of the code prepares the coordinate arrays and graph settings, and the second part (from line 28 onward) performs the animation.

Beginning of the Program

Let's take a look at the beginning:

The line "coding UTF-8;" explicitly specifies the character encoding of the program. It's not mandatory, but it's useful to prevent character corruption.

The line "import tool.Graph3D;" loads the tool.Graph3D library necessary for 3D graphing. The next line "import Math;" loads the Math library needed for mathematical functions.

Preparing Coordinate Arrays

Next, here's the part where arrays for coordinate values are prepared:

Here:

• "xData" stores the X coordinates for each grid point
• "yData" stores the Y coordinates
• "zData" stores the Z coordinates

These are 2D arrays, and each pair of indices corresponds to a position on the grid. For example, imagine the grid points are arranged like this:

In this case, the indices in the arrays xData, yData, and zData represent:

In the sample code, the grid Y index is represented by the variable "yi", and the grid X index by "xi".

By the way, the order of the indices could also be:

Either way is fine.

In fact, the edges of the mesh don't necessarily have to align strictly with the X and Y axes -- they could be skewed like a parallelogram or even laid out on a sphere, like latitude and longitude. The key point is: as long as the indices correspond to the "vertical" and "horizontal" layout of the grid on a surface, the format works.

Launching the Graph and Setting the Plotting Range

Next, let's look at the part where the 3D graph is launched and its initial settings, like the plotting range, are configured.

In the tutorial Plotting Arrays on a 3D Graph (Point/Line Plot), we didn't explicitly configure the plot range and simply used the default settings, where the plotting range automatically adjusts according to the data.

However, when animating like in this case, if the plot range keeps changing with each frame, it can be troublesome. So here, we explicitly specify the plot range and disable the auto-scaling:

In this way, we launch the 3D graph software with newGraph3D() and then configure its settings.

Also, note that the newGraph3D() function assigns a unique ID to each graph it creates. If you launch multiple 3D graph windows, you�fll have graphs like Graph #12, Graph #22, Graph #101, and so on.

Here, the generated ID is stored in the integer variable "graph".

When you want to operate on a specific graph (e.g., setting ranges, plotting), you refer to it using its ID. For example, just after launching the graph, we pass "graph" as an argument to setGraph3DRangeX().

In addition, this code disables the default "point plot" option and enables "mesh plot" (WITH_MESHES) and "surface plot" (WITH_MEMBRANES) options, to display a smooth surface with a mesh overlay. These options can also be changed manually from the "Options" menu in the graph window's menu bar.

Continuously Updating the Coordinate Arrays and Animating the Graph

Now, onto the key animation part! We achieve animation just like a flipbook -- by plotting slightly different graphs continuously.

There are nested for loops here:

• The outer loop is the time loop -- one full iteration = one "frame" of the animation (like turning a page in a flipbook).
• The inner loops update the coordinate arrays for each frame.

The overall flow per frame is:

• 1. Calculate the time "t" based on the frame number.
• 2. Update the coordinate arrays using "t".
• 3. Plot the updated data on the graph.
• 4. Pause briefly before moving to the next frame.

This repeats dozens of times per second, so it looks smooth to human eyes!

About Updating the Coordinate Arrays

Here's the part where we update the contents:

• For X and Y coordinates, we divide the X/Y range evenly into (pointN - 1) segments.
  (Since if there are N points, there are N-1 intervals between them -- like 5 fingers having 4 spaces.)
• For Z coordinates, we use cos(x + t) * sin(y + t) to create a moving surface shape.

You can modify the formula for Z to produce all kinds of different shapes and movements. It's a fun way to explore how surface dynamics change!

If You Want to Output Frames as Image Files...

Sometimes you might want to save the animation frames as a series of images.

In that case, you can use exportGraph3D() inside the animation loop. However, make sure to limit the frame range; otherwise, it could generate an infinite number of images!

Example (add at the end of the loop):

This will generate files like image_0.png, image_1.png, ..., image_100.png.

You can then stitch these into a video using image editing or video editing software (search for "convert sequential images to video" online for many methods).

Also, in this code archive, we offer a simple tool for playing back sequential images as an animation:

• Simple Tool to Play Sequential Images as an Animation

License

The license of this VCSSL / Vnano code (the file with the extension ".vcssl" / ".vnano") is CC0 (Public Domain), so you can customize / divert / redistribute this VCSSL code freely.

Also, if example code written in C/C++/Java are displayed/distributed on Code section of this page, they also are distributed under CC0, unless otherwise noted.