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

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

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

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

こちらもおすすめ!
ファイルを2Dグラフにプロットする
座標値ファイルの内容を、2次元グラフにプロットするサンプルプログラムです。
配列を2Dグラフにプロットする
座標値配列の内容を、2次元グラフにプロットするサンプルプログラムです。
[現在のページです] 配列を2Dグラフにアニメーションプロットする
座標値配列の内容を、2次元グラフに連続でプロットし、アニメーションさせるサンプルプログラムです。
配列を3Dグラフにアニメーションプロットする(曲面/メッシュグラフ)
座標値配列の内容を、3次元の曲面/メッシュグラフに連続でプロットし、アニメーションさせるサンプルプログラムです。

スポンサーリンク


使用方法

ダウンロードと展開(解凍)

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

Windows をご使用の方は、ここでまずZIPファイルを右クリックし、「プロパティ」を選んで開かれる画面で、 下の方にあるセキュリティ項目の「許可する」にチェックを入れて「OK」で閉じてください。 これを行わないと、ZIP展開やソフト起動時に、警告メッセージが出て展開完了/起動できない場合があります。

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

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

プログラムの起動

Windows をご使用の場合

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

VCSSL__ダブルクリックでプログラム実行.bat

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

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

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

Linux 等をご使用の場合

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

java -jar VCSSL.jar
(プログラムの内容を書き変えながら使いたい場合は、代わりに 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次元グラフにプロットするサンプルプログラムです。
この階層の目次
[ 前へ | 目次 | 次へ ]
RINEARN からのお知らせ
※ VCSSL は RINEARN が開発しています。

リニアングラフやVCSSLの最新版をリリース、目盛りの位置や内容を自由に指定可能に!
2024-11-24 - リニアングラフ3D/2Dを更新し、自由な位置に、自由な表記内容の目盛りを描けるようになりました! 併せて、Java言語やVCSSLでの、プログラム制御用APIも拡張しています。詳細をお知らせします。

Exevalator 2.2 をリリース、TypeScript 対応によりWebブラウザ上で動作可能に
2024-10-22 - オープンソースの式計算ライブラリ「Exevalator(エグゼバレータ)」の2.1をリリースしました。新たに TypeScript に対応し、Webブラウザ上での式計算にも使えるようになりました。詳細を解説します。

アシスタントAI作成の舞台裏(その2、作成編)
2024-10-12 - アシスタントAIの作成方法解説の後編です。実際にChatGPTの「GPTs」機能を用いて、アシスタントAIを作成する手順や、独自の知識をもたせたり、精度を出すためのノウハウなどを解説しています。

アシスタントAI作成の舞台裏(その1、基礎知識編)
2024-10-07 - アシスタントAI作成方法解説の前編です。今回はまず、アシスタントAIを作る前に抑えておきたい、基礎知識を延々と解説しています。そもそもLLM型AIとはどんな存在か? RAGとは何か? 等々です。

ソフトの利用をサポートしてくれるアシスタントAIを提供開始!
2024-09-20 - RINEARN製ソフトの使い方の質問応答や、一部作業のお手伝いをしてくれる、アシスタントAIを提供開始しました。ChatGPTアカウントさえあれば、誰でも無料で使用できます。使い方を解説します。

Exevalator 2.1 をリリース、新たに Visual Basic に対応
2024-07-28 - オープンソースの式計算ライブラリ「Exevalator(エグゼバレータ)」の2.1をリリースしました。今回から、新たに Visual Basic(VB.NET)でも使用できるようになりました。詳細を解説します。

関数電卓 RINPn(りんぷん)、Esc キーで計算式の一発クリアが可能に
2024-07-20 - 関数電 RINPn の Ver.1.0.2 をリリースしました。今回から、キーボードの「 Esc 」キーを押すと、入力中の計算式を一発でクリアできるようになりました。詳細を解説します。

Exevalator 2.0 をリリース、互換性に注意が必要なバグ修正が 1 件
2024-07-14 - オープンソースの式計算ライブラリ「Exevalator (エグゼバレータ)」の2.0をリリースしました。今回の更新では、互換性に注意を要する 1 件のバグ修正があります。詳細を解説します。

各ソフトウェアをアップデート、リニアングラフのコマンド拡張やVCSSLの英語対応など
2024-02-05 - 各ソフトの一斉アップデートの内容をお知らせします。今回は、リニアングラフのコマンド機能を大幅拡張したのがメインです。また、VCSSLのメッセージ類の英語対応も行いました。

Vnano の Ver.1.1 で実装した反復計算高速化の内側
2024-01-17 - 前回のお知らせ記事の続編です。スクリプトエンジン Vnano の Ver.1.1 において実施した高速化を、エンジン内部の実装面から掘り下げて解説します。

新着
[公式ガイドサンプル] 各種の図形や画像を描画する

「VCSSL 2DCG開発ガイド」内のサンプルコードです。図形や画像などを描画します。
2022-12-16
角度の「度」とラジアンとを相互変換し、図示もするツール

45度などの「度」の値と、ラジアンの値とを相互に変換できるツールです。対応する角度の図示もできます。
2022-11-22
[公式ガイドサンプル] 立体モデルを回転させるアニメーション

「VCSSL 3DCG開発ガイド」内のサンプルコードです。立体モデルを、アニメーションで回転させ続けます
2022-11-18
[公式ガイドサンプル] 立体モデルを回転させる

「VCSSL 3DCG開発ガイド」内のサンプルコードです。立体モデルを、指定した角度だけ回転させます。
2022-11-17
[公式ガイドサンプル] 四則演算の計算順序や、カッコを使った順序指定

「VCSSLスタートアップガイド」内のサンプルコードです。四則演算が計算される順序や、カッコを使って順序を指定する方法を例示します。
2022-10-31