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

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

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:

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:

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:

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:

Animation: Updating Arrays and Plotting Continuously

Now for the main animation logic:

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:

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

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.