Now Loading...

PC （※スマートフォンでは動きません） でダウンロードし、ZIPファイルを右クリックメニューから展開して、できたフォルダ内の「 VCSSL.bat（バッチファイル） 」をダブルクリックすると起動します。 Linux等では「 VCSSL.jar 」をコマンド実行してください。
» 詳しい使用方法や、エラーで展開できない際の対応方法などはこちら

配列を3Dグラフにアニメーションプロットする（点/線グラフ）

このVCSSLプログラムは、座標値が格納された配列の内容を3Dグラフにプロットし、 それを連続的にくりかえす事で、アニメーションさせるプログラムです。 サンプル的な短いコードなので、改造や流用のベースに適しています。

» 関連ページ： Java言語での3Dグラフ描画についてはこちら

こちらもおすすめ！

ファイルを3Dグラフにプロットする（点/線グラフ）
	座標値ファイルの内容を、3次元の点/線グラフにプロットするサンプルプログラムです。
配列を3Dグラフにプロットする（点/線グラフ）
	座標値配列の内容を、3次元の点/線グラフにプロットするサンプルプログラムです。
ファイルを3Dグラフにプロットする（曲面/メッシュグラフ）
	座標値ファイルの内容を、3次元の曲面/メッシュグラフにプロットするサンプルプログラムです。
配列を3Dグラフにプロットする（曲面/メッシュグラフ）
	座標値配列の内容を、3次元の曲面/メッシュグラフにプロットするサンプルプログラムです。
[現在のページです] 配列を3Dグラフにアニメーションプロットする（点/線グラフ）
	座標値配列の内容を、3次元の点/線グラフに連続でプロットし、アニメーションさせるサンプルプログラムです。
配列を3Dグラフにアニメーションプロットする（曲面/メッシュグラフ）
	座標値配列の内容を、3次元の曲面/メッシュグラフに連続でプロットし、アニメーションさせるサンプルプログラムです。

使用方法

ダウンロードと展開（解凍）

まず、PC（スマホは未対応）で上の画面の「 ダウンロード 」ボタンを押してください。 するとZIP形式で圧縮されたファイルがダウンロードされます。

その後、ZIPファイルを右クリックして「すべて展開」や「ここに展開」などで展開（解凍）してください。 展開が成功すると、ZIPファイルと同じ名前のフォルダができ、その中にZIPファイルの中身が入っています。

» 展開がエラーで止まってしまう場合や、ファイル名が文字化けしてしまう場合は…

プログラムの起動

Windows をご使用の場合

上記でZIPファイルを展開したフォルダ内にある、以下のバッチファイルをダブルクリック実行してください：

もしプログラムを書き変えながら使いたい場合は、代わりに「 VCSSL_Editor__プログラム編集はこちら.bat 」を実行してください。

正常に起動できると、初回のみ、Java実行環境を入手するか等を尋ねられるので、適時答えて済ませると、プログラムが起動します。 2回目以降はすぐに起動します。

» うまく起動できずにエラーになってしまう場合は…

Linux 等をご使用の場合

ZIPファイルを展開したフォルダ内へコマンドライン端末で cd して、以下の通り入力して実行してください：

» javaコマンドが使用できない等のエラーが表示される場合は…

起動後

起動すると、3Dグラフが起動し、適当に計算した座標値のグラフがアニメーション表示されます。

プロットする内容を変えるには、コード中の座標値値配列を代入している部分（ 2重になっている for 文の内側の中身 ）を適当に書き換えてください。

コード解説

それでは、このプログラムのコード内容について解説していきます。 このプログラムのコードはVCSSLで記述されています。

コード全体

まずは、コード全体を見てみましょう。

coding UTF-8;

// ライブラリの読み込み
import tool.Graph3D; // 3次元グラフを扱うのに必要
import Math;         // 数学関数を扱うのに必要


// グラフにプロットする内容を格納する座標値配列を用意
int pointN = 100;     // 座標点数
float xData[pointN];  // 各点のX座標を格納する配列
float yData[pointN];  // 各点のY座標を格納する配列
float zData[pointN];  // 各点のZ座標を格納する配列


// グラフのプロット範囲
float xMax = 10.0;  // X範囲の最大値（右端）
float xMin = 0.0;   // X範囲の最小値（左端）
float yMax = 1.0;   // Y範囲の最大値（上端）
float yMin = -1.0;  // Y範囲の最小値（下端）
float zMax = 1.0;   // Z範囲の最大値（上端）
float zMin = -1.0;  // Z範囲の最小値（下端）

