Now Loading...

Please download on PC (not smartphone) and extract the ZIP file. Then double-click VCSSL.bat (batch file) to execute for Microsoft® Windows®, or execute VCSSL.jar (JAR file) on the command line for Linux® and other OSes.
For details, see How to Use.

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

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:

coding UTF-8;

// Load libraries
import tool.Graph3D; // Required for 3D graph handling
import Math;         // Required for mathematical functions


// Prepare arrays for plotting
int pointN = 16;             // Number of points
float xData[pointN][pointN]; // Array for X coordinates
float yData[pointN][pointN]; // Array for Y coordinates
float zData[pointN][pointN]; // Array for Z coordinates


// Set plot range
float xMax = 2.0;   // Maximum value of X range
float xMin = -2.0;  // Minimum value of X range
float yMax = 2.0;   // Maximum value of Y range
float yMin = -2.0;  // Minimum value of Y range
float zMax = 1.0;   // Maximum value of Z range
float zMin = -1.0;  // Minimum value of Z range

// Launch the 3D graph and configure settings
int graph = newGraph3D();             // Launch graph
setGraph3DRangeX(graph, xMin, xMax);  // Set X range
setGraph3DRangeY(graph, yMin, yMax);  // Set Y range
setGraph3DRangeZ(graph, zMin, zMax);  // Set Z range
setGraph3DAutoRange(graph, false, false, false);  // Disable auto-scaling
setGraph3DOption(graph, "WITH_POINTS", false);    // Disable point plots
setGraph3DOption(graph, "WITH_MESHES", true);     // Enable mesh plots
setGraph3DOption(graph, "WITH_MEMBRANES", true);  // Enable surface plots


// Animation loop (frames counted by 'frame' variable)
for (int frame=0; true; frame++) { // Limit frame count if necessary, e.g., frame<=1000
	
	// Calculate time t based on the current frame
	float t = 0.05 * frame;  // Larger coefficient = faster animation
	
	// Update coordinate arrays
	for(int yi=0; yi<pointN; yi++){
		for(int xi=0; xi<pointN; xi++){
			
			float dx = (xMax-xMin)/(pointN-1); // X interval
			float dy = (yMax-yMin)/(pointN-1); // Y interval
			float x = xMin + xi * dx;          // X coordinate at (xi, yi)
			float y = yMin + yi * dy;          // Y coordinate at (xi, yi)
			float z = cos(x + t) * sin(y + t); // Z coordinate at (xi, yi) (example function)
			
			xData[yi][xi] = x;
			yData[yi][xi] = y;
			zData[yi][xi] = z;
		}
	}
	
	// Plot the coordinate arrays on the 3D graph
	setGraph3DData(graph, xData, yData, zData);
	
	// Wait 30 milliseconds (animation delay)
	sleep(30);
	
	
	/*
	// Export graph content to sequential image files: "image_*.png" (* is the frame number)
	// (Important: limit output to avoid infinite image generation)
	if(frame <= 100) {
		exportGraph3D(graph, "image_" + frame + ".png", "PNG");
	}
	*/
}

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:

coding UTF-8;

// Load libraries
import tool.Graph3D; // Required for 3D graph handling
import Math;         // Required for mathematical functions

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:

// Prepare arrays for plotting
int pointN = 16;             // Number of points
float xData[pointN][pointN]; // Array for X coordinates
float yData[pointN][pointN]; // Array for Y coordinates
float zData[pointN][pointN]; // Array for Z coordinates

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:

// Set plot range
float xMax = 2.0;   // Maximum value of X range
float xMin = -2.0;  // Minimum value of X range
float yMax = 2.0;   // Maximum value of Y range
float yMin = -2.0;  // Minimum value of Y range
float zMax = 1.0;   // Maximum value of Z range
float zMin = -1.0;  // Minimum value of Z range

// Launch the 3D graph and configure settings
int graph = newGraph3D();             // Launch graph
setGraph3DRangeX(graph, xMin, xMax);  // Set X range
setGraph3DRangeY(graph, yMin, yMax);  // Set Y range
setGraph3DRangeZ(graph, zMin, zMax);  // Set Z range
setGraph3DAutoRange(graph, false, false, false);  // Disable auto-scaling
setGraph3DOption(graph, "WITH_POINTS", false);    // Disable point plots
setGraph3DOption(graph, "WITH_MESHES", true);     // Enable mesh plots
setGraph3DOption(graph, "WITH_MEMBRANES", true);  // Enable surface plots

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.

// Animation loop (frames counted by 'frame' variable)
for (int frame=0; true; frame++) { // Limit frame count if necessary, e.g., frame<=1000
	
	// Calculate time t based on the current frame
	float t = 0.05 * frame;  // Larger coefficient = faster animation
	
	// Update coordinate arrays
	for(int yi=0; yi<pointN; yi++){
		for(int xi=0; xi<pointN; xi++){
			
			float dx = (xMax-xMin)/(pointN-1); // X interval
			float dy = (yMax-yMin)/(pointN-1); // Y interval
			float x = xMin + xi * dx;          // X coordinate at (xi, yi)
			float y = yMin + yi * dy;          // Y coordinate at (xi, yi)
			float z = cos(x + t) * sin(y + t); // Z coordinate at (xi, yi) (example function)
			
			xData[yi][xi] = x;
			yData[yi][xi] = y;
			zData[yi][xi] = z;
		}
	}
	
	// Plot the coordinate arrays on the 3D graph
	setGraph3DData(graph, xData, yData, zData);
	
	// Wait 30 milliseconds (animation delay)
	sleep(30);
}

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:

// Update coordinate arrays
for(int yi=0; yi<pointN; yi++){
	for(int xi=0; xi<pointN; xi++){
			
		float dx = (xMax-xMin)/(pointN-1); // X interval
		float dy = (yMax-yMin)/(pointN-1); // Y interval
		float x = xMin + xi * dx;          // X coordinate at (xi, yi)
		float y = yMin + yi * dy;          // Y coordinate at (xi, yi)
		float z = cos(x + t) * sin(y + t); // Z coordinate at (xi, yi) (example function)
			
		xData[yi][xi] = x;
		yData[yi][xi] = y;
		zData[yi][xi] = z;
	}
}

• 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):

	...

	// Wait 30 milliseconds (animation delay)
	sleep(30);
	
	// Export graph content to sequential image files: "image_*.png" (* is the frame number)
	// (Important: limit output to avoid infinite image generation)
	if(frame <= 100) {
		exportGraph3D(graph, "image_" + frame + ".png", "PNG");
	}
}

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

This VCSSL/Vnano code (files with the ".vcssl" or ".vnano" extensions) is released under the CC0 license, effectively placing it in the public domain. If any sample code in C, C++, or Java is included in this article, it is also released under the same terms. You are free to use, modify, or repurpose it as you wish.

* The distribution folder also includes the VCSSL runtime environment, so you can run the program immediately after downloading. The license for the runtime is included in the �gLicense�h folder.
(In short, it can be used freely for both commercial and non-commercial purposes, but the developers take no responsibility for any consequences arising from its use.) For details on the files and licenses included in the distribution folder, please refer to "ReadMe.txt".

* The Vnano runtime environment is also available as open-source, so you can embed it in other software if needed. For more information, see here.

Author of This Article

Fumihiro Matsui
[ Founder of RINEARN, Doctor of Science (Physics), Applied Info Tech Engineer ]

Develops VCSSL, RINEARN Graph 3D and more. Also writes guides and articles.

| About Me | Contact |