[ 前へ | 目次 | 次へ ]
Now Loading...
※ PCでダウンロードし、ZIPファイルを展開して「 VCSSL.jar 」をダブルクリック実行して下さい。 動作には Java® が必要です。 このVCSSLコードのライセンスは パブリックドメイン(CC0)なので、改造や流用も含めてご自由にご使用いただけます。 (詳細: ReadMe.txt)

配列を2Dグラフにアニメーションプロットする

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

使用方法

ダウンロードと起動

PC(スマホは未対応)で上の画面の「 ダウンロードして実行 」ボタンを押して ZIP ファイルをダウンロードし、 右クリックして「すべて展開」してください。 展開した中にある「 VCSSL.jar(JARファイル) 」をダブルクリックして実行 すると、プログラムが起動します。 なお、動作には Java® が必要です。 » 詳しい実行方法はこちら

※ OSの種類によっては、右クリックメニューやコマンドラインからJava実行環境で「 VCSSL.jar 」を実行してください。 その際、VCSSL.jar に実行権限の付加が必要な場合もあります。 » 詳しい実行方法はこちら

» うまく実行できない場合は…

プログラムのコード内容を編集したい場合の起動方法

VCSSL.jar の代わりに「 VCSSL_Editor.jar(JARファイル) 」を実行すると、 プログラムのコード内容を編集できるエディター画面が表示されます。 エディター画面左下の三角ボタンを押すと、編集中のプログラムがその場で起動します。

※ もちろん、一般のテキストエディターソフトでの編集も可能です。 拡張子が「 .vcssl 」のファイルにコードが記述されていますので、開いて編集してください。

起動後

起動すると、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コードは著作権フリー(パブリックドメイン)で公開しています。 そのままでのご利用はもちろん、言語の種類を問わず、改造や流用などもご自由に行ってください。



スポンサーリンク



[ 前へ | 目次 | 次へ ]
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次元グラフにプロットするサンプルプログラムです。
配列を2Dグラフにプロットする

座標値配列の内容を、2次元グラフにプロットするサンプルプログラムです。
配列を3Dグラフにプロットする(点/線グラフ)

座標値配列の内容を、3次元の点/線グラフにプロットするサンプルプログラムです。
ファイルを3Dグラフにプロットする(点/線グラフ)

座標値ファイルの内容を、3次元の点/線グラフにプロットするサンプルプログラムです。
ファイルを2Dグラフにプロットする

座標値ファイルの内容を、2次元グラフにプロットするサンプルプログラムです。
スポンサーリンク

この階層の目次
[ 前へ | 目次 | 次へ ]
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次元グラフにプロットするサンプルプログラムです。
配列を2Dグラフにプロットする

座標値配列の内容を、2次元グラフにプロットするサンプルプログラムです。
配列を3Dグラフにプロットする(点/線グラフ)

座標値配列の内容を、3次元の点/線グラフにプロットするサンプルプログラムです。
ファイルを3Dグラフにプロットする(点/線グラフ)

座標値ファイルの内容を、3次元の点/線グラフにプロットするサンプルプログラムです。
ファイルを2Dグラフにプロットする

座標値ファイルの内容を、2次元グラフにプロットするサンプルプログラムです。
お知らせ

Vnanoのソースコードと開発リポジトリをGitHubで公開
2018年09月30日 - 現在開発中の、ソフトウェア上でのスクリプト処理用途に向けた小型・軽量スクリプトエンジン「 Vnano 」のソースコード&リポジトリを公開しました。ビルド・使用方法や、現状の段階と今後などを解説します。

リニアングラフ3D&2D Ver.5.6 リリース! Java言語のプログラムからも制御可能に
2018年08月19日 - 約5年ぶりの大きなバージョンアップを迎えた、新しいリニアングラフ Ver.5.6の特徴をご紹介します。UIがリファインされ、Java言語でグラフ描画ライブラリとして使う事も可能になりました。

ライセンスの緩和方向への改訂を実施、条件を満たす場合のソフトの再配布などが可能に
2018年07月16日 - RINEARNでは2018年7月に、ソフトウェアライセンスの緩和方向への改訂を実施しました。新ライセンスでは、いくつかの条件を満たす場合において、ソフトの再配布などが無申請で可能になりました。

新着
z = f(x,y,t) の形の数式を3Dグラフとしてアニメーション描画するツール

入力欄に z = f(x,y,t) の形の数式を入力すると、それを3次元のグラフにアニメーション描画してくれる簡易ツールです。
2018年11月26日
y = f(x,t) の形の数式を2Dグラフとしてアニメーション描画するツール

入力欄に y = f(x,t) の形の数式を入力すると、それを2次元のグラフにアニメーション描画してくれる簡易ツールです。
2018年11月25日
t を媒介変数とする x(t), y(t), z(t) の数式を3Dグラフに描画し、アニメーションもできるツール

入力欄に x(t), y(t), z(t) の形の数式を入力すると、それを t を媒介変数として3次元のグラフに描画し、アニメーションもできる簡易ツールです。
2018年11月20日
t を媒介変数とする x(t), y(t) の数式を2Dグラフに描画し、アニメーションもできるツール

入力欄に x(t), y(t) の形の数式を入力すると、それを t を媒介変数として2次元のグラフに描画し、アニメーションもできる簡易ツールです。
2018年11月19日
z = f(x,y) の形の数式を3Dグラフとして描画するツール

入力欄に z = f(x,y) の形の数式を入力すると、それを3次元のグラフに描いてくれる簡易ツールです。
2018年11月17日
開発元Twitterアカウント

スポンサーリンク