// 3次元グラフを起動し、プロット範囲などの設定を済ませる
int graph = newGraph3D();             // グラフを起動
setGraph3DRangeX(graph, xMin, xMax);  // X範囲を設定
setGraph3DRangeY(graph, yMin, yMax);  // Y範囲を設定
setGraph3DRangeZ(graph, zMin, zMax);  // Z範囲を設定
setGraph3DAutoRange(graph, false, false, false); // 範囲の自動調整を無効化
setGraph3DOption(graph, "WITH_LINES", true);    // 線プロットを有効化


// アニメーションループ（変数 frame に回数をカウントしていく）
for (int frame=0; true; frame++) { // 回数に上限を設けるには true を frame<=1000 などに変更
	
	// この時点のループ回数から、この時点の時刻の値 t を求める
	float t = 0.05 * frame;  // 係数が大きいほど時刻が早く進む＝アニメーションが速くなる
	
	// 座標値配列の内容を更新
	for(int i=0; i<pointN; i++){
		
		float dx = (xMax-xMin)/(pointN-1); // X範囲を等分割した間隔
		float x = xMin + i * dx;    // i番目の点のX座標（X範囲を等分割）
		float y = sin(x + t);       // i番目の点のY座標（適当、色々変えて遊べます）
		float z = sin(2.0 * x + t); // i番目の点のY座標（適当、色々変えて遊べます）
		
		xData[i] = x;
		yData[i] = y;
		zData[i] = z;
	}
	
	// 座標値配列を3次元グラフにプロット
	setGraph3DData(graph, xData, yData, zData);
	
	// 30ミリ秒だけ一時停止（アニメーションウェイト）
	sleep(30);
	
	
	// グラフの内容を、連番の画像ファイル「 image_*.png（ * の箇所が番号）」に出力する場合は、以下を有効にしてください
	
	// if(frame <= 100) { // 画像ファイルを無限に出力し続けるのは普通はまずいので、時間の範囲を限っておく
	//	exportGraph3D(graph, "image_" + frame + ".png", "PNG");
	// }
}

流れとしては、前半部で座標値配列の確保やグラフの起動・設定を済ませた上で、 後半部（28行目〜）でアニメーションの処理を行っています。

先頭部分

先頭部分を見てみましょう。

coding UTF-8;

// ライブラリの読み込み
import tool.Graph3D; // 3次元グラフを扱うのに必要
import Math;         // 数学関数を扱うのに必要

先頭の「 coding UTF-8; 」では、プログラムの文字コードが UTF-8 である事を明示しています。必須ではありませんが、書いておくと文字化けするのを防げます。 古いプログラムで実行時に文字化けする場合は、ここで代わりに「 coding Shift_JIS; 」とすると直ったりします。

「 import tool.Graph3D; 」の部分は、 3次元グラフを扱うための「 tool.Graph3D 」ライブラリを読み込んでいます。 その後の「 import Math; 」の部分は、 数学関数を扱うための「 Math 」ライブラリを読み込んでいます。

座標値配列の用意

続いて、グラフにプロットする内容を格納する、座標値配列を用意する部分です。

// グラフにプロットする内容を格納する座標値配列を用意
int pointN = 100;      // 座標点数
float xData[pointN];  // 各点のX座標を格納する配列
float yData[pointN];  // 各点のY座標を格納する配列
float zData[pointN];  // 各点のZ座標を格納する配列

配列 xData に座標点のX値、yData にY値、zData にZ値を格納します。配列のインデックスは、座標点を区別する番号となります。 例えば3番座標点の座標は (xData[3],yData[3],zData[3]) といった具合です。

このように座標値を配列に格納してグラフにプロットするのは、 「 配列を3Dグラフにプロットする（点/線グラフ） 」 の回で扱っています。 今回はその応用的な内容ですので、あらかじめ上の回を踏まえた上でお読みいただくと分かりやすいかもしれません。

今回はメッシュデータではないので、座標値配列インデックスは単純に1次元です。 メッシュデータの場合は2次元配列になりますが、その場合のデータの格納方法などは 「 配列を3Dグラフにプロットする（曲面/メッシュグラフ） 」 の回で扱っています。メッシュデータのアニメーションについては次回で扱います。

グラフを起動し、プロット範囲などの設定を行う

続いて、3Dグラフを起動して、プロット範囲などの初期設定を行う部分です。

「 配列を3Dグラフにプロットする（点/線グラフ） 」 の回では、プロット範囲の設定などは行わず、標準の状態のままで用いていました。 その場合、プロットするデータに合わせて、範囲が自動で調整されます。

しかし今回のようにアニメーションさせる場合は、 アニメーションのコマ毎に範囲が変わってしまうと逆に厄介なので、 明示的に範囲を指定した上で、自動調整機能を無効化しています：

