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

[公式ガイドサンプル] CSVファイルにデータを書き出し&読み込んで、複雑な3次元曲面のグラフを描く(花形)

このプログラムは、 「 VCSSLスタートアップガイド 」 の 「 CSVファイルとグラフの描画 」 の回に登場するサンプルコードです。 ここでは、そのサンプルコードを実行環境ごとダウンロードして、実際に実行してみる事ができます。 プログラミングガイド的な詳しい解説については、上記ページをご参照ください。

使用方法

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

まず、PC(スマホは未対応)で上の画面の「 ダウンロード 」ボタンを押してください。 するとZIP形式で圧縮されたファイルがダウンロードされるので、そのZIPファイルを右クリックして「すべて展開」や「ここに展開」などで展開(解凍)してください。 展開が成功すると、ZIPファイルと同じ名前のフォルダができ、その中にZIPファイルの中身が入っています。

» 展開がエラーで止まってしまう場合は…

なお、Linux® 等をご使用で、右クリックメニューから展開するとファイル名が文字化けしてしまう場合は、 コマンドライン端末でZIPファイルのある場所まで cd した上で「 unzip -O cp932 ZIPファイル名 」で展開してみてください。

プログラムの起動

Microsoft® Windows® をご使用の場合

上記の通りにZIPファイルを展開したフォルダ内にある、 「 VCSSL.bat(種類はバッチファイル) 」をダブルクリック実行してください。 もしプログラムの内容を書き変えながら使いたい場合は、代わりに「 VCSSL_Editor.bat 」を実行してください。

実行すると、最初にメモリー使用量や、(必要な場合のみ)Java®実行環境を自動で入手するか 等を尋ねられるので、適時答えると、プログラムが起動します。2回目以降はすぐに起動します。

※ ここで入手したJava®実行環境は、ZIPファイルを展開した中の「 jre 」フォルダ内にダウンロードされ、このプログラムの実行のみに使用されます。PC全体に影響する形でインストールされる事はありません。

Linux® 等やその他のOSをご使用の場合

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

java -jar VCSSL.jar
(プログラムの内容を書き変えながら使いたい場合は、代わりに VCSSL_Editor.jar を実行)

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

起動後

起動すると、まず同じフォルダ内に「 file.csv 」という名前のCSVファイルが作成され、 その中に以下の内容が書き出されます(メモ帳などのテキストエディタで開いてみてください):

- file.csv -
-0.5,-0.5,0.00222
-0.49,-0.5,-0.01514
-0.48,-0.5,-0.03016
-0.47,-0.5,-0.04286
-0.46,-0.5,-0.05327
-0.45,-0.5,-0.06144

0.48,-0.5,0.82628
0.49,-0.5,0.86569
0.5,-0.5,0.89168

-0.5,-0.49,-0.10295
-0.49,-0.49,-0.11773
-0.48,-0.49,-0.12993

0.49,-0.49,0.84192
0.5,-0.49,0.87165

-0.5,-0.48,-0.20179
-0.49,-0.48,-0.2133
-0.48,-0.48,-0.22203

0.49,-0.48,0.81686
0.5,-0.48,0.85003


(略)


-0.5,0.5,-0.89168
-0.49,0.5,-0.86569
-0.48,0.5,-0.82628

0.49,0.5,0.01514
0.5,0.5,-0.00222

これはカンマ記号「 , 」区切りで、 3列(※列は縦の並び)のデータが記載されているものです。

曲面グラフを描くためのファイルの形式は、メッシュグラフを描く場合と同じで、 1行(※行は横の並び)がメッシュの格子点の1点に対応していて、左列の値がX座標、中央の列の値がY座標、右列の値がZ座標とみなされます。 そして各格子点(各行)は、以下の図の順序で辿って書き出されています:

このあたりの説明は、このサンプルコードの掲載元である 「 VCSSLスタートアップガイド 」 の 「 CSVファイルとグラフの描画 」 の回をご参照ください。

上記のファイルが書き出された直後に、自動でグラフソフトが起動し、下図の3次元グラフが描画されます:

実行結果のグラフ
実行結果のグラフ
ファイルへのデータの書き出しが完了すると、グラフ画面が立ち上がり、3次元グラフが描画されます。

これは、上で書き出されたCSVファイル「 file.csv 」の中に記載されたデータが、3次元グラフとしてプロットされたものです。 なお、別に一旦ファイルに書き出さなくても、プログラム内のデータから直接グラフを描く事はできるのですが(アニメーション等ではそうした方が高速です)、 データの数値を目視で確認したり、別のソフトやプログラムと組み合わせて使用する場合などには、ファイルを介してデータをやり取りするのが便利です。

