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 (Point/Line Plot)

This [VCSSL](/en-us/) 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's 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 = 100;     // Number of points
float xData[pointN];  // Array for X coordinates
float yData[pointN];  // Array for Y coordinates
float zData[pointN];  // Array for Z coordinates


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

// 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_LINES", true);     // Enable line 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 i=0; i<pointN; i++){
		
		float dx = (xMax-xMin)/(pointN-1); // X interval
		float x = xMin + i * dx;    // X coordinate
		float y = sin(x + t);       // Y coordinate (modify as desired)
		float z = sin(2.0 * x + t); // Z coordinate (modify as desired)
		
		xData[i] = x;
		yData[i] = y;
		zData[i] = z;
	}
	
	// Plot the coordinate arrays
	setGraph3DData(graph, xData, yData, zData);
	
	// Wait for 30 milliseconds
	sleep(30);
	
	
	/*
	// Export the graph to sequential image files (e.g., "image_0.png", "image_1.png", ...)
	if(frame <= 100) {
		exportGraph3D(graph, "image_" + frame + ".png", "PNG");
	}
	*/
}

The first half of the code prepares the coordinate arrays and configures the graph. The second half (from around line 28 onward) handles the animation.

First Part

At the top of the code:

coding UTF-8;

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

The "coding UTF-8;" line specifies the character encoding. While optional, it helps prevent character corruption.

The "import" lines load the tool.Graph3D and Math libraries.

Preparing Coordinate Arrays

Next, we prepare the arrays:

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

The "xData", "yData", and "zData" arrays store the X, Y, and Z coordinates for each point. The array indices represent the point number -- for example, point 3 corresponds to (xData[3], yData[3], zData[3]).

This method of storing coordinates was discussed in Plotting Arrays on a 3D Graph (Point/Line Plot). This article builds on that.

Because this sample deals with individual points (not a surface mesh), the arrays are one-dimensional. If you want to animate mesh data, that will be covered in the next article.

Launching the Graph and Setting the Plot Range

Next, we launch the 3D graph and set the plot range:

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

// 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_LINES", true);     // Enable line plots

When doing animations, it's better to fix the plot range to prevent it from shifting frame by frame.

The newGraph3D() function launches the 3D graph software and returns a unique ID number, which you then use for all further graph operations.

By default, points are plotted and connected with lines. If you want to disable point markers or customize appearance, adjust the graph options accordingly.

Animation: Continuously Updating Arrays and Plotting

Now for the main animation logic:

// 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 i=0; i<pointN; i++){
		
		float dx = (xMax-xMin)/(pointN-1); // X interval
		float x = xMin + i * dx;    // X coordinate
		float y = sin(x + t);       // Y coordinate (modify as desired)
		float z = sin(2.0 * x + t); // Z coordinate (modify as desired)
		
		xData[i] = x;
		yData[i] = y;
		zData[i] = z;
	}
	
	// Plot the coordinate arrays
	setGraph3DData(graph, xData, yData, zData);
	
	// Wait for 30 milliseconds
	sleep(30);
}

The outer for loop is the animation loop -- each cycle represents a frame.

Each frame proceeds by:

• 1. Calculating the current time "t".
• 2. Updating the coordinate arrays based on "t".
• 3. Plotting the new data.
• 4. Pausing briefly before the next frame.

The X coordinates are evenly spaced across the X range. The Y and Z values are calculated using simple sine functions to create movement over time.

(Note: The X interval "dx" is (xMax - xMin) / (pointN - 1), not pointN, because there are pointN-1 intervals between pointN points -- just like the gaps between fingers.)

Bonus: Viewing the Motion from Different Planes

If you project this animation onto the Y-Z plane, you'll see a pattern similar to a Lissajous figure. By adjusting the axis scales (using the three sliders on the left side of the graph window), you can flatten the view onto different planes.

(You can also flatten the view from the menu: Options > Flatten View.)

When projecting onto the Y-Z plane, you can clearly observe a typical Lissajous figure:

Projected onto the X-Z plane, you'll see a sine wave sliding sideways:

Feel free to modify the formulas for y and z to create different animation patterns!

Exporting Frames as Image Files

If you want to export each animation frame as an image file, add this inside the animation loop:

	...

	// Wait for 30 milliseconds
	sleep(30);
	
	// Export the graph to sequential image files (e.g., "image_0.png", "image_1.png", ...)
	if(frame <= 100) {
		exportGraph3D(graph, "image_" + frame + ".png", "PNG");
	}
}

This will save PNG images numbered from 0 to 100.

You can then stitch these images into a video using video editing software. (Search for "convert image sequence to video" online for methods.)

There's also a simple tool available for playing image sequences as animations:

• Simple Tool for Playing Image Sequences as 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.