// グラフのプロット範囲
float xMax = 10.0;  // X範囲の最大値（右端）
float xMin = 0.0;   // X範囲の最小値（左端）
float yMax = 1.0;   // Y範囲の最大値（上端）
float yMin = -1.0;  // Y範囲の最小値（下端）
float zMax = 1.0;   // Z範囲の最大値（上端）
float zMin = -1.0;  // Z範囲の最小値（下端）

// 3次元グラフを起動し、プロット範囲などの設定を済ませる
int graph = newGraph3D();             // グラフを起動
setGraph3DRangeX(graph, xMin, xMax);  // X範囲を設定
setGraph3DRangeY(graph, yMin, yMax);  // Y範囲を設定
setGraph3DRangeZ(graph, zMin, zMax);  // Z範囲を設定
setGraph3DAutoRange(graph, false, false, false); // 範囲の自動調整を無効化
setGraph3DOption(graph, "WITH_LINES", true);    // 線プロットを有効化

このように newGraph3D関数で3次元グラフソフトを起動した上で、 設定を行っています。

なお、このnewGraph3D関数は、呼ぶ度にグラフソフトを1個起動し、そのグラフソフトに固有のID番号を割り振って返します。 例えば3次元グラフソフトを何個も起動した場合、12番グラフ、22番グラフ、101番グラフ、 …といったように、それぞれに番号が割り振られているわけです。 上では、生成したグラフに割り振られたID番号をint型変数「 graph 」に格納しているわけです。

グラフに対して設定やプロットなどの操作を行う際は、このように控えたID番号を用いて、どのグラフに対する操作なのかを指定します。 実際に、すぐ後でX範囲設定の関数 setGraph3DRangeX の引数に、変数 graph に控えたID番号を渡していますね。

なお、今回のコードでは、グラフの描き方に関するプロットオプションは標準のままなので、 「 座標点には点が打たれて、それらが線で結ばれる 」という挙動になります。 一方で、アニメーションだと「 点を打たずに線だけ描きたい 」という場合も多いと思います。 その場合は、25行目先頭のコメントアウト「 // 」を削って、その行を有効にしてください。

座標値配列の更新とグラフプロットをくりかえし、アニメーションさせる

さて、残りは肝心のアニメーション部分です。 アニメーションは、パラパラ漫画の要領で、少しずつ違ったグラフを連続でプロットさせ続ける事で行います。

// アニメーションループ（変数 frame に回数をカウントしていく）
for (int frame=0; true; frame++) { // 回数に上限を設けるには true を frame<=1000 などに変更
	
	// この時点のループ回数から、この時点の時刻の値 t を求める
	float t = 0.05 * frame;  // 係数が大きいほど時刻が早く進む＝アニメーションが速くなる
	
	// 座標値配列の内容を更新
	for(int i=0; i<pointN; i++){
		
		float dx = (xMax-xMin)/(pointN-1); // X範囲を等分割した間隔
		float x = xMin + i * dx;    // i番目の点のX座標（X範囲を等分割）
		float y = sin(x + t);       // i番目の点のY座標（適当、色々変えて遊べます）
		float z = sin(2.0 * x + t); // i番目の点のY座標（適当、色々変えて遊べます）
		
		xData[i] = x;
		yData[i] = y;
		zData[i] = z;
	}
	
	// 座標値配列を3次元グラフにプロット
	setGraph3DData(graph, xData, yData, zData);
	
	// 30ミリ秒だけ一時停止（アニメーションウェイト）
	sleep(30);
}

2重の for 文になっていますが、外側の for 文が、時間に関するループ ＝ アニメーションループです。 パラパラ漫画でいうところの、ページをめくるループですね。 アニメーションの用語では、ページというよりも「 フレーム 」と呼んだりします。

さて、外側の for 文の中身が、アニメーションの1フレーム（1ページ）ごとの処理です。 全体的な流れとしては、まずそのフレームに対応する時刻 t の値を求めて、 その t の値に基づいて座標値配列の内容を更新し、 その内容をグラフに描かせて、最後に少しだけ小休止、という内容になっています。 これを毎秒数十回くりかえす事で、人間の目には動いて見えるわけですね。

これらの処理の中で、グラフに描く内容を決めているのは、 座標値配列を更新する部分です。 抜き出すと以下の通りです：

	// 座標値配列の内容を更新
	for(int i=0; i<pointN; i++){
		
		float dx = (xMax-xMin)/(pointN-1); // X範囲を等分割した間隔
		float x = xMin + i * dx;    // i番目の点のX座標（X範囲を等分割）
		float y = sin(x + t);       // i番目の点のY座標（適当、色々変えて遊べます）
		float z = sin(2.0 * x + t); // i番目の点のY座標（適当、色々変えて遊べます）
		
		xData[i] = x;
		yData[i] = y;
		zData[i] = z;
	}