ところで、起動したままの標準状態だと、角度や目盛りなどがやや見づらいので、設定を色々と調整してみましょう (プログラム内からも設定を行う事はできますが、サンプルコードとしてはあまり本質的でない処理を増やしたくないため、割愛しています)。

まずグラフをもう少し平べったくしたいので、画面左に並ぶバーをスライドさせて、Z軸の長さを短くしましょう。 また、グラフ画面上部のメニューバーから、「編集」>「目盛りの設定」メニューを選ぶと開かれる設定ウィンドウで、 不要な位置の目盛りを消したり、書式を調整する事ができます。 同様に「編集」>「範囲の設定」メニューから、X/Y/Z軸の範囲をきりのいい値など(任意)に調整できます。 さらに、「オプション」>「テッセレーション(曲面高画質化)」を有効にすると、粗かった曲面が綺麗になります(半面、描画は重くなります)。

上記のように色々と細かい設定を行って、調整した結果が下図です:

設定を調整したグラフ
実行結果のグラフ
形を見やすくなるように、設定を調整した結果です。

だいぶ見やすくなりましたね。設定は、「ファイル」>「設定の保存」メニューで保存する事もできます。 設定ファイルは、デフォルトの場所に保存すると次回から自動で読み込まれますが、 恐らく適切な設定はプログラムごとに違うので、別の場所に保存しておいて、プログラム内から setGraph3DConfigurationFile 関数で指定して読み込む事も可能です。

コード解説

このプログラムのコードはVCSSLで記述されています。

内容を書き変えて改造したい場合には、 プログラムのコード「 Graph3DFlower.vcssl 」をテキストエディタで開いて改造してください。 スクリプト言語なので、コンパイラなどの別ソフトは不要で、コードを書き換えるだけでOKです。 VCSSLはC系の単純な文法の言語なので、C言語などに触れた事のある方なら簡単に読めると思います。

コード全体は以下の通りです。

以上です。70行程度のコードですね。 長さ自体はそう長くはないですが、中で行っている事の意味は少しややこしいかもしれません。

ただ、今回のコードは、実は前回のサンプルコード 「 CSVファイルにデータを書き出し、読み込んで3次元のメッシュグラフを描く 」 をベースに書き加えたものになっています。z の値を求める過程を除けば、全体的な流れは同じです。 なので、全体的な説明は、前回の記事をご参照ください。

以下では、前回と大きく変わっている箇所のみを抜き出して見てみましょう。 それは、ファイルに座標点を書き出している、以下の部分です:

具体的にやっている事は、2重の for 文を使ったくり返し処理で、メッシュの格子点を辿りながら、座標値を書いていっています。 点の座標値は、writeln 関数で、ファイルに1行ずつ「x,y,z」の形で書き出しています。 メッシュの格子点を辿っていく順序は、先ほども掲載した、以下の図の通りです:

※ for 文については VCSSLスタートアップガイド の 「 くりかえし処理 」 の回、ファイルの書き出しについては同様に 「 ファイルの読み書き 」 の回などをご参照ください。

この事自体は前回と同じなのですが、 今回の内容が難しくなっているのは、z の値が、x と y だけで単純に書ける形にはなっていない事です。

具体的には、前回のコードでは、z は

のように x と y を使ってストレートに書ける形になっていましたが、今回のコードの z は

のように、θ(theta) と r を使って書き表されています。 これは、x-y 平面上での位置を示す際に、x と y の座標値の代わりに、 「その点と原点との距離」を r とし、「その点と原点を結ぶ線の角度が、X軸を 0 として、反時計回りにどれだけ回った角度か(偏角)」を θ とするものです:

高校数学で「極座標」というものを習った方は、 上のような図を見た記憶があるかもしれません。まさにあれ(の一種)です。

さっきのコード内の、z の値を求める直前にある以下のコードが、x と y の値から r とθの値を求める処理を行っています:

ところで、極座標の r や θ の値を、x-y 平面上で分布のように図示した事がある方はそう多くないかもしれません。 今回やっている事はその延長線上にあるので、まずは単純に z = r や z = θ としたグラフがどういう形をしているのかを見ておきましょう。

まずは z = r のグラフです。これはコード内で z の値を求めている所を以下のように書き換えれば OK です:

するとグラフは:

z = r のグラフ

このように、円錐を逆さにしたような形になります。r は原点からの距離なので、それを z 値つまり高さにすると、 原点から離れるほどに高くなるので、このような(逆)円錐の形になるわけですね。

続いて z = θ のグラフを見てみましょう。これはコード内で z の値を求めている所を以下のように書き換えれば OK です:

するとグラフは:

z = θ のグラフ

