» 詳しい使用方法や、エラーで展開できない際の対応方法などはこちら
配列を2Dグラフにアニメーションプロットする
このVCSSLプログラムは、座標値が格納された配列の内容を2Dグラフにプロットし、 それを連続的にくりかえす事で、アニメーションさせるプログラムです。 サンプル的な短いコードなので、改造や流用のベースに適しています。
» 関連ページ: Java言語での2Dグラフ描画についてはこちら
ファイルを2Dグラフにプロットする | |
座標値ファイルの内容を、2次元グラフにプロットするサンプルプログラムです。 | |
配列を2Dグラフにプロットする | |
座標値配列の内容を、2次元グラフにプロットするサンプルプログラムです。 | |
[現在のページです] 配列を2Dグラフにアニメーションプロットする | |
座標値配列の内容を、2次元グラフに連続でプロットし、アニメーションさせるサンプルプログラムです。 | |
配列を3Dグラフにアニメーションプロットする(曲面/メッシュグラフ) | |
座標値配列の内容を、3次元の曲面/メッシュグラフに連続でプロットし、アニメーションさせるサンプルプログラムです。 |
スポンサーリンク
使用方法
ダウンロードと展開(解凍)
まず、PC(スマホは未対応)で上の画面の「 ダウンロード 」ボタンを押してください。 するとZIP形式で圧縮されたファイルがダウンロードされます。
その後、ZIPファイルを右クリックして「すべて展開」や「ここに展開」などで展開(解凍)してください。 展開が成功すると、ZIPファイルと同じ名前のフォルダができ、その中にZIPファイルの中身が入っています。
» 展開がエラーで止まってしまう場合や、ファイル名が文字化けしてしまう場合は…
プログラムの起動
Windows をご使用の場合
上記でZIPファイルを展開したフォルダ内にある、以下のバッチファイルをダブルクリック実行してください:
もしプログラムを書き変えながら使いたい場合は、代わりに「 VCSSL_Editor__プログラム編集はこちら.bat 」を実行してください。
正常に起動できると、初回のみ、Java実行環境を入手するか等を尋ねられるので、適時答えて済ませると、プログラムが起動します。 2回目以降はすぐに起動します。
Linux 等をご使用の場合
ZIPファイルを展開したフォルダ内へコマンドライン端末で cd して、以下の通り入力して実行してください:
(プログラムの内容を書き変えながら使いたい場合は、代わりに VCSSL_Editor.jar を実行)
» javaコマンドが使用できない等のエラーが表示される場合は…
起動後
起動すると、2Dグラフが起動し、適当に計算した座標値のグラフがアニメーション表示されます。
プロットする内容を変えるには、コード中の座標値値配列を代入している部分( 2重になっている for 文の内側の中身 )を適当に書き換えてください。
コード解説
それでは、このプログラムのコード内容について解説していきます。 このプログラムのコードはVCSSLで記述されています。
コード全体
まずは、コード全体を見てみましょう。
流れとしては、前半部で座標値配列の確保やグラフの起動・設定を済ませた上で、 後半部(28行目〜)でアニメーションの処理を行っています。
先頭部分
先頭部分を見てみましょう。
先頭の「 coding Shift_JIS; 」では、プログラムの文字コードを明示しています( UTF-8も可 )。必須ではありませんが、書いておくと文字化けするのを防げます。
「 import tool.Graph2D; 」の部分は、 2次元グラフを扱うための「 tool.Graph2D 」ライブラリを読み込んでいます。 その後の「 import Math; 」の部分は、 数学関数を扱うための「 Math 」ライブラリを読み込んでいます。
座標値配列の用意
続いて、グラフにプロットする内容を格納する、座標値配列を用意する部分です。
配列 xData に座標点のX値を、yData にY値を格納します。配列のインデックスは、座標点を区別する番号となります。 例えば3番座標点の座標は (xData[3],yData[3]) といった具合です。
このように座標値を配列に格納してグラフにプロットするのは、 「 配列を2Dグラフにプロットする 」 の回で扱っています。 今回はその応用的な内容ですので、あらかじめ上の回を踏まえた上でお読みいただくと分かりやすいかもしれません。
グラフを起動し、プロット範囲などの設定を行う
続いて、2Dグラフを起動して、プロット範囲などの初期設定を行う部分です。
「 配列を2Dグラフにプロットする 」 の回では、プロット範囲の設定などは行わず、標準の状態のままで用いていました。 その場合、プロットするデータに合わせて、範囲が自動で調整されます。
しかし今回のようにアニメーションさせる場合は、 アニメーションのコマ毎に範囲が変わってしまうと逆に厄介なので、 明示的に範囲を指定した上で、自動調整機能を無効化しています:
このように newGraph2D関数で2次元グラフソフトを起動した上で、 設定を行っています。
なお、このnewGraph2D関数は、呼ぶ度にグラフソフトを1個起動し、そのグラフソフトに固有のID番号を割り振って返します。 例えば2次元グラフソフトを何個も起動した場合、12番グラフ、22番グラフ、101番グラフ、 …といったように、それぞれに番号が割り振られているわけです。 上では、生成したグラフに割り振られたID番号をint型変数「 graph 」に格納しているわけです。
グラフに対して設定やプロットなどの操作を行う際は、このように控えたID番号を用いて、どのグラフに対する操作なのかを指定します。 実際に、すぐ後でX範囲設定の関数 setGraph2DRangeX の引数に、変数 graph に控えたID番号を渡していますね。
なお、今回のコードでは、グラフの描き方に関するプロットオプションは標準のままなので、 「 座標点には点が打たれて、それらが線で結ばれる 」という挙動になります。 一方で、アニメーションだと「 点を打たずに線だけ描きたい 」という場合も多いと思います。 その場合は、25行目先頭のコメントアウト「 // 」を削って、その行を有効にしてください。
座標値配列の更新とグラフプロットをくりかえし、アニメーションさせる
さて、残りは肝心のアニメーション部分です。 アニメーションは、パラパラ漫画の要領で、少しずつ違ったグラフを連続でプロットさせ続ける事で行います。
2重の for 文になっていますが、外側の for 文が、時間に関するループ = アニメーションループです。 パラパラ漫画でいうところの、ページをめくるループですね。 アニメーションの用語では、ページというよりも「 フレーム 」と呼んだりします。
さて、外側の for 文の中身が、アニメーションの1フレーム(1ページ)ごとの処理です。 全体的な流れとしては、まずそのフレームに対応する時刻 t の値を求めて、 その t の値に基づいて座標値配列の内容を更新し、 その内容をグラフに描かせて、最後に少しだけ小休止、という内容になっています。 これを毎秒数十回くりかえす事で、人間の目には動いて見えるわけですね。
これらの処理の中で、グラフに描く内容を決めているのは、 座標値配列を更新する部分です。 抜き出すと以下の通りです:
このコードは簡単なサンプルであるため、 X座標については単純にグラフのX範囲を pointN-1 等分 ※ した点とし、 Y座標については sin(x + t) としています。 このあたりについては、描かせたい内容に応じて書き換えてください。
※ 座標点の数が pointN 個なので、その間の区間の数は pointN-1 個になります(指と指の間は4つですよね?)。 なので、点がX方向に等間隔に並ぶとすると、その間隔 dx は「 X範囲の長さ / (pointN-1) 」、 つまり「 (xMax-xMin) / (pointN-1) 」になります。
連番の画像ファイルに出力したい場合は…
アニメーション内容を、連番の画像ファイルに出力したい場合があるかもしれません。 そのような場合には、アニメーションループ内の末尾でexportGraph2D関数を使用し、画像を出力します。 ただし、画像が無限に生成されるのは色々とまずいので、一般には画像を出力する時間の範囲を限定しておくようにしましょう。
例えば上のコードでは、アニメーションループ部分の末尾に、以下のような内容を追記します:
このようにすると、プログラムを実行した際、同じフォルダ内に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 氏の米国およびその他の国における商標または登録商標です。
- その他、文中に使用されている商標は、その商標を保持する各社の各国における商標または登録商標です。
Vnano版 | 積分値のグラフ描画用データを出力するプログラム |
|
|
数値的に積分を行い、結果の関数をグラフに描くためのデータを出力するコードです。 |
3Dグラフを回転アニメーションさせるツール |
|
|
3Dグラフを、Z軸まわりにゆっくりと回転アニメーションさせるツールです。全角度のグラフを、連番の画像ファイルに保存する事もできます。 |
連番ファイルから3Dグラフをアニメーション描画するツール |
|
|
フォルダ内の連番データファイルを読み込み、3Dグラフを高速で連続描画して、アニメーションさせるツールです。グラフを連番の画像ファイルに保存する事もできます。 |
連番ファイルから2Dグラフをアニメーション描画するツール |
|
|
フォルダ内の連番データファイルを読み込み、2Dグラフを高速で連続描画して、アニメーションさせるツールです。グラフを連番の画像ファイルに保存する事もできます。 |
z = f(x,y,t) の形の数式を3Dグラフとしてアニメーション描画するツール |
|
|
入力欄に z = f(x,y,t) の形の数式を入力すると、それを3次元のグラフにアニメーション描画してくれる簡易ツールです。 |
y = f(x,t) の形の数式を2Dグラフとしてアニメーション描画するツール |
|
|
入力欄に y = f(x,t) の形の数式を入力すると、それを2次元のグラフにアニメーション描画してくれる簡易ツールです。 |
t を媒介変数とする x(t), y(t), z(t) の数式を3Dグラフに描画し、アニメーションもできるツール |
|
|
入力欄に x(t), y(t), z(t) の形の数式を入力すると、それを t を媒介変数として3次元のグラフに描画し、アニメーションもできる簡易ツールです。 |
t を媒介変数とする x(t), y(t) の数式を2Dグラフに描画し、アニメーションもできるツール |
|
|
入力欄に x(t), y(t) の形の数式を入力すると、それを t を媒介変数として2次元のグラフに描画し、アニメーションもできる簡易ツールです。 |
z = f(x,y) の形の数式を3Dグラフとして描画するツール |
|
|
入力欄に z = f(x,y) の形の数式を入力すると、それを3次元のグラフに描いてくれる簡易ツールです。 |
y = f(x) の形の数式を2Dグラフとして描画するツール |
|
|
入力欄に y = f(x) の形の数式を入力すると、それを2次元のグラフに描いてくれる簡易ツールです。 |
配列を3Dグラフにアニメーションプロットする(曲面/メッシュグラフ) |
|
|
座標値配列の内容を、3次元の曲面/メッシュグラフに連続でプロットし、アニメーションさせるサンプルプログラムです。 |
配列を3Dグラフにアニメーションプロットする(点/線グラフ) |
|
|
座標値配列の内容を、3次元の点/線グラフに連続でプロットし、アニメーションさせるサンプルプログラムです。 |
配列を2Dグラフにアニメーションプロットする |
|
|
座標値配列の内容を、2次元グラフに連続でプロットし、アニメーションさせるサンプルプログラムです。 |
配列を3Dグラフにプロットする(曲面/メッシュグラフ) |
|
|
座標値配列の内容を、3次元の曲面/メッシュグラフにプロットするサンプルプログラムです。 |
ファイルを3Dグラフにプロットする(曲面/メッシュグラフ) |
|
|
座標値ファイルの内容を、3次元の曲面/メッシュグラフにプロットするサンプルプログラムです。 |
ユーザーが入力した数式を2Dグラフにプロットする |
|
|
実行時にユーザーが入力した数式の値を、2次元グラフにプロットするサンプルプログラムです。 |
配列を3Dグラフにプロットする(点/線グラフ) |
|
|
座標値配列の内容を、3次元の点/線グラフにプロットするサンプルプログラムです。 |
配列を2Dグラフにプロットする |
|
|
座標値配列の内容を、2次元グラフにプロットするサンプルプログラムです。 |
ファイルを3Dグラフにプロットする(点/線グラフ) |
|
|
座標値ファイルの内容を、3次元の点/線グラフにプロットするサンプルプログラムです。 |
ファイルを2Dグラフにプロットする |
|
|
座標値ファイルの内容を、2次元グラフにプロットするサンプルプログラムです。 |