このコードは簡単なサンプルであるため、 X座標については単純にグラフのX範囲を pointN-1 等分 ※ した点とし、 Y座標については sin(x + t) 、Z座標については sin(2 x + t) としています。 このあたりについては、描かせたい内容に応じて書き換えてください。

※ 座標点の数が pointN 個なので、その間の区間の数は pointN-1 個になります（指と指の間は4つですよね？）。 なので、点がX方向に等間隔に並ぶとすると、その間隔 dx は「 X範囲の長さ / (pointN-1) 」、 つまり「 (xMax-xMin) / (pointN-1) 」になります。

余談ですが、このサンプルコードで描かせている上述の座標は、 Y-Z平面に射影すると、リサージュ図形の位相が時間変化していく感じになっています。 グラフ画面の左に並ぶ3本のバーで、X/Y/Z軸の長さを調整できる ので、一番左のバーを下まで下げて見ると、 実際にY-Z平面への射影の様子が見られます（メニューバーから「オプション」>「平面化」でも可能です）：

それに対してX-Z平面への射影では、以下のような正弦関数が横にスライドしていく感じになっています（X-Y平面も似たような内容です）：

X/Y/Z座標を決めている式を書き換えると、当然この射影の形も変わるので、色々と遊んでみると楽しいかもしれません。

連番の画像ファイルに出力したい場合は…

アニメーション内容を、連番の画像ファイルに出力したい場合があるかもしれません。 そのような場合には、アニメーションループ内の末尾でexportGraph3D関数を使用し、画像を出力します。 ただし、画像が無限に生成されるのは色々とまずいので、一般には画像を出力する時間の範囲を限定しておくようにしましょう。

例えば上のコードでは、アニメーションループ部分の末尾に、以下のような内容を追記します：

	...

	// 30ミリ秒だけ一時停止（アニメーションウェイト）
	sleep(30);
	
	// グラフの内容を、連番の画像ファイル「 image_*.png（ * の箇所が番号）」に出力する
	// （画像ファイルを無限に出力し続けるのは普通はまずいので、時間の範囲を限っておく）
	if(frame <= 100) {
		exportGraph3D(graph, "image_" + frame + ".png", "PNG");
	}
}

このようにすると、プログラムを実行した際、同じフォルダ内にPNG形式の画像ファイル 「 image_0.png 」 ... 「 image_100.png 」 が生成されます。 このような連番画像ファイルは、画像編集ソフトや動画編集ソフトなどを用いて、動画形式のファイルに変換できます （方法は「 連番 画像 動画 」 などでWeb検索してみてください）。

なお、このコードアーカイブでは、連番画像ファイルをそのままアニメーション再生するツールも公開しています：

• 連番画像をアニメーション再生する簡易ツール

ライセンス

このVCSSL/Vnanoコード（ 拡張子が「.vcssl」や「.vnano」のファイル ）は実質的な著作権フリー（パブリックドメイン) である CC0 の状態で公開しています※。 記事中にC言語/C++/Java言語などでのサンプルコードが掲載されいてる場合は、それらについても同様です。 そのままでのご利用はもちろん、改造や流用などもご自由に行ってください。

※ ただし、このコードの配布フォルダ内には、ダウンロード後すぐに実行できるように、 VCSSLの実行環境も同梱されており、そのライセンス文書は「 License 」フォルダ内に同梱されています （要約すると、商用・非商用問わず自由に使用できますが、使用の結果に対して開発元は一切の責任を負いません、といった具合の内容です）。 配布フォルダ内の各構成物の一覧やライセンスについては「 ReadMe_使用方法_必ずお読みください.txt 」をご参照ください。

※ Vnano の実行環境については、別途スクリプトエンジンのソースコードも一般公開しており、 何らかのソフトウェア内に組み込んでご利用いただく事も可能です。詳細はこちらをご参照ください。

この記事中の商標などについて

• OracleとJavaは、Oracle Corporation 及びその子会社、関連会社の米国及びその他の国における登録商標です。文中の社名、商品名等は各社の商標または登録商標である場合があります。
• Windows は、米国 Microsoft Corporation の米国およびその他の国における登録商標です。この記事は独立著作物であり、Microsoft Corporation と関連のある、もしくはスポンサーを受けるものではありません。
• Linux は、Linus Torvalds 氏の米国およびその他の国における商標または登録商標です。
• その他、文中に使用されている商標は、その商標を保持する各社の各国における商標または登録商標です。