このように、原点を中心として、ぐるっと回る方向に少しずつ高くなっていく、滑らかな螺旋階段のような形になりましたね。 これもθの意味を考えると、イメージそのままの形です。 なお、このグラフはX軸をはさんで不連続になっているので、X軸のあたりに(緑色の)壁が立ちはだかって、壁の向こうが透けていたりしていますが、 これは不連続な所にまたがって強引にメッシュを張って描画している都合なので、気にしないでください。

本題は、これらに sin などの三角関数を組み合わせたら、どのような形になるか、です。 まずは、素直にθを sin 関数で包んでみましょう。コード内で z の値を求めている所を以下のように書き換えます:

係数に 5 をかけているのは、その方がわかりやすいからです。この係数が、以下のグラフで放射状に延びる山脈の数になります。 グラフは:

z = sin( 5θ ) のグラフ

このように、放射状に山と谷が伸びるグラフになりました。 sin 関数は、例えば sin(a) なら a の増加に対して山と谷がくり返す形をしています。 z = θ のグラフの形は、先に見たような螺旋階段の形をしているので、それに sin 関数をかぶせると、 「sin 関数の引数が原点を回り込むように螺旋階段を登っていく」ので、結果として 「原点を回り込むように山と谷がくり返す」形になるわけです。

一方、原点から放射方向にはθの値は一定なので、それを引数とする sin 関数でもやはり同様で、放射方向には高さが一定になっています。 なので、山と谷が、放射方向の山脈のようになっています。

これに「ひねり」の効果を入れるには、放射方向に変化する値、つまり r を、sin 関数の引数に加えればOKです:

この結果のグラフは:

z = sin( 5θ + 10r ) のグラフ

このように、放射方向にも sin 関数の引数が変化するようになった結果、山脈に「ひねり」が加わりましたね。

だいぶゴールの形に近づいてきました。 しかし気になるのは、原点付近でグラフの形が汚い事です。 実はこの関数は原点で不連続なので、格子状にメッシュを切っているいまの場合には、そこがギザギザして汚くなります。

という事で、できれば原点付近の振動を0に抑えて、ギザギザを見えなくしたい所です。 基本的に、どんな数でも(すごく特殊なものを除けば) 0 をかければ 0 になるので、 原点付近で 0 になるような関数を作って、先ほどのグラフの関数にかけてやればよさそうです。

で、そのような関数に何を用いるかですが、どうせなら sin を使いましょう。その引数に r を入れれば、原点 r = 0 で sin( r ) = 0 なので、 原点で 0 になります。その事自体は係数をかけても同じなので、実際には sin( 6r ) を使います。 このグラフを描くには、コード内で z の値を求めている所を以下のように書き換えれば OK です:

グラフは:

z = sin( 6r ) のグラフ

と、このように、原点付近で鋭く 0 に落ち込む形になりました。これなら先のグラフのギザギザを抑え込めそうです。

ついでに、リング状のピークを越えて、外周付近にも落ちていく形になっています。 実は係数の「 6 」は、ちょうどグラフの範囲の端でこんな感じに落ちていってくれるように微調整した結果の値です。 それによって、最終的なグラフの外周部が落ちて、花びらのような形になってくれます。

さて、最後です。この sin(6r) を、先ほどの sin(5θ+10r) にかけてやります:

最初に戻りましたね。やっと今回のコードの式に着地しました。 このグラフは既に見た通り:

z = sin( 10θ + 5r ) * sin( 6r ) のグラフ

お花のような形をしていますね。

余談ですが、グラフ画面上部のメニューバーから、「オプション」>「平面化」を有効にすると、 下図のようにグラフを平面にする事ができます:

z = sin( 10θ + 5r ) * sin( 6r ) のグラフ(平面化)

3Dの迫力的なものは無くなってしまいますが、こちらのほうが、よりお花っぽいかもしれません。

コード内容は以上です。今回の過程が面白そうだと感じた方は、いろいろと改造して、ぜひ遊んでみてください!

詳しいVCSSLのプログラミングガイド(無料)はこちらへ!

上記のコードはプログラミング言語VCSSLで記述されており、VCSSLのプログラミングガイドは下記で無料公開しています。 上記のコードを改造したい方や、新しいコードを書いてみたい方はぜひご活用ください!

ブラウザで読めるWeb版だけでなく、PDF版も無料で配布しています!

スタートアップガイド( プログラミングがはじめての方向け )
プログラミングの入門書に相当する内容です。プログラミングが初めての方はこちらがおすすめです。
即席ガイド( C系言語ユーザー向け )
C言語や C++ などのC系の言語を扱われている方が、即席でVCSSLを扱うための簡易ガイドです。
文法ガイド
VCSSLの文法や基本的な機能を淡々とまとめた、リファレンスマニュアル的な位置づけのガイドです。
GUI開発ガイド
ボタンや入力項目などのGUI部品が並ぶ、画面を備えたVCSSLプログラムを開発するためのガイドです。
2DCG開発ガイド
画面上や画像ファイルなどに、2次元的な描画を行うVCSSLプログラムを開発するためのガイドです。
3DCG開発ガイド
画面上や画像ファイルなどに、3次元的な描画を行うVCSSLプログラムを開発するためのガイドです。
標準ライブラリ 仕様書
コード内で呼び出される関数は、大半が標準ライブラリのものです。その詳細仕様を掲載しています。

ライセンス

このVCSSLコード( 拡張子が「.vcssl」のファイル )は実質的な著作権フリー(パブリックドメイン) である CC0 の状態で公開しています。 そのままでのご利用はもちろん、言語の種類を問わず、改造や流用などもご自由に行ってください。

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

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

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


スポンサーリンク



[ 前へ | 目次 | 次へ ]
[公式ガイドサンプル] CSVファイルにデータを書き出し&読み込んで、複雑な3次元曲面のグラフを描く(魔法陣形)

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、魔法陣のような3次元曲面のグラフを描画します。
[公式ガイドサンプル] CSVファイルにデータを書き出し&読み込んで、複雑な3次元曲面のグラフを描く(花形)

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、花の形の3次元曲面のグラフを描画します。
[公式ガイドサンプル] CSVファイルにデータを書き出し、読み込んで3次元のメッシュグラフを描く

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、3次元のメッシュグラフを描画します。
[公式ガイドサンプル] CSVファイルにデータを書き出し、読み込んで3次元の線グラフを描く

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、3次元の線グラフを描画します。
[公式ガイドサンプル] CSVファイルに書かれた数値データを、配列として読み込んで表示する

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルに記載された数値データを、読み込んで配列に格納してから、内容を画面に表示します
[公式ガイドサンプル] CSVファイルにデータを丸めて書き出し、読み込んで2次元グラフを描く

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを、丸め処理を行った上で書き出し、さらにそれを読み込んで、2次元グラフを描画します。
[公式ガイドサンプル] CSVファイルにデータを書き出し、読み込んで2次元グラフを描く

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、2次元グラフを描画します。
[公式ガイドサンプル] CSVファイルを読み込んで2次元グラフを描く

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルに記載されたデータを読み込み、2次元グラフを描画します。
スポンサーリンク

この階層の目次
[ 前へ | 目次 | 次へ ]
お知らせ

Vnanoのスクリプトエンジンアーキテクチャ解説1: 全体像
2019年05月28日 - RINEARNでは現在、 アプリケーション組み込み用スクリプトエンジン「 Vnano 」を、オープンソースで開発中です。今回は、このスクリプトエンジンのアーキテクチャ面を掘り下げて解説します。

リニアンプロセッサー nano の先行開発版やソースコードリポジトリを公開
2019年04月16日 - オープンソースで開発中の小型プログラム関数電卓ソフト、「 リニアンプロセッサー nano 」の先行開発版やソースコードリポジトリを公開しました。概要と使用方法、ビルド方法などについて解説します。

各ソフトウェアの最新版を一括でリリース、OpenJDKのJava実行環境(JRE)に対応
2019年03月06日 - RINEARNでは3月6日に、主要なソフトウェアの最新版を一括でリリースしました。今回のアップデートには、以前お知らせした、OpenJDKで生成したJREへの対応が含まれています。その概要等をお知らせします。

新着
連番ファイルから3Dグラフをアニメーション描画するツール

フォルダ内の連番データファイルを読み込み、3Dグラフを高速で連続描画して、アニメーションさせるツールです。
2019年06月03日
連番ファイルから2Dグラフをアニメーション描画するツール

フォルダ内の連番データファイルを読み込み、2Dグラフを高速で連続描画して、アニメーションさせるツールです。
2019年05月24日
[公式ガイドサンプル] 立体モデルを生成して3D空間に配置する

「VCSSL 3DCG開発ガイド」内のサンプルコードです。立体モデルを生成し、3D空間に配置します。
2019年05月21日
[公式ガイドサンプル] ポリゴンを生成して3D空間に配置する

「VCSSL 3DCG開発ガイド」内のサンプルコードです。立体の基本的な構成要素となるポリゴンを生成し、3D空間に配置します。
2019年05月20日
[公式ガイドサンプル] CSVファイルにデータを書き出し&読み込んで、複雑な3次元曲面のグラフを描く(魔法陣形)

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、魔法陣のような3次元曲面のグラフを描画します。
2019年05月17日
開発元Twitterアカウント

スポンサーリンク