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

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's the complete code:

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:

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:

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:

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:

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:

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

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.