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 2D Graph by Continuously Plotting Arrays

This VCSSL program plots coordinate values stored in arrays onto a 2D graph and repeats the process continuously to create an animation. It's a short sample code, ideal for use as a base for modifications or reuse.

» Related page: 2D 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 2D graph window will open, and the graph will animate based on some sample coordinate data.

To change what is plotted, edit the part of the code that updates the coordinate arrays (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.Graph2D; // Required for handling 2D graphs
import Math;         // Required for mathematical functions


// Prepare arrays for plotting
int pointN = 30;      // Number of points
float xData[pointN];  // Array to store X coordinates
float yData[pointN];  // Array to store Y 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

// Launch the 2D graph and configure settings
int graph = newGraph2D();                 // Launch graph
setGraph2DRangeX(graph, xMin, xMax);      // Set X range
setGraph2DRangeY(graph, yMin, yMax);      // Set Y range
setGraph2DAutoRange(graph, false, false); // Disable auto-scaling
//setGraph2DOption(graph, "WITH_POINTS", false); // Uncomment to disable point markers (lines only)


// Animation loop (counts frames using the variable 'frame')
for (int frame=0; true; frame++) { // Set a frame limit if needed, 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)
		
		xData[i] = x;
		yData[i] = y;
	}
	
	// Plot the coordinate arrays
	setGraph2DData(graph, xData, yData);
	
	// Wait for 30 milliseconds
	sleep(30);
	
	
	/*
	// Export the graph to an image file (e.g., "image_0.png", "image_1.png", ...)
	if(frame <= 100) {
		exportGraph2D(graph, "image_" + frame + ".png", "PNG");
	}
	*/
}

In this program, the first half sets up the arrays and graph, and the second half (starting around line 28) handles the animation.

First Part

At the top of the code:

coding UTF-8;

// Load libraries
import tool.Graph2D; // Required for handling 2D graphs
import Math;         // Required for mathematical functions

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

"import tool.Graph2D;" loads the tool.Graph2D library for 2D graph handling. "import Math;" loads the Math library for mathematical functions.

Preparing Coordinate Arrays

Next, we prepare the arrays for plotting:

// Prepare arrays for plotting
int pointN = 30;      // Number of points
float xData[pointN];  // Array to store X coordinates
float yData[pointN];  // Array to store Y coordinates

The "xData" array stores the X coordinates, and "yData" stores the Y coordinates. The array indices represent point numbers -- for example, point 3 is (xData[3], yData[3]).

This technique was introduced in Plotting Arrays on a 2D Graph. This article builds on that foundation.

Launching the Graph and Setting the Plot Range

Next, we launch the 2D graph software and set up 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

// Launch the 2D graph and configure settings
int graph = newGraph2D();                 // Launch graph
setGraph2DRangeX(graph, xMin, xMax);      // Set X range
setGraph2DRangeY(graph, yMin, yMax);      // Set Y range
setGraph2DAutoRange(graph, false, false); // Disable auto-scaling
//setGraph2DOption(graph, "WITH_POINTS", false); // Uncomment to disable point markers (lines only)

In the earlier example Plotting Arrays on a 2D Graph, auto-scaling was used. However, for animations, it's better to fix the plot range to avoid unwanted rescaling every frame.

The newGraph2D() function launches the graph software and returns a unique graph ID number. This ID is used when operating on the graph (setting ranges, plotting data, etc.).

If you prefer lines without point markers, uncomment the following line:

//setGraph2DOption(graph, "WITH_POINTS", false);

Animation: Updating Arrays and Plotting Continuously

Now for the main animation logic:

// Animation loop (counts frames using the variable 'frame')
for (int frame=0; true; frame++) { // Set a frame limit if needed, 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)
		
		xData[i] = x;
		yData[i] = y;
	}
	
	// Plot the coordinate arrays
	setGraph2DData(graph, xData, yData);
	
	// Wait for 30 milliseconds
	sleep(30);
}

The outer "for" loop is the animation loop -- each iteration corresponds to a frame, just like flipping pages in a flipbook.

In each frame:

• 1. Calculate the current time "t" based on the frame number.
• 2. Update the coordinate arrays based on "t".
• 3. Plot the new data.
• 4. Wait briefly before the next frame.

In this example, X values are evenly spaced across the range, and Y values are calculated using sin(x + t).

Feel free to modify the Y calculation to create different motion patterns.

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

Exporting Frames as Image Files

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

	...

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

This will save frames 0 to 100 as PNG images.

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

Also, a simple tool for playing back sequential images as an animation is available:

